From ca1b5e424b7c4986f3ba16396f9de3b57b63c0ed Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Date: Tue, 7 Mar 2023 19:30:38 +0530
Subject: [PATCH 1/2] fix: create a trpc route for fetching country

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 apps/web/pages/api/countrycode.ts       | 20 --------------------
 packages/trpc/server/routers/viewer.tsx |  6 ++++++
 packages/ui/form/PhoneInput.tsx         | 22 ++++++++++------------
 3 files changed, 16 insertions(+), 32 deletions(-)
 delete mode 100644 apps/web/pages/api/countrycode.ts

diff --git a/apps/web/pages/api/countrycode.ts b/apps/web/pages/api/countrycode.ts
deleted file mode 100644
index 5ce454c8daba3b..00000000000000
--- a/apps/web/pages/api/countrycode.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { NextRequest } from "next/server";
-
-export const config = {
-  runtime: "edge",
-};
-
-export default async function handler(req: NextRequest) {
-  const countryCode = req.headers.get("x-vercel-ip-country") ?? "";
-  return new Response(
-    JSON.stringify({
-      countryCode,
-    }),
-    {
-      status: 200,
-      headers: {
-        "content-type": "application/json",
-      },
-    }
-  );
-}
diff --git a/packages/trpc/server/routers/viewer.tsx b/packages/trpc/server/routers/viewer.tsx
index 0bc4888dfad3e0..224a0debab4398 100644
--- a/packages/trpc/server/routers/viewer.tsx
+++ b/packages/trpc/server/routers/viewer.tsx
@@ -68,6 +68,12 @@ const publicViewerRouter = router({
       locale,
     };
   }),
+  countryCode: publicProcedure.query(({ ctx }) => {
+    const { req } = ctx;
+    const countryCode = req?.headers?.["x-vercel-ip-country"] ?? "";
+
+    return { countryCode };
+  }),
   samlTenantProduct: publicProcedure
     .input(
       z.object({
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index 696946322e936b..f8823a5b7b4e54 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -1,9 +1,11 @@
 import { isSupportedCountry } from "libphonenumber-js";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import BasePhoneInput from "react-phone-number-input";
 import type { Props, Country } from "react-phone-number-input";
 import "react-phone-number-input/style.css";
 
+import { trpc } from "@calcom/trpc/react";
+
 export type PhoneInputProps = Props<{
   value: string;
   id?: string;
@@ -34,17 +36,13 @@ function PhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps
 
 const useDefaultCountry = () => {
   const [defaultCountry, setDefaultCountry] = useState<Country>("US");
-  useEffect(() => {
-    fetch("/api/countrycode")
-      .then((res) => res.json())
-      .then((res) => {
-        if (isSupportedCountry(res.countryCode)) setDefaultCountry(res.countryCode);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  }, []);
-
+  const query = trpc.viewer.public.countryCode.useQuery({
+    onSuccess(data) {
+      if (isSupportedCountry(data.countryCode)) {
+        setDefaultCountry(data.countryCode);
+      }
+    },
+  });
   return defaultCountry;
 };
 

From cc7f2c7f63401b3711c1548877c9cc8cdabab6c1 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Date: Tue, 7 Mar 2023 20:28:42 +0530
Subject: [PATCH 2/2] fix: type error

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 packages/trpc/server/routers/viewer.tsx | 4 ++--
 packages/ui/form/PhoneInput.tsx         | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/trpc/server/routers/viewer.tsx b/packages/trpc/server/routers/viewer.tsx
index 224a0debab4398..48f93983d8a99e 100644
--- a/packages/trpc/server/routers/viewer.tsx
+++ b/packages/trpc/server/routers/viewer.tsx
@@ -70,9 +70,9 @@ const publicViewerRouter = router({
   }),
   countryCode: publicProcedure.query(({ ctx }) => {
     const { req } = ctx;
-    const countryCode = req?.headers?.["x-vercel-ip-country"] ?? "";
 
-    return { countryCode };
+    const countryCode: string | string[] = req?.headers?.["x-vercel-ip-country"] ?? "";
+    return { countryCode: Array.isArray(countryCode) ? countryCode[0] : countryCode };
   }),
   samlTenantProduct: publicProcedure
     .input(
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index f8823a5b7b4e54..8f958d597bd0a2 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -36,13 +36,14 @@ function PhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps
 
 const useDefaultCountry = () => {
   const [defaultCountry, setDefaultCountry] = useState<Country>("US");
-  const query = trpc.viewer.public.countryCode.useQuery({
-    onSuccess(data) {
-      if (isSupportedCountry(data.countryCode)) {
-        setDefaultCountry(data.countryCode);
+  const query = trpc.viewer.public.countryCode.useQuery(undefined, {
+    onSuccess: (data) => {
+      if (isSupportedCountry(data?.countryCode)) {
+        setDefaultCountry(data.countryCode as Country);
       }
     },
   });
+
   return defaultCountry;
 };