...
The international phone mask will only appear when search by phone is selected. One question that remains is which code will appear as default since multiple markets are served by the same instance? One option is to select the biggest market in the region, but in Iberia’s case operators from Portugal would still have to type the country code every time.
To avoid this issue it’s possible to infer a possible location from the navigator language. Of course if an Spanish user has their browser configured to use a different language then his native one, we would assume the wrong country, however, I believe it’s same to assume this won’t happen in the majority of the cases and they can simply change the country on the search bar. Making use of a library such as reach-phone-number-input can make things even clearer.
POC
For this POC I included react-phone-number-input in admin-app project. The code example can be found in the next section.
When universal search is selected:
...
After selecting search by phone:
...
Formatted phone:
...
Code
src/components/layout/index.tsx
| Code Block |
|---|
const SearchByPhone = () => {
const [value, setValue] = useState<string | undefined>();
const country = navigator.language.split('-')[1];
console.log(value);
return (
<PhoneInput
defaultCountry={country as CountryCode}
placeholder="Enter phone number"
value={value}
onChange={setValue}
/>
);
};
const Layout: FC = ({ children }) => {
const [searchOption, SetSearchOption] = useState<string>('Universal Search');
const DropDown = () => {
const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
SetSearchOption(event.target.value);
};
return (
<div>
<select id="dropdown" value={searchOption} onChange={handleSelectChange}>
<option value="Universal Search">Search for</option>
<option value="Phone Number">Phone Number</option>
</select>
</div>
);
};
...
return (
<div className={classes.root}>
<AuthRequired>
<>
...
<Toolbar>
...
<DropDown />
{searchOption === 'Phone Number' ? <SearchByPhone /> : <UniversalSearch />}
</Toolbar>
</AppBar>
</>
</AuthRequired>
</div>
} |