Business problem

Currently, when a support operator searches a customer 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 the 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, 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 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

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