feat: add country code (#19264)

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

@@ -6,6 +6,7 @@ import * as React from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { FormProvider, useForm } from "react-hook-form";
 import { expect } from "vitest";
+import { vi } from "vitest";
 
 import { getBookingFieldsWithSystemFields } from "../../../lib/getBookingFields";
 import { BookingFields } from "./BookingFields";
@@ -13,6 +14,23 @@ import { BookingFields } from "./BookingFields";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FormMethods = UseFormReturn<any>;
 
+// Add tRPC mock before tests
+vi.mock("@calcom/trpc/react", () => ({
+  trpc: {
+    viewer: {
+      public: {
+        countryCode: {
+          useQuery: () => ({
+            data: { countryCode: "US" },
+            isLoading: false,
+            error: null,
+          }),
+        },
+      },
+    },
+  },
+}));
+
 const renderComponent = ({
   props: props,
   formDefaultValues,

packages/ui/form/PhoneInput.tsx

@@ -20,12 +20,15 @@ export type PhoneInputProps = {
 };
 
 function BasePhoneInput({ name, className = "", onChange, value, ...rest }: PhoneInputProps) {
+  const defaultCountry = useDefaultCountry();
+
   return (
     <PhoneInput
       {...rest}
       value={value ? value.trim().replace(/^\+?/, "+") : undefined}
       enableSearch
       disableSearchIcon
+      country={defaultCountry}
       inputProps={{
         name: name,
         required: rest.required,