Merge branch 'master' into rossy/wa-ver-education

packages/mobile/src/i18n.ts

@@ -1,6 +1,4 @@
 import locales from '@celo/mobile/locales'
-import en_US from '@celo/mobile/locales/en.json'
-import es_LA from '@celo/mobile/locales/es.json'
 import { currencyTranslations } from '@celo/utils/src/currencies'
 // @ts-ignore
 import i18n from 'i18next'
@@ -28,11 +26,9 @@ export enum Namespaces {
 
 const availableResources = {
   'en-US': {
-    common: en_US,
     ...locales.enUS,
   },
   'es-419': {
-    common: es_LA,
     ...locales.es_419,
   },
 }

packages/mobile/src/invite/__snapshots__/JoinCelo.test.tsx.snap

@@ -330,6 +330,7 @@ exports[`JoinCeloScreen renders correctly 1`] = `
                 "width": 60,
               }
             }
+            testID="contryCodeText"
           >
             +1
           </Text>
@@ -839,6 +840,7 @@ exports[`JoinCeloScreen renders with an error 1`] = `
                 "width": 60,
               }
             }
+            testID="contryCodeText"
           >
             +1
           </Text>

packages/react-components/__mocks__/country-data.ts

@@ -3,8 +3,10 @@ import CountryData from 'country-data'
 export default {
   callingCountries: {
     all: [
-      { name: 'USA', countryCallingCodes: ['1'], alpha2: 'US' },
-      { name: 'UK', countryCallingCodes: ['33'], alpha2: 'GB' },
+      { name: 'USA', countryCallingCodes: ['+1'], alpha2: 'US' },
+      { name: 'Canada', countryCallingCodes: ['+1'], alpha2: 'CA' },
+      { name: 'UK', countryCallingCodes: ['+33'], alpha2: 'GB' },
+      { name: 'Germany', countryCallingCodes: ['+49'], alpha2: 'DE' },
     ],
   },
   lookup: CountryData.lookup,

packages/react-components/components/PhoneNumberInput.test.tsx

@@ -1,10 +1,23 @@
 import PhoneNumberInput from '@celo/react-components/components/PhoneNumberInput'
+import { shallow } from 'enzyme'
 import * as React from 'react'
 import { fireEvent, render } from 'react-native-testing-library'
 
+jest.mock('@celo/react-native-sms-retriever', () => {
+  return {
+    requestPhoneNumber: jest.fn(() => '+49030111111'),
+  }
+})
+
+jest.mock('react-native-device-info', () => {
+  return {
+    getBaseOs: jest.fn(() => 'Android'),
+  }
+})
+
 describe('PhoneNumberInput', () => {
   describe('when defaultCountry is falsy', () => {
-    it.skip('renders an AutoComplete and a country can be selected', () => {
+    it('renders an AutoComplete and a country can be selected', () => {
       const mockSetCountryCode = jest.fn()
       const { getByTestId, toJSON } = render(
         <PhoneNumberInput
@@ -25,7 +38,7 @@ describe('PhoneNumberInput', () => {
 })
 
 describe('when defaultCountry is truthy', () => {
-  it.skip('does not render an AutoComplete', () => {
+  it('does not render an AutoComplete', () => {
     const { queryByTestId, toJSON } = render(
       <PhoneNumberInput
         defaultCountry={'Canada'}
@@ -38,4 +51,33 @@ describe('when defaultCountry is truthy', () => {
     const autocomplete = queryByTestId('CountryNameField')
     expect(autocomplete).toBeFalsy()
   })
+
+  describe('Native phone picker (Android)', () => {
+    it('can read phone', async () => {
+      const wrapper = shallow<PhoneNumberInput>(
+        <PhoneNumberInput
+          setE164Number={jest.fn()}
+          setCountryCode={jest.fn()}
+          setIsValidNumber={jest.fn()}
+        />
+      )
+
+      wrapper.instance().setState({})
+      await wrapper.instance().triggerPhoneNumberRequest()
+
+      // expect(wrapper.find(ValidatedTextInput).props().value).toEqual('030 111111')
+
+      expect(
+        wrapper.findWhere((node) => node.prop('testID') === 'PhoneNumberField').props().value
+      ).toBe('030 111111')
+      expect(wrapper.instance().state.countryCallingCode).toEqual('+49')
+
+      expect(
+        wrapper.findWhere((node) => node.prop('testID') === 'contryCodeText').props().children
+      ).toBe('+49')
+      expect(
+        wrapper.findWhere((node) => node.prop('testID') === 'CountryNameField').props().defaultValue
+      ).toBe('Germany')
+    })
+  })
 })

packages/react-components/components/PhoneNumberInput.tsx

@@ -3,12 +3,16 @@ import ValidatedTextInput, {
   PhoneValidatorProps,
 } from '@celo/react-components/components/ValidatedTextInput'
 import colors from '@celo/react-components/styles/colors'
+import SmsRetriever from '@celo/react-native-sms-retriever'
 import { Countries } from '@celo/utils/src/countries'
 import { ValidatorKind } from '@celo/utils/src/inputValidation'
 import { getRegionCodeFromCountryCode, parsePhoneNumber } from '@celo/utils/src/phoneNumbers'
 import * as React from 'react'
 import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import Autocomplete from 'react-native-autocomplete-input'
+import DeviceInfo from 'react-native-device-info'
+
+const TAG = 'PhoneNumberInput'
 
 interface Props {
   style?: any
@@ -35,6 +39,7 @@ interface State {
   regionCode: string
   phoneNumber: string
   countries: Countries
+  country?: string
 }
 
 export default class PhoneNumberInput extends React.Component<Props, State> {
@@ -65,6 +70,51 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
     }
   }
 
+  async triggerPhoneNumberRequestAndroid() {
+    try {
+      const phone = await SmsRetriever.requestPhoneNumber()
+      const phoneNumber = parsePhoneNumber(phone, '')
+
+      if (!phoneNumber) {
+        return
+      }
+
+      this.setState({ phoneNumber: phoneNumber.displayNumber.toString() })
+
+      if (phoneNumber.countryCode) {
+        // TODO known issue, the country code is not enough to
+        // get a country, e.g. +1 could be USA or Canada
+        const displayName = this.state.countries.getCountryByPhoneCountryCode(
+          '+' + phoneNumber.countryCode.toString()
+        ).displayName
+
+        this.onChangeCountryQuery(displayName)
+      }
+    } catch (error) {
+      console.error(`${TAG}/triggerPhoneNumberRequestAndroid`, 'Could not request phone', error)
+    }
+  }
+
+  async triggerPhoneNumberRequest() {
+    try {
+      const baseOS = await DeviceInfo.getBaseOs()
+      if (baseOS === 'Android') {
+        await this.triggerPhoneNumberRequestAndroid()
+      } else {
+        console.info(`${TAG}/triggerPhoneNumberRequest`, 'Not implemented in this platform')
+      }
+    } catch (error) {
+      console.error(`${TAG}/triggerPhoneNumberRequest`, 'Could not request phone', error)
+    }
+  }
+
+  onCountryFocus = async () => {
+    if (this.props.onInputFocus) {
+      await this.props.onInputFocus()
+    }
+    await this.triggerPhoneNumberRequest()
+  }
+
   onChangeCountryQuery = (countryQuery: string) => {
     if (this.props.onInputChange) {
       this.props.onInputChange()
@@ -156,7 +206,7 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
       {...props}
       value={this.state.countryQuery}
       underlineColorAndroid="transparent"
-      onFocus={this.props.onInputFocus}
+      onFocus={this.onCountryFocus}
       placeholderTextColor={colors.inactive}
     />
   )
@@ -197,7 +247,9 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
           </View>
         )}
         <View style={[style.phoneNumberContainer, style.borderedBox]}>
-          <Text style={style.phoneCountryCode}>{countryCallingCode}</Text>
+          <Text style={style.phoneCountryCode} testID={'contryCodeText'}>
+            {countryCallingCode}
+          </Text>
           <View style={style.line} />
           <ValidatedTextInput<PhoneValidatorProps>
             style={[style.inputBox, style.phoneNumberInput]}