fix(PhoneNumberBox): sfoxExchangeData, and SecurityCenter pass countr…

…yCode
blockchain · Jun 8, 2018 · e1d91ce · e1d91ce
1 parent a6d15e2
commit e1d91ce
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 20 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/PhoneNumberBox/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/PhoneNumberBox/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { prop, toLower } from 'ramda'
+import { propTypes } from 'prop-types'
 
 import IntlTelInput from 'react-intl-tel-input'
 import 'react-intl-tel-input/dist/libphonenumber.js'
@@ -45,4 +46,8 @@ const PhoneNumberBox = (field) => {
   )
 }
 
+PhoneNumberBox.PropTypes = {
+  countryCode: propTypes.required
+}
+
 export default PhoneNumberBox
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/index.js
@@ -15,18 +15,18 @@ class MobileNumberChangeContainer extends React.PureComponent {
 
   onSubmit (e) {
     e.preventDefault()
-    const { mobileNumber } = this.props
-    this.props.settingsActions.updateMobile(mobileNumber)
+    const { smsNumberNew } = this.props
+    this.props.settingsActions.updateMobile(smsNumberNew)
     this.props.modalActions.closeModal()
-    this.props.modalActions.showModal('MobileNumberVerify', { mobileNumber })
+    this.props.modalActions.showModal('MobileNumberVerify', { smsNumberNew })
   }
 
   render () {
-    const { countryCode, mobileNumber } = this.props
+    const { countryCode, smsNumber } = this.props
     return <MobileNumberChange
       {...this.props}
+      smsNumber={smsNumber}
       countryCode={countryCode}
-      mobileNumber={mobileNumber}
       onSubmit={this.onSubmit} />
   }
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/selectors.js b/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/selectors.js
@@ -14,7 +14,8 @@ export const getData = (state) => createDeepEqualSelector(
     selectors.core.settings.getCountryCode
   ],
   (currentNumber, defaultCode) => ({
-    mobileNumber: formValueSelector('mobileNumberChange')(state, 'mobileNumber'),
-    countryCode: lift(getCountryCode)(defaultCode, currentNumber)
+    smsNumberNew: formValueSelector('mobileNumberChange')(state, 'mobileNumber'),
+    countryCode: lift(getCountryCode)(defaultCode, currentNumber),
+    smsNumber: currentNumber.getOrElse('')
   })
 )(state)
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/template.js
@@ -18,7 +18,7 @@ const MobileNumber = styled.div`
 `
 
 const MobileNumberChange = (props) => {
-  const { position, total, close, closeAll, submitting, invalid, pristine, countryCode, ...rest } = props
+  const { position, total, close, closeAll, submitting, invalid, pristine, countryCode, smsNumber, ...rest } = props
   const { onSubmit } = rest
 
   return (
@@ -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} countryCode={countryCode} />
+            <Field name='mobileNumber' validate={[validMobileNumber, required]} component={PhoneNumberBox} countryCode={countryCode} defaultValue={smsNumber} />
           </MobileNumber>
         </ModalBody>
         <ModalFooter align='spaced'>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Create/VerifyMobile.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Create/VerifyMobile.js
@@ -86,7 +86,7 @@ class VerifyMobile extends Component {
               <Text size='14px' weight={400} style={{'marginBottom': '5px'}}>
                 <FormattedMessage id='sfoxexchangedata.create.mobile.entermobilenumber' defaultMessage='Enter your digits here:' />
               </Text>
-              <Field name='mobileNumber' defaultValue={this.props.smsNumber} component={PhoneNumberBox} validate={[required, validMobileNumber]} normalize={normalizePhone} />
+              <Field name='mobileNumber' countryCode={this.props.countryCode} defaultValue={this.props.smsNumber} component={PhoneNumberBox} validate={[required, validMobileNumber]} normalize={normalizePhone} />
               {
                 ui.create === 'change_mobile' && <Button nature='primary' type='submit' disabled={!mobileNumber} style={spacing('mt-15')}>
                   <FormattedMessage id='sfoxexchangedata.create.mobile.sendmycode' defaultMessage='Send My Code' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Create/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Create/index.js
@@ -6,6 +6,7 @@ import Create from './template'
 import { actions, selectors } from 'data'
 import ui from 'redux-ui'
 import { path } from 'ramda'
+import { getData } from './selectors'
 
 class CreateContainer extends Component {
   constructor (props) {
@@ -23,6 +24,7 @@ class CreateContainer extends Component {
 
   render () {
     return <Create
+      countryCode={this.props.data.countryCode}
       editEmail={() => { this.props.updateUI({ create: 'change_email' }); this.setState({ editVerifiedEmail: true }) }}
       editMobile={() => { this.props.updateUI({ create: 'change_mobile' }); this.setState({ editVerifiedMobile: true }) }}
       editVerifiedEmail={this.state.editVerifiedEmail}
@@ -40,6 +42,7 @@ CreateContainer.propTypes = {
 }
 
 const mapStateToProps = (state) => ({
+  data: getData(state),
   smsVerified: selectors.core.settings.getSmsVerified(state).data,
   emailVerified: selectors.core.settings.getEmailVerified(state).data,
   emailVerifiedError: path(['securityCenter', 'emailVerifiedError'], state),

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Create/selectors.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Create/selectors.js
@@ -0,0 +1,18 @@
+import PhoneNumber from 'awesome-phonenumber'
+import { lift } from 'ramda'
+
+import { selectors } from 'data'
+import { createDeepEqualSelector } from 'services/ReselectHelper'
+
+const getCountryCode = (defaultCode, currentNumber) =>
+  currentNumber ? PhoneNumber(currentNumber).getRegionCode() : defaultCode
+
+export const getData = (state) => createDeepEqualSelector(
+  [
+    selectors.core.settings.getSmsNumber,
+    selectors.core.settings.getCountryCode
+  ],
+  (currentNumber, defaultCode) => ({
+    countryCode: lift(getCountryCode)(defaultCode, currentNumber)
+  })
+)(state)
diff --git a/...ckchain-wallet-v4-frontend/src/scenes/SecurityCenter/TwoStepVerification/SMS/selectors.js b/...ckchain-wallet-v4-frontend/src/scenes/SecurityCenter/TwoStepVerification/SMS/selectors.js
@@ -1,12 +1,29 @@
-import { selectors } from 'data'
+import PhoneNumber from 'awesome-phonenumber'
 import { lift } from 'ramda'
 
-export const getData = state => {
-  const authType = selectors.core.settings.getAuthType(state)
-  const smsNumber = selectors.core.settings.getSmsNumber(state)
-  const smsVerified = selectors.core.settings.getSmsVerified(state)
+import { selectors } from 'data'
+import { createDeepEqualSelector } from 'services/ReselectHelper'
 
-  const f = (a, n, v) => ({ authType: parseInt(a), smsNumber: n, smsVerified: v })
+const getCountryCode = (defaultCode, currentNumber) =>
+  currentNumber ? PhoneNumber(currentNumber).getRegionCode() : defaultCode
 
-  return lift(f)(authType, smsNumber, smsVerified)
-}
+export const getData = (state) => createDeepEqualSelector(
+  [
+    selectors.core.settings.getAuthType,
+    selectors.core.settings.getSmsNumber,
+    selectors.core.settings.getSmsVerified,
+    selectors.core.settings.getSmsNumber,
+    selectors.core.settings.getCountryCode
+  ],
+  (authTypeR, smsNumberR, smsVerifiedR, currentNumber, defaultCode) => {
+    const transform = (authType, smsNumber, smsVerified) => {
+      return {
+        countryCode: lift(getCountryCode)(defaultCode, currentNumber),
+        authType: parseInt(authType),
+        smsVerified,
+        smsNumber
+      }
+    }
+    return lift(transform)(authTypeR, smsNumberR, smsVerifiedR)
+  }
+)(state)
diff --git a/...-wallet-v4-frontend/src/scenes/SecurityCenter/TwoStepVerification/SMS/template.success.js b/...-wallet-v4-frontend/src/scenes/SecurityCenter/TwoStepVerification/SMS/template.success.js
@@ -41,7 +41,7 @@ const QRInputWrapper = styled.div`
 
 const SmsAuth = props => {
   const { data, ui, onSubmit, changeMobileNumber, invalid, code } = props
-  const { smsVerified, smsNumber } = data
+  const { smsVerified, smsNumber, countryCode } = data
 
   return (
     <Form onSubmit={onSubmit}>
@@ -60,7 +60,7 @@ const SmsAuth = props => {
                   <FormattedMessage id='scenes.security.twostepverification.sms.entermobile' defaultMessage='Enter your mobile number and click Get Code. A verification code will be sent.' />
                 </Text>
                 <QRInputWrapper>
-                  <Field name='mobileNumber' component={PhoneNumberBox} validate={[required]} placeholder='212-555-5555' />
+                  <Field name='mobileNumber' component={PhoneNumberBox} validate={[required]} countryCode={countryCode} defaultValue={smsNumber} placeholder='212-555-5555' />
                   <Button type='submit' nature='primary' disabled={invalid}>Get Verification Code</Button>
                 </QRInputWrapper>
               </Fragment>