feat: display country code from IP (#19788)

* feat: display country code from IP

* chore: remove

* fix: unit test

apps/web/components/dialog/EditLocationDialog.tsx

@@ -14,11 +14,12 @@ import {
   LocationType,
   OrganizerDefaultConferencingAppType,
 } from "@calcom/app-store/locations";
+import PhoneInput from "@calcom/features/components/phone-input";
 import type { LocationOption } from "@calcom/features/form/components/LocationSelect";
 import LocationSelect from "@calcom/features/form/components/LocationSelect";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, Input, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
+import { Button, Icon, Input, Dialog, DialogContent, DialogFooter, Form } from "@calcom/ui";
 
 import { QueryCell } from "../../lib/QueryCell";
 

packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx

@@ -8,9 +8,18 @@ import { FormProvider, useForm } from "react-hook-form";
 import { expect } from "vitest";
 import { vi } from "vitest";
 
+import PhoneInput from "@calcom/features/components/phone-input/PhoneInput";
+
 import { getBookingFieldsWithSystemFields } from "../../../lib/getBookingFields";
 import { BookingFields } from "./BookingFields";
 
+// Mock PhoneInput to avoid calling the lazy import
+vi.mock("@calcom/features/components/phone-input", () => {
+  return {
+    default: PhoneInput,
+  };
+});
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FormMethods = UseFormReturn<any>;
 

packages/features/components/phone-input/PhoneInput.tsx

@@ -1,9 +1,12 @@
 "use client";
 
+import { isSupportedCountry } from "libphonenumber-js";
+import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
+import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 
 export type PhoneInputProps = {
@@ -80,10 +83,12 @@ function BasePhoneInputWeb({
   value,
   ...rest
 }: Omit<PhoneInputProps, "defaultCountry">) {
+  const defaultCountry = useDefaultCountry();
   return (
     <PhoneInput
       {...rest}
       value={value ? value.trim().replace(/^\+?/, "+") : undefined}
+      country={value ? undefined : defaultCountry}
       enableSearch
       disableSearchIcon
       inputProps={{
@@ -118,30 +123,29 @@ function BasePhoneInputWeb({
   );
 }
 
-// Function not in use anywhere.
-// const useDefaultCountry = () => {
-//   const [defaultCountry, setDefaultCountry] = useState("us");
-//   const query = trpc.viewer.public.countryCode.useQuery(undefined, {
-//     refetchOnWindowFocus: false,
-//     refetchOnReconnect: false,
-//     retry: false,
-//   });
+const useDefaultCountry = () => {
+  const [defaultCountry, setDefaultCountry] = useState("us");
+  const query = trpc.viewer.public.countryCode.useQuery(undefined, {
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    retry: false,
+  });
 
-//   useEffect(
-//     function refactorMeWithoutEffect() {
-//       const data = query.data;
-//       if (!data?.countryCode) {
-//         return;
-//       }
+  useEffect(
+    function refactorMeWithoutEffect() {
+      const data = query.data;
+      if (!data?.countryCode) {
+        return;
+      }
 
-//       isSupportedCountry(data?.countryCode)
-//         ? setDefaultCountry(data.countryCode.toLowerCase())
-//         : setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
-//     },
-//     [query.data]
-//   );
+      isSupportedCountry(data?.countryCode)
+        ? setDefaultCountry(data.countryCode.toLowerCase())
+        : setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
+    },
+    [query.data]
+  );
 
-//   return defaultCountry;
-// };
+  return defaultCountry;
+};
 
 export default BasePhoneInput;

packages/features/ee/workflows/components/AddActionDialog.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import PhoneInput from "@calcom/features/components/phone-input";
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { WorkflowActions } from "@calcom/prisma/enums";
@@ -21,7 +22,6 @@ import {
   Icon,
   Input,
   Label,
-  PhoneInput,
   Select,
   Tooltip,
 } from "@calcom/ui";

packages/features/ee/workflows/components/WorkflowStepContainer.tsx

@@ -6,6 +6,7 @@ import type { UseFormReturn } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import "react-phone-number-input/style.css";
 
+import PhoneInput from "@calcom/features/components/phone-input";
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useHasActiveTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -33,7 +34,6 @@ import {
   Icon,
   Input,
   Label,
-  PhoneInput,
   Select,
   showToast,
   TextArea,

packages/features/eventtypes/components/Locations.tsx

@@ -9,6 +9,7 @@ import type { UseFormGetValues, UseFormSetValue, Control, FormState } from "reac
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
+import PhoneInput from "@calcom/features/components/phone-input";
 import type {
   LocationFormValues,
   EventTypeSetupProps,
@@ -22,7 +23,7 @@ import type {
 import LocationSelect from "@calcom/features/form/components/LocationSelect";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Input, PhoneInput, Button, showToast } from "@calcom/ui";
+import { Icon, Input, Button, showToast } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
 
 export type TEventTypeLocation = Pick<EventTypeSetupProps["eventType"], "locations">;

packages/features/eventtypes/components/tabs/ai/AIEventController.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { z } from "zod";
 
+import PhoneInput from "@calcom/features/components/phone-input";
 import { getTemplateFieldsSchema } from "@calcom/features/ee/cal-ai-phone/getTemplateFieldsSchema";
 import { TEMPLATES_FIELDS } from "@calcom/features/ee/cal-ai-phone/template-fields-map";
 import type { TemplateType } from "@calcom/features/ee/cal-ai-phone/zod-utils";
@@ -12,17 +13,7 @@ import type { EventTypeSetup, FormValues } from "@calcom/features/eventtypes/lib
 import { ComponentForField } from "@calcom/features/form-builder/FormBuilderField";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Label,
-  EmptyScreen,
-  SettingsToggle,
-  Divider,
-  TextField,
-  PhoneInput,
-  showToast,
-  Icon,
-} from "@calcom/ui";
+import { Button, Label, EmptyScreen, SettingsToggle, Divider, TextField, showToast, Icon } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
 
 type AIEventControllerProps = {

packages/features/form-builder/Components.tsx

@@ -6,6 +6,7 @@ import type {
   TextLikeComponentProps,
 } from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
 import Widgets from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
+import PhoneInput from "@calcom/features/components/phone-input";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   AddressInput,
@@ -17,7 +18,6 @@ import {
   InfoBadge,
   InputField,
   Label,
-  PhoneInput,
   RadioField,
   Tooltip,
 } from "@calcom/ui";

packages/ui/__mocks__/ui.tsx

@@ -5,7 +5,6 @@ vi.mock("@calcom/ui", async (originalImport) => {
   // Dynamic imports of Components are not supported in Vitest. So, we use the non-lazy version of the components
   return {
     ...original,
-    PhoneInput: original.PhoneInputNonLazy,
     AddressInput: original.AddressInputNonLazy,
   };
 });

packages/ui/index.ts

@@ -121,9 +121,7 @@ export { ShellSubHeading } from "./components/layout";
 
 /** ⬇️ TODO - Move these to components */
 export { default as AddressInput } from "./form/AddressInputLazy";
-export { default as PhoneInput } from "./form/PhoneInputLazy";
 export { default as MultiEmail } from "./form/MultiEmailLazy";
-export { default as PhoneInputNonLazy } from "./form/PhoneInput";
 export { default as AddressInputNonLazy } from "./form/AddressInput";
 
 export { UnstyledSelect } from "./form/Select";