Use correct phone placeholder depending on the country on joining Celo view

packages/mobile/src/invite/JoinCelo.tsx

@@ -173,7 +173,7 @@ export class JoinCelo extends React.Component<Props, State> {
             setIsValidNumber={this.setIsValidNumber}
             onInputChange={this.onChangePhoneInput}
             inputCountryPlaceholder={t('chooseCountry')}
-            inputPhonePlaceholder={t('phoneNumber')}
+            initialInputPhonePlaceholder={t('phoneNumber')}
             callingCode={true}
             lng={language}
             defaultCountryCode={

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

@@ -371,7 +371,7 @@ exports[`JoinCeloScreen renders correctly 1`] = `
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
-              placeholder="phoneNumber"
+              placeholder="(000) 000-0000"
               placeholderTextColor="#D1D5D8"
               rejectResponderTermination={true}
               style={
@@ -881,7 +881,7 @@ exports[`JoinCeloScreen renders with an error 1`] = `
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
-              placeholder="phoneNumber"
+              placeholder="(000) 000-0000"
               placeholderTextColor="#D1D5D8"
               rejectResponderTermination={true}
               style={

packages/react-components/components/PhoneNumberInput.tsx

@@ -25,7 +25,7 @@ interface Props {
   onEndEditingPhoneNumber?: () => void
   onEndEditingCountryCode?: () => void
   inputCountryPlaceholder?: string
-  inputPhonePlaceholder?: string
+  initialInputPhonePlaceholder?: string
   lng?: string
   callingCode?: boolean
   defaultCountryCode?: string
@@ -38,6 +38,7 @@ interface State {
   regionCode: string
   phoneNumber: string
   countries: Countries
+  inputPhonePlaceholder?: string
   country?: string
 }
 
@@ -49,6 +50,7 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
     phoneNumber: '',
     // country data should be fetched before mounting to prevent a second render
     countries: new Countries(this.props.lng),
+    inputPhonePlaceholder: this.props.initialInputPhonePlaceholder,
   }
 
   componentDidMount() {
@@ -138,6 +140,7 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
           countryQuery,
           countryCallingCode,
           regionCode,
+          inputPhonePlaceholder: country.countryPhonePlaceholder.national,
         },
         // Reparse phone number in case user entered that first
         () => this.onChangePhoneNumber(this.state.phoneNumber)
@@ -266,7 +269,7 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
             onEndEditing={this.props.onEndEditingPhoneNumber}
             value={this.state.phoneNumber}
             underlineColorAndroid="transparent"
-            placeholder={this.props.inputPhonePlaceholder}
+            placeholder={this.state.inputPhonePlaceholder}
             keyboardType="phone-pad"
             testID="PhoneNumberField"
             validator={ValidatorKind.Phone}

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

@@ -364,6 +364,7 @@ exports[`when defaultCountry is truthy does not render an AutoComplete 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder="(000) 000-0000"
         placeholderTextColor="#D1D5D8"
         rejectResponderTermination={true}
         style={

packages/utils/src/countries.ts

@@ -1,3 +1,4 @@
+import { getExampleNumber } from './phoneNumbers'
 const esData = require('@umpirsky/country-list/data/es/country.json')
 import countryData from 'country-data'
 import { notEmpty } from './collections'
@@ -9,6 +10,10 @@ interface CountryNames {
 export interface LocalizedCountry extends countryData.Country {
   displayName: string
   names: CountryNames
+  countryPhonePlaceholder: {
+    national?: string | undefined
+    international?: string | undefined
+  }
 }
 
 const EMPTY_COUNTRY: LocalizedCountry = {
@@ -23,6 +28,7 @@ const EMPTY_COUNTRY: LocalizedCountry = {
   name: '',
   names: {},
   status: '',
+  countryPhonePlaceholder: { national: '', international: '' },
 }
 
 const removeDiacritics = (word: string) =>
@@ -140,6 +146,11 @@ export class Countries {
         const localizedCountry = {
           names,
           displayName: names[this.language],
+          countryPhonePlaceholder: {
+            national: getExampleNumber(country.countryCallingCodes[0]),
+            // Not needed right now
+            // international: getExampleNumber(country.countryCallingCodes[0], true, true),
+          },
           ...country,
         }
 

packages/utils/src/phoneNumbers.test.ts

@@ -2,6 +2,7 @@ import {
   getCountryCode,
   getDisplayPhoneNumber,
   getE164Number,
+  getExampleNumber,
   getRegionCode,
   getRegionCodeFromCountryCode,
   isE164Number,
@@ -259,4 +260,24 @@ describe('Phone number formatting and utilities', () => {
       expect(isE164Number(TEST_PHONE_NUMBERS.VALID_US_4)).toBe(false)
     })
   })
+
+  describe('Example phones', () => {
+    it('gets example by country showing zeros', () => {
+      expect(getExampleNumber(COUNTRY_CODES.AR)).toBe('000 0000-0000')
+      expect(getExampleNumber(COUNTRY_CODES.DE)).toBe('000 000000')
+      expect(getExampleNumber(COUNTRY_CODES.US)).toBe('(000) 000-0000')
+    })
+
+    it('gets example by country', () => {
+      expect(getExampleNumber(COUNTRY_CODES.AR, false)).toBe('011 2345-6789')
+      expect(getExampleNumber(COUNTRY_CODES.DE, false)).toBe('030 123456')
+      expect(getExampleNumber(COUNTRY_CODES.US, false)).toBe('(201) 555-0123')
+    })
+
+    it('gets example by country showing zeros in international way', () => {
+      expect(getExampleNumber(COUNTRY_CODES.AR, true, true)).toBe('+54 00 0000-0000')
+      expect(getExampleNumber(COUNTRY_CODES.DE, true, true)).toBe('+49 00 000000')
+      expect(getExampleNumber(COUNTRY_CODES.US, true, true)).toBe('+1 000-000-0000')
+    })
+  })
 })

packages/utils/src/phoneNumbers.ts

@@ -231,6 +231,34 @@ export function anonymizedPhone(phoneNumber: string) {
   return phoneNumber.slice(0, -4) + 'XXXX'
 }
 
+export function getExampleNumber(
+  regionCode: string,
+  useOnlyZeroes: boolean = true,
+  isInternational: boolean = false
+) {
+  const examplePhone = phoneUtil.getExampleNumber(getRegionCodeFromCountryCode(
+    regionCode
+  ) as string)
+
+  if (!examplePhone) {
+    return
+  }
+
+  const formatedExample = phoneUtil.format(
+    examplePhone,
+    isInternational ? PhoneNumberFormat.INTERNATIONAL : PhoneNumberFormat.NATIONAL
+  )
+
+  if (useOnlyZeroes) {
+    if (isInternational) {
+      return formatedExample.replace(/(^\+[0-9]{1,3} |[0-9])/g, (value, _, i) => (i ? '0' : value))
+    }
+    return formatedExample.replace(/[0-9]/g, '0')
+  }
+
+  return formatedExample
+}
+
 export const PhoneNumberUtils = {
   getPhoneHash,
   getCountryCode,

packages/verifier/src/components/NUX/SetupAccountScreen.tsx

@@ -215,7 +215,7 @@ class SetupAccountScreen extends React.Component<Props, State> {
                 onEndEditingPhoneNumber={this.onChangePhoneEndEditing}
                 onEndEditingCountryCode={this.onSetCountryCodeEndEditing}
                 inputCountryPlaceholder={t('country')}
-                inputPhonePlaceholder={t('phoneNumber')}
+                initialInputPhonePlaceholder={t('phoneNumber')}
               />
             </View>
           </View>

packages/verifier/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap

@@ -120,6 +120,7 @@ exports[`PhoneNumberInput when defaultCountry renders defaults 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder="000 0000-0000"
         placeholderTextColor="#D1D5D8"
         rejectResponderTermination={true}
         style={