From cc2f16411b68c0d306320b9338f1a6e6fd6a80e0 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 13 Feb 2025 00:39:37 +0530
Subject: [PATCH] feat: add country code (#19264)

---
 .../BookEventForm/BookingFields.test.tsx       | 18 ++++++++++++++++++
 packages/ui/form/PhoneInput.tsx                |  3 +++
 2 files changed, 21 insertions(+)

diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx
index 9f6909820f..85ac0c4fff 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx
+++ b/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,
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index 2304da1b37..cfae940280 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/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,