From d59fdf21fdf4bf592b2c7eb75ae3701fad638427 Mon Sep 17 00:00:00 2001 From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Date: Thu, 6 Mar 2025 19:16:41 +0530 Subject: [PATCH] feat: display country code from IP (#19788) * feat: display country code from IP * chore: remove * fix: unit test --- .../components/dialog/EditLocationDialog.tsx | 3 +- .../BookEventForm/BookingFields.test.tsx | 9 ++++ .../components/phone-input}/PhoneInput.tsx | 48 ++++++++++--------- .../components/phone-input/index.ts} | 0 .../workflows/components/AddActionDialog.tsx | 2 +- .../components/WorkflowStepContainer.tsx | 2 +- .../eventtypes/components/Locations.tsx | 3 +- .../components/tabs/ai/AIEventController.tsx | 13 +---- packages/features/form-builder/Components.tsx | 2 +- packages/ui/__mocks__/ui.tsx | 1 - packages/ui/index.ts | 2 - 11 files changed, 44 insertions(+), 41 deletions(-) rename packages/{ui/form => features/components/phone-input}/PhoneInput.tsx (79%) rename packages/{ui/form/PhoneInputLazy.tsx => features/components/phone-input/index.ts} (100%) diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx index c0c0b2bfae..b15d087c4f 100644 --- a/apps/web/components/dialog/EditLocationDialog.tsx +++ b/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"; diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx index 85ac0c4fff..ca05ea12e8 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx +++ b/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; diff --git a/packages/ui/form/PhoneInput.tsx b/packages/features/components/phone-input/PhoneInput.tsx similarity index 79% rename from packages/ui/form/PhoneInput.tsx rename to packages/features/components/phone-input/PhoneInput.tsx index 5047df5a11..070eea48b2 100644 --- a/packages/ui/form/PhoneInput.tsx +++ b/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) { + const defaultCountry = useDefaultCountry(); return ( { -// 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; diff --git a/packages/ui/form/PhoneInputLazy.tsx b/packages/features/components/phone-input/index.ts similarity index 100% rename from packages/ui/form/PhoneInputLazy.tsx rename to packages/features/components/phone-input/index.ts diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx index a2a10af8a9..417840ba39 100644 --- a/packages/features/ee/workflows/components/AddActionDialog.tsx +++ b/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"; diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx index 00355f16e9..7f5edb3653 100644 --- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx +++ b/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, diff --git a/packages/features/eventtypes/components/Locations.tsx b/packages/features/eventtypes/components/Locations.tsx index f77dc885ef..c680f0f797 100644 --- a/packages/features/eventtypes/components/Locations.tsx +++ b/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; diff --git a/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx b/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx index f36a780d30..55096a330d 100644 --- a/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx +++ b/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 = { diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx index 7c34f23b88..11ad102cfe 100644 --- a/packages/features/form-builder/Components.tsx +++ b/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"; diff --git a/packages/ui/__mocks__/ui.tsx b/packages/ui/__mocks__/ui.tsx index 8e34e41c0e..6834bf2a05 100644 --- a/packages/ui/__mocks__/ui.tsx +++ b/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, }; }); diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 2722a7cb18..b7667e1f76 100644 --- a/packages/ui/index.ts +++ b/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";