diff --git a/packages/mobile/src/invite/JoinCelo.tsx b/packages/mobile/src/invite/JoinCelo.tsx index b762bad3c68..624ba401ba2 100644 --- a/packages/mobile/src/invite/JoinCelo.tsx +++ b/packages/mobile/src/invite/JoinCelo.tsx @@ -173,7 +173,7 @@ export class JoinCelo extends React.Component { setIsValidNumber={this.setIsValidNumber} onInputChange={this.onChangePhoneInput} inputCountryPlaceholder={t('chooseCountry')} - inputPhonePlaceholder={t('phoneNumber')} + initialInputPhonePlaceholder={t('phoneNumber')} callingCode={true} lng={language} defaultCountryCode={ diff --git a/packages/mobile/src/invite/__snapshots__/JoinCelo.test.tsx.snap b/packages/mobile/src/invite/__snapshots__/JoinCelo.test.tsx.snap index c4c39c71ab6..44d13eef0c6 100644 --- a/packages/mobile/src/invite/__snapshots__/JoinCelo.test.tsx.snap +++ b/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={ diff --git a/packages/react-components/components/PhoneNumberInput.tsx b/packages/react-components/components/PhoneNumberInput.tsx index e36498a5078..b5ef6989169 100644 --- a/packages/react-components/components/PhoneNumberInput.tsx +++ b/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 { 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 { 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 { 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} diff --git a/packages/react-components/components/__snapshots__/PhoneNumberInput.test.tsx.snap b/packages/react-components/components/__snapshots__/PhoneNumberInput.test.tsx.snap index 1351d1cb51b..e62d7dee9aa 100644 --- a/packages/react-components/components/__snapshots__/PhoneNumberInput.test.tsx.snap +++ b/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={ diff --git a/packages/utils/src/countries.ts b/packages/utils/src/countries.ts index 20589578639..b6c6390820c 100644 --- a/packages/utils/src/countries.ts +++ b/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, } diff --git a/packages/utils/src/phoneNumbers.test.ts b/packages/utils/src/phoneNumbers.test.ts index d1cab906b96..9922fd40686 100644 --- a/packages/utils/src/phoneNumbers.test.ts +++ b/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') + }) + }) }) diff --git a/packages/utils/src/phoneNumbers.ts b/packages/utils/src/phoneNumbers.ts index c5dcf40c216..b6522d007b7 100644 --- a/packages/utils/src/phoneNumbers.ts +++ b/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, diff --git a/packages/verifier/src/components/NUX/SetupAccountScreen.tsx b/packages/verifier/src/components/NUX/SetupAccountScreen.tsx index 24d263e1ae2..4511a936d1b 100644 --- a/packages/verifier/src/components/NUX/SetupAccountScreen.tsx +++ b/packages/verifier/src/components/NUX/SetupAccountScreen.tsx @@ -215,7 +215,7 @@ class SetupAccountScreen extends React.Component { onEndEditingPhoneNumber={this.onChangePhoneEndEditing} onEndEditingCountryCode={this.onSetCountryCodeEndEditing} inputCountryPlaceholder={t('country')} - inputPhonePlaceholder={t('phoneNumber')} + initialInputPhonePlaceholder={t('phoneNumber')} /> diff --git a/packages/verifier/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap b/packages/verifier/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap index 5f4cee06335..dec3be34c52 100644 --- a/packages/verifier/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap +++ b/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={