fix(Phone Number Box): do not call getOrElse on non remote types

blockchain · Jun 7, 2018 · 25a50de · 25a50de
1 parent 3609d31
commit 25a50de
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 10 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
@@ -35,7 +35,7 @@ const PhoneNumberBox = (field) => {
   const handler = (status, value, countryData, number, id) => {
     field.input.onChange(number)
   }
-  const upperCountryCode = prop('countryCode', field).getOrElse('US')
+  const upperCountryCode = prop('countryCode', field) || 'US'
   const countryCode = upperCountryCode && toLower(upperCountryCode)
 
   return (

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/PhoneNumberBox/index.spec.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/PhoneNumberBox/index.spec.js
@@ -12,7 +12,7 @@ jest.mock('react-intl-tel-input', () => jest.fn())
 
 describe('PhoneNumberBox', () => {
   it('renders correctly', () => {
-    const component = shallow(<PhoneNumberBox countryCode={Remote.Success('US')} />)
+    const component = shallow(<PhoneNumberBox countryCode={'US'} />)
     const tree = toJson(component)
     expect(tree).toMatchSnapshot()
   })

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/MobileNumberChange/template.js
@@ -7,6 +7,7 @@ import { Button, Link, Modal, ModalHeader, ModalBody, ModalFooter, Text } from '
 import { Form, PhoneNumberBox } from 'components/Form'
 import { validMobileNumber, required } from 'services/FormHelper'
 import { spacing } from 'services/StyleService'
+import { path } from 'ramda'
 
 const MobileNumber = styled.div`
   display: flex;
@@ -35,7 +36,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={path(['data'], countryCode)} />
           </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
@@ -62,7 +62,7 @@ class VerifyMobile extends Component {
   }
 
   render () {
-    const { ui, invalid, mobileCode, mobileNumber, mobileVerifiedError } = this.props
+    const { ui, invalid, mobileCode, mobileNumber, mobileVerifiedError, countryCode } = this.props
 
     let smsHelper = () => {
       switch (true) {
@@ -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' defaultValue={this.props.smsNumber} component={PhoneNumberBox} validate={[required, validMobileNumber]} normalize={normalizePhone} countryCode={countryCode} />
               {
                 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' />
@@ -132,7 +132,8 @@ class VerifyMobile extends Component {
 const mapStateToProps = (state) => ({
   mobileNumber: formValueSelector('sfoxCreate')(state, 'mobileNumber'),
   mobileCode: formValueSelector('sfoxCreate')(state, 'mobileCode'),
-  smsNumber: selectors.core.settings.getSmsNumber(state).data
+  smsNumber: selectors.core.settings.getSmsNumber(state).data,
+  countryCode: selectors.core.settings.getCountryCode(state).getOrElse()
 })
 
 const mapDispatchToProps = (dispatch) => ({

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
@@ -5,8 +5,9 @@ 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)
+  const countryCode = selectors.core.settings.getCountryCode(state)
 
-  const f = (a, n, v) => ({ authType: parseInt(a), smsNumber: n, smsVerified: v })
+  const f = (a, n, v, c) => ({ authType: parseInt(a), smsNumber: n, smsVerified: v, countryCode: c })
 
-  return lift(f)(authType, smsNumber, smsVerified)
+  return lift(f)(authType, smsNumber, smsVerified, countryCode)
 }
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]} placeholder='212-555-5555' countryCode={countryCode} />
                   <Button type='submit' nature='primary' disabled={invalid}>Get Verification Code</Button>
                 </QRInputWrapper>
               </Fragment>