Phone number input auto selects Netherlands country code when Belgium should be selected

SDeVuystHogent commented 3 months ago

Issue Summary

When the language is set to Nederlands (Dutch), the phone number input displays the country code for the Netherlands (+31), even when the user is in Belgium (+32).

Steps to Reproduce

Set Language to Dutch
Add phone input to activity

Actual Results

Country code gets set to +31 (Netherlands code)

Expected Results

Country code gets set to +32 (Belgium code)

Technical details

I assume this happens because the language is set to dutch, which is spoken in the Netherlands. However, this is also spoken in Belgium, so assuming the country code is the same as the language set is incorrect behiavor.

Evidence

Tested with VPN in Belgium and the Netherlands. Also tested without VPN, with the same results.

dosubot[bot] commented 3 months ago

To address the issue where the phone number input defaults to the Netherlands' country code (+31) instead of Belgium's (+32) when the application language is set to Dutch, you can modify the useDefaultCountry hook within the PhoneInput component. This modification involves checking the application's language setting and adjusting the default country code based on this setting. Here's a concise way to implement this solution:

const useDefaultCountry = () => {
  const [defaultCountry, setDefaultCountry] = useState("us");
  const query = trpc.viewer.public.countryCode.useQuery(undefined, {
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: false,
  });

  useEffect(() => {
    const data = query.data;
    const appLanguage = navigator.language.toLowerCase();

    if (appLanguage.includes("nl")) {
      setDefaultCountry("be"); // Set to Belgium's country code for Dutch language
    } else if (data?.countryCode && isSupportedCountry(data.countryCode)) {
      setDefaultCountry(data.countryCode.toLowerCase());
    } else {
      setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
    }
  }, [query.data]);

  return defaultCountry;
};

This code snippet ensures that when the application's language is set to Dutch, the default country code for the phone input is set to Belgium's (+32). It checks the application's language and sets the default country code accordingly, providing a more accurate default selection for users in Belgium.

This approach assumes that the application's language setting can influence the default selection of the country code in the phone input field. Users can still manually select their country code through the PhoneInput component, which includes an enableSearch feature for easier selection.

#### Details

**Sources** - [packages/ui/form/PhoneInput.tsx](https://github.com/calcom/cal.com/blob/main/packages/ui/form/PhoneInput.tsx) - [apps/web/lib/app-providers.tsx](https://github.com/calcom/cal.com/blob/main/apps/web/lib/app-providers.tsx) - [packages/lib/getLocaleFromRequest.ts](https://github.com/calcom/cal.com/blob/main/packages/lib/getLocaleFromRequest.ts) - [apps/api/v1/next-i18next.config.js](https://github.com/calcom/cal.com/blob/main/apps/api/v1/next-i18next.config.js) - [packages/features/auth/lib/getLocale.ts](https://github.com/calcom/cal.com/blob/main/packages/features/auth/lib/getLocale.ts) - [packages/config/next-i18next.config.js](https://github.com/calcom/cal.com/blob/main/packages/config/next-i18next.config.js) - [packages/trpc/server/routers/loggedInViewer/locationOptions.handler.ts](https://github.com/calcom/cal.com/blob/main/packages/trpc/server/routers/loggedInViewer/locationOptions.handler.ts)
**About Dosu** This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

BKM14 commented 3 months ago

Hello, I am new to this project. I tried digging deeper into what was causing the issue. I was able to reproduce the issue successfully. I think the problem has nothing to do with the language the app is set with. I changed the language setting in my browser at : chrome://settings/languages and moved Dutch to the top. I was able to reproduce this issue even when it was set to English.

In order to determine the default country, a useDefaultCountry function is run. This function uses vercel's(The platform the code is deployed on) function to determine where the request is coming from. In case it doesn't figure it out, the language setting from the browser is chosen as default.

What seems to be the problem is that, even when I use a VPN set to Belgium and send a request to the server, vercel thinks that I'm in Netherlands and hence, Netherlands is chosen as the default. A peek at the networks tab in DevTools seems to confirm the issue. The response header we receive back contains Amsterdam as the timezone. Hence, it is chosen as default.

I also tried manually over-riding the defaultCountry value to Belgium, that seemed to solve the issue. That is why I'm assuming that vercel isn't able to correctly identify the country from which the request is originating from

If my assumption is wrong, I request someone to point me in the right direction. Thank You! Sorry for the tag @hariombalhara, but kindly help me.

calcom / cal.com