CHANGE | different masks for basic countries of users (#30)

Номера країн (маска)

Reviewed-on: #30
Co-authored-by: Yevhen Romanenko <yevhen.romanenko.jetup@gmail.com>
Co-committed-by: Yevhen Romanenko <yevhen.romanenko.jetup@gmail.com>

src/modules/root/smart-components/select-country-phone.smart-component.tsx

@@ -154,7 +154,7 @@ const createStyles = (theme: PartialTheme) =>
 			color: theme.$textPrimary,
 		},
 		flagWrapper: {
-			width: 90,
+			width: 100,
 			flexDirection: 'row',
 			alignItems: 'center',
 		},

src/shared/components/forms/form-phone.component.tsx

@@ -15,6 +15,8 @@ import { IconComponent } from '../elements'
 import { appEvents } from '@/shared/events'
 import CountryFlag from 'react-native-country-flag'
 import { SelectCountryPhone } from '@/modules/root/smart-components'
+import { countryMaskConfig } from '@/shared/configs'
+import _ from 'lodash'
 
 interface IProps {
 	label?: string
@@ -62,6 +64,7 @@ export const FormPhone = (props: IProps) => {
 			onSelect: params => setInputCode(params),
 			currentIso: inputCode.iso,
 		})
+		props.onChange(null)
 	}
 
 	return (
@@ -92,8 +95,12 @@ export const FormPhone = (props: IProps) => {
 						disabled={props.disabled}
 						inputProps={{
 							placeholder: `+${inputCode.code} 68 111 22 33`,
-							maxLength: 19,
+							maxLength: _.defaultTo(
+								countryMaskConfig[inputCode.iso]?.mask.length,
+								19,
+							),
 						}}
+						selectedCountry={inputCode.iso}
 					/>
 				</View>
 				<Text style={styles.error}>{props.error}</Text>

src/shared/components/plugins/masked-input.component.tsx

@@ -1,5 +1,6 @@
-import { TextInputMask } from 'react-native-masked-text'
 import React from 'react'
+import { TextInputMask } from 'react-native-masked-text'
+import { countryMaskConfig } from '@/shared/configs'
 
 // Docs
 // https://github.com/benhurott/react-native-masked-text
@@ -22,6 +23,7 @@ interface IProps {
 	inputProps?: any
 	disabled?: boolean
 	defaultValue?: string
+	selectedCountry?: string
 }
 
 export const MaskedInput = (props: IProps) => {
@@ -30,7 +32,9 @@ export const MaskedInput = (props: IProps) => {
 			return {
 				maskType: 'BRL',
 				withDDD: true,
-				dddMask: '99 (999) 999 99 99',
+				dddMask:
+					countryMaskConfig[props.selectedCountry]?.mask ||
+					'+99 (999) 999 99 99',
 			}
 		return {}
 	}

src/shared/configs/country-mask.config.ts

@@ -0,0 +1,782 @@
+export interface CountryMask {
+	mask: string
+}
+
+export interface CountryMaskConfig {
+	[key: string]: CountryMask
+}
+
+export const countryMaskConfig: CountryMaskConfig = {
+	// Andorra
+	AD: {
+		mask: '+999 999 999',
+	},
+	// United Arab Emirates
+	AE: {
+		mask: '+999 999 9999',
+	},
+	// Afghanistan
+	AF: {
+		mask: '+99 (99) 999 9999',
+	},
+	// Albania
+	AL: {
+		mask: '+99 999 999 999',
+	},
+	// Armenia
+	AM: {
+		mask: '+999 (99) 999999',
+	},
+	// Angola
+	AO: {
+		mask: '+999 (99) 999 9999',
+	},
+	// Argentina
+	AR: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Austria
+	AT: {
+		mask: '+999 999 999999',
+	},
+	// Australia
+	AU: {
+		mask: '+99 9999 9999',
+	},
+	// Azerbaijan
+	AZ: {
+		mask: '+999 (99) 999 9999',
+	},
+	// Bosnia and Herzegovina
+	BA: {
+		mask: '+999 (99) 999-999',
+	},
+	// Barbados
+	BB: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Bangladesh
+	BD: {
+		mask: '+999 (99) 9999-9999',
+	},
+	// Belgium
+	BE: {
+		mask: '+99 999 9999999',
+	},
+	// Burkina Faso
+	BF: {
+		mask: '+999 99 99 99 99',
+	},
+	// Bulgaria
+	BG: {
+		mask: '+999 999 999999',
+	},
+	// Bahrain
+	BH: {
+		mask: '+9999 9999 9999',
+	},
+	// Burundi
+	BI: {
+		mask: '+9999 9999 9999',
+	},
+	// Benin
+	BJ: {
+		mask: '+999 99 99 99 99',
+	},
+	// Brunei
+	BN: {
+		mask: '+999 9999 9999',
+	},
+	// Bolivia
+	BO: {
+		mask: '+9999 9999 9999',
+	},
+	// Brazil
+	BR: {
+		mask: '+99 (99) 9999-9999',
+	},
+	// Bahamas
+	BS: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Bhutan
+	BT: {
+		mask: '+999 99 999 999',
+	},
+	// Botswana
+	BW: {
+		mask: '+999 99 999 999',
+	},
+	// Belarus
+	BY: {
+		mask: '+999 (99) 999-99-99',
+	},
+	// Belize
+	BZ: {
+		mask: '+999 999-9999',
+	},
+	// Canada
+	CA: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Congo (Democratic Republic)
+	CD: {
+		mask: '+9999 999 999 999',
+	},
+	// Central African Republic
+	CF: {
+		mask: '+999 99 99 99 99',
+	},
+	// Congo (Republic)
+	CG: {
+		mask: '+999 99 999 9999',
+	},
+	// Switzerland
+	CH: {
+		mask: '+999 999 999 999',
+	},
+	// Chile
+	CL: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Cameroon
+	CM: {
+		mask: '+999 9999 99 99',
+	},
+	// China
+	CN: {
+		mask: '+99 9999 9999 9999',
+	},
+	// Colombia
+	CO: {
+		mask: '+99 (99) 9999-9999',
+	},
+	// Costa Rica
+	CR: {
+		mask: '+999 9999 9999',
+	},
+	// Cuba
+	CU: {
+		mask: '+99 99 999 999',
+	},
+	// Cape Verde
+	CV: {
+		mask: '+999 999 99 99',
+	},
+	// Cyprus
+	CY: {
+		mask: '+999 99 999 999',
+	},
+	// Czech Republic
+	CZ: {
+		mask: '+999 (999) 9999 99',
+	},
+	// Germany
+	DE: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Djibouti
+	DJ: {
+		mask: '+999 99 99 99 99',
+	},
+	// Denmark
+	DK: {
+		mask: '+99 99 99 99 99',
+	},
+	// Dominica
+	DM: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Dominican Republic
+	DO: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Algeria
+	DZ: {
+		mask: '+999 (99) 999 99 99',
+	},
+	// Ecuador
+	EC: {
+		mask: '+999 (99) 999 9999',
+	},
+	// Estonia
+	EE: {
+		mask: '+999 9999 9999',
+	},
+	// Egypt
+	EG: {
+		mask: '+99 9999 9999 99',
+	},
+	// Eritrea
+	ER: {
+		mask: '+999 99 999 999',
+	},
+	// Spain
+	ES: {
+		mask: '+999 999 999 999',
+	},
+	// Ethiopia
+	ET: {
+		mask: '+999 999 999 999',
+	},
+	// Finland
+	FI: {
+		mask: '+999 999 999999',
+	},
+	// Fiji
+	FJ: {
+		mask: '+9999 999 9999',
+	},
+	// Micronesia
+	FM: {
+		mask: '+999 999 9999',
+	},
+	// France
+	FR: {
+		mask: '+99 999 99 99 99',
+	},
+	// Gabon
+	GA: {
+		mask: '+999 99 99 99 99',
+	},
+	// United Kingdom
+	GB: {
+		mask: '+999 9999 999 999',
+	},
+	// Grenada
+	GD: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Georgia
+	GE: {
+		mask: '+999 999 999 999',
+	},
+	// Ghana
+	GH: {
+		mask: '+999 999 999 999',
+	},
+	// Gambia
+	GM: {
+		mask: '+999 999 9999',
+	},
+	// Guinea
+	GN: {
+		mask: '+999 999 999 999',
+	},
+	// Equatorial Guinea
+	GQ: {
+		mask: '+999 999 999 999',
+	},
+	// Greece
+	GR: {
+		mask: '+99 999 9999 999',
+	},
+	// Guatemala
+	GT: {
+		mask: '+9999 9999 9999',
+	},
+	// Guinea-Bissau
+	GW: {
+		mask: '+999 999 999 999',
+	},
+	// Guyana
+	GY: {
+		mask: '+999 999 9999',
+	},
+	// Honduras
+	HN: {
+		mask: '+9999 9999 9999',
+	},
+	// Croatia
+	HR: {
+		mask: '+999 99 9999 999',
+	},
+	// Haiti
+	HT: {
+		mask: '+9999 9999 9999',
+	},
+	// Hungary
+	HU: {
+		mask: '+99 99 999 9999',
+	},
+	// Indonesia
+	ID: {
+		mask: '+9999 9999 9999',
+	},
+	// Ireland
+	IE: {
+		mask: '+999 99 999 9999',
+	},
+	// Israel
+	IL: {
+		mask: '+999 999-999-9999',
+	},
+	// India
+	IN: {
+		mask: '+99 99999 99999',
+	},
+	// Iraq
+	IQ: {
+		mask: '+9999 999 999 9999',
+	},
+	// Iran
+	IR: {
+		mask: '+99 (999) 999 9999',
+	},
+	// Iceland
+	IS: {
+		mask: '+999 999 9999',
+	},
+	// Italy
+	IT: {
+		mask: '+99 999 999 9999',
+	},
+	// Jamaica
+	JM: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Jordan
+	JO: {
+		mask: '+9999 9999 9999',
+	},
+	// Japan
+	JP: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Kenya
+	KE: {
+		mask: '+999 999 999 999',
+	},
+	// Kyrgyzstan
+	KG: {
+		mask: '+9999 9999 9999',
+	},
+	// Cambodia
+	KH: {
+		mask: '+999 99 999 999',
+	},
+	// Kiribati
+	KI: {
+		mask: '+9999 9999 9999',
+	},
+	// Comoros
+	KM: {
+		mask: '+999 9999 99 99',
+	},
+	// Saint Kitts and Nevis
+	KN: {
+		mask: '+9 (999) 999-9999',
+	},
+	// North Korea
+	KP: {
+		mask: '+999 999 9999 9999',
+	},
+	// South Korea
+	KR: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Kuwait
+	KW: {
+		mask: '+9999 9999 9999',
+	},
+	// Kazakhstan
+	KZ: {
+		mask: '+9 (999) 999-99-99',
+	},
+	// Laos
+	LA: {
+		mask: '+999 99 99 999 999',
+	},
+	// Lebanon
+	LB: {
+		mask: '+999 999 999 999',
+	},
+	// Saint Lucia
+	LC: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Liechtenstein
+	LI: {
+		mask: '+999 999 9999',
+	},
+	// Sri Lanka
+	LK: {
+		mask: '+999 99 999 9999',
+	},
+	// Liberia
+	LR: {
+		mask: '+9999 9999 9999',
+	},
+	// Lesotho
+	LS: {
+		mask: '+999 9999 9999',
+	},
+	// Lithuania
+	LT: {
+		mask: '+999 999 99999',
+	},
+	// Luxembourg
+	LU: {
+		mask: '+999 9999 9999',
+	},
+	// Latvia
+	LV: {
+		mask: '+999 99 999 999',
+	},
+	// Libya
+	LY: {
+		mask: '+999 99 999 9999',
+	},
+	// Morocco
+	MA: {
+		mask: '+999 99 99 99 99',
+	},
+	// Monaco
+	MC: {
+		mask: '+999 99 99 99 99',
+	},
+	// Moldova
+	MD: {
+		mask: '+999 9999 9999',
+	},
+	// Montenegro
+	ME: {
+		mask: '+999 99 999 999',
+	},
+	// Madagascar
+	MG: {
+		mask: '+999 999 99 999 99',
+	},
+	// Marshall Islands
+	MH: {
+		mask: '+999 999-9999',
+	},
+	// North Macedonia
+	MK: {
+		mask: '+999 99 999 999',
+	},
+	// Mali
+	ML: {
+		mask: '+999 99 99 99 99',
+	},
+	// Myanmar
+	MM: {
+		mask: '+999 99 999 9999',
+	},
+	// Mongolia
+	MN: {
+		mask: '+9999 9999 9999',
+	},
+	// Mauritania
+	MR: {
+		mask: '+999 99 99 99 99',
+	},
+	// Malta
+	MT: {
+		mask: '+999 9999 9999',
+	},
+	// Mauritius
+	MU: {
+		mask: '+999 9999 9999',
+	},
+	// Maldives
+	MV: {
+		mask: '+999 999 9999',
+	},
+	// Malawi
+	MW: {
+		mask: '+999 9999 99 99 99',
+	},
+	// Mexico
+	MX: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Malaysia
+	MY: {
+		mask: '+999 99-9999 9999',
+	},
+	// Mozambique
+	MZ: {
+		mask: '+999 99 999 9999',
+	},
+	// Namibia
+	NA: {
+		mask: '+999 999 999 999',
+	},
+	// Niger
+	NE: {
+		mask: '+999 99 99 99 99',
+	},
+	// Nigeria
+	NG: {
+		mask: '+999 999 999 9999',
+	},
+	// Nicaragua
+	NI: {
+		mask: '+9999 9999 9999',
+	},
+	// Netherlands
+	NL: {
+		mask: '+99 99 999 9999',
+	},
+	// Norway
+	NO: {
+		mask: '+99 999 99 999',
+	},
+	// Nepal
+	NP: {
+		mask: '+999 999 999 9999',
+	},
+	// Nauru
+	NR: {
+		mask: '+999 999 9999',
+	},
+	// New Zealand
+	NZ: {
+		mask: '+99-999 9999 9999',
+	},
+	// Oman
+	OM: {
+		mask: '+9999 9999 9999',
+	},
+	// Panama
+	PA: {
+		mask: '+9999 9999 9999',
+	},
+	// Peru
+	PE: {
+		mask: '+99 (99) 9999 9999',
+	},
+	// Papua New Guinea
+	PG: {
+		mask: '+999 9999 9999',
+	},
+	// Philippines
+	PH: {
+		mask: '+99 (999) 999 9999',
+	},
+	// Pakistan
+	PK: {
+		mask: '+99 9999 999999',
+	},
+	// Poland
+	PL: {
+		mask: '+99 (99) 999 99 99',
+	},
+	// Portugal
+	PT: {
+		mask: '+999 999 999 999',
+	},
+	// Palau
+	PW: {
+		mask: '+999 999 9999',
+	},
+	// Paraguay
+	PY: {
+		mask: '+999 999 999 999',
+	},
+	// Qatar
+	QA: {
+		mask: '+9999 9999 9999',
+	},
+	// Romania
+	RO: {
+		mask: '+99 99 999 9999',
+	},
+	// Serbia
+	RS: {
+		mask: '+999 99 999 9999',
+	},
+	// Russia
+	RU: {
+		mask: '+99 (999) 999-99-99',
+	},
+	// Rwanda
+	RW: {
+		mask: '+999 999 999 999',
+	},
+	// Saudi Arabia
+	SA: {
+		mask: '+9999 9999 9999',
+	},
+	// Solomon Islands
+	SB: {
+		mask: '+999 99999',
+	},
+	// Seychelles
+	SC: {
+		mask: '+999 999 9999',
+	},
+	// Sudan
+	SD: {
+		mask: '+999 999 999 999',
+	},
+	// Sweden
+	SE: {
+		mask: '+99 999 999 999',
+	},
+	// Singapore
+	SG: {
+		mask: '+999 9999 9999',
+	},
+	// Slovenia
+	SI: {
+		mask: '+999 999 999',
+	},
+	// Slovakia
+	SK: {
+		mask: '+999 999 999 999',
+	},
+	// Sierra Leone
+	SL: {
+		mask: '+999 999 999',
+	},
+	// San Marino
+	SM: {
+		mask: '+999 999 999 999',
+	},
+	// Senegal
+	SN: {
+		mask: '+999 9999 9999',
+	},
+	// Somalia
+	SO: {
+		mask: '+999 999 9999',
+	},
+	// Suriname
+	SR: {
+		mask: '+999 999 9999',
+	},
+	// South Sudan
+	SS: {
+		mask: '+999 999 999 999',
+	},
+	// Sao Tome and Principe
+	ST: {
+		mask: '+999 999 9999',
+	},
+	// El Salvador
+	SV: {
+		mask: '+9999 9999 9999',
+	},
+	// Syria
+	SY: {
+		mask: '+999 99 999 9999',
+	},
+	// Eswatini
+	SZ: {
+		mask: '+999 9999 9999',
+	},
+	// Chad
+	TD: {
+		mask: '+999 99 99 99 99',
+	},
+	// Togo
+	TG: {
+		mask: '+999 999 999 999',
+	},
+	// Thailand
+	TH: {
+		mask: '+99 (9) 9999 9999',
+	},
+	// Tajikistan
+	TJ: {
+		mask: '+999 9999 9999',
+	},
+	// Timor-Leste
+	TL: {
+		mask: '+999 9999 9999',
+	},
+	// Turkmenistan
+	TM: {
+		mask: '+9999 9999 9999',
+	},
+	// Tunisia
+	TN: {
+		mask: '+999 99 999 999',
+	},
+	// Tonga
+	TO: {
+		mask: '+999 99 99999',
+	},
+	// Turkey
+	TR: {
+		mask: '+999 999 999 9999',
+	},
+	// Trinidad and Tobago
+	TT: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Tuvalu
+	TV: {
+		mask: '+9999 9999',
+	},
+	// Taiwan
+	TW: {
+		mask: '+999 9999 9999',
+	},
+	// Tanzania
+	TZ: {
+		mask: '+999 999 999 999',
+	},
+	// Ukraine
+	UA: {
+		mask: '+99 (999) 999 99 99',
+	},
+	// Uganda
+	UG: {
+		mask: '+999 9999 99999',
+	},
+	// United States
+	US: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Uruguay
+	UY: {
+		mask: '+999 99 999 9999',
+	},
+	// Uzbekistan
+	UZ: {
+		mask: '+999 99 999 9999',
+	},
+	// Vatican City
+	VA: {
+		mask: '+999 999 999 999',
+	},
+	// Saint Vincent and the Grenadines
+	VC: {
+		mask: '+9 (999) 999-9999',
+	},
+	// Venezuela
+	VE: {
+		mask: '+999 999 999 9999',
+	},
+	// Vietnam
+	VN: {
+		mask: '+999 99 999 9999',
+	},
+	// Vanuatu
+	VU: {
+		mask: '+999 999 9999',
+	},
+	// Samoa
+	WS: {
+		mask: '+999 999 9999',
+	},
+	// Yemen
+	YE: {
+		mask: '+999 999 9999',
+	},
+	// South Africa
+	ZA: {
+		mask: '+999 999 9999',
+	},
+	// Zambia
+	ZM: {
+		mask: '+999 999 9999',
+	},
+	// Zimbabwe
+	ZW: {
+		mask: '+999 999 9999',
+	},
+}

src/shared/configs/index.ts

@@ -1 +1,2 @@
 export * from './mime-types.config'
+export * from './country-mask.config'