Business problem

Currently, when a support operator searches for customers by phone number, he is required to add the international country country code every time. For example, it is necessary to add +34 when searching for Spanish users:

We received a request from Iberia to automatically fill in country code so the operators can avoid this hassle. However, a couple of challenges appear with this solution, namely:

• Orders made using a phone number outside its origin country

• Unlike WL where we have instances for each market, the admin app is deployed per AWS region, which makes the same instance serve more than one country

• The existing search bar not only searches by customers but also stores and orders, making the addition of a country code mask no possible

Proposed solution

This can be solved by adding a drop-down field where the operator can choose what kind search they want to make:

• Selecting search by phone option:

• Selecting universal search:

The international phone mask will only appear when a 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 a Spanish user has their browser configured to use a different language than his native one, we would assume the wrong country, however, I believe it’s safe 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.

Pros and Cons

Pros:

• As long as the browser language is set to the support agent’s native language, they won’t have to select a country or type international code

• If the agent wants to search for an international number, they just have to select the phone number original country

Cons:

• If the support agent uses a different language than its native one, this solution will assume the wrong location

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

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>        
}