fix(display right country flag on mobile phone change)

packages/blockchain-wallet-v4-frontend/package.json

@@ -54,6 +54,7 @@
     ]
   },
   "dependencies": {
+    "awesome-phonenumber": "2.2.5",
     "base-64": "0.1.0",
     "bignumber.js": "5.0.0",
     "bip21": "2.0.2",

packages/blockchain-wallet-v4-frontend/src/components/Form/PhoneNumberBox/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import { prop, toLower } from 'ramda'
 
 import IntlTelInput from 'react-intl-tel-input'
 import 'react-intl-tel-input/dist/libphonenumber.js'
@@ -34,7 +35,8 @@ const PhoneNumberBox = (field) => {
   const handler = (status, value, countryData, number, id) => {
     field.input.onChange(number)
   }
-  const countryCode = field.countryCode && field.countryCode.data.toLowerCase()
+  const upperCountryCode = prop('countryCode', field).getOrElse('US')
+  const countryCode = upperCountryCode && toLower(upperCountryCode)
 
   return (
     <Container>

packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators, compose } from 'redux'
-import { formValueSelector } from 'redux-form'
 
-import { actions, selectors } from 'data'
+import { actions } from 'data'
 import modalEnhancer from 'providers/ModalEnhancer'
+import { getData } from './selectors'
 import MobileNumberChange from './template.js'
 
 class MobileNumberChangeContainer extends React.PureComponent {
@@ -22,14 +22,16 @@ class MobileNumberChangeContainer extends React.PureComponent {
   }
 
   render () {
-    return <MobileNumberChange {...this.props} onSubmit={this.onSubmit} />
+    const { countryCode, mobileNumber } = this.props
+    return <MobileNumberChange
+      {...this.props}
+      countryCode={countryCode}
+      mobileNumber={mobileNumber}
+      onSubmit={this.onSubmit} />
   }
 }
 
-const mapStateToProps = (state) => ({
-  mobileNumber: formValueSelector('mobileNumberChange')(state, 'mobileNumber'),
-  countryCode: selectors.core.settings.getCountryCode(state)
-})
+const mapStateToProps = (state) => getData(state)
 
 const mapDispatchToProps = (dispatch) => ({
   modalActions: bindActionCreators(actions.modals, dispatch),

packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/selectors.js

@@ -0,0 +1,17 @@
+import PhoneNumber from 'awesome-phonenumber'
+import { lift } from 'ramda'
+
+import { formValueSelector } from 'redux-form'
+import { selectors } from 'data'
+
+const getCountryCode = (defaultCode, currentNumber) =>
+  currentNumber ? PhoneNumber(currentNumber).getRegionCode() : defaultCode
+
+export const getData = (state) => {
+  const currentNumber = selectors.core.settings.getSmsNumber(state)
+  const defaultCode = selectors.core.settings.getCountryCode(state)
+  return {
+    mobileNumber: formValueSelector('mobileNumberChange')(state, 'mobileNumber'),
+    countryCode: lift(getCountryCode)(defaultCode, currentNumber)
+  }
+}

packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/template.js

@@ -35,7 +35,7 @@ const MobileNumberChange = (props) => {
             <Text size='14px' weight={300} style={spacing('pr-5')}>
               <FormattedMessage id='modals.mobilenumberchange.mobile' defaultMessage='Mobile number: ' />
             </Text>
-            <Field name='mobileNumber' validate={[validMobileNumber, required]} component={PhoneNumberBox} placeholder='+XX XXX XXX...' countryCode={countryCode} />
+            <Field name='mobileNumber' validate={[validMobileNumber, required]} component={PhoneNumberBox} countryCode={countryCode} />
           </MobileNumber>
         </ModalBody>
         <ModalFooter align='spaced'>