From 4e1e2577eb8aa8e3e45334314a96866519aaa498 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 8 Mar 2023 18:03:42 +0530
Subject: [PATCH] fix: create a trpc route for fetching country (#7555)

* fix: create a trpc route for fetching country

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: type error

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 apps/web/pages/api/countrycode.ts       | 20 --------------------
 packages/trpc/server/routers/viewer.tsx |  6 ++++++
 packages/ui/form/PhoneInput.tsx         | 21 ++++++++++-----------
 3 files changed, 16 insertions(+), 31 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 5ce454c8da..0000000000
--- 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 0bc4888dfa..48f93983d8 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: string | string[] = req?.headers?.["x-vercel-ip-country"] ?? "";
+    return { countryCode: Array.isArray(countryCode) ? countryCode[0] : countryCode };
+  }),
   samlTenantProduct: publicProcedure
     .input(
       z.object({
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index 696946322e..8f958d597b 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,16 +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(undefined, {
+    onSuccess: (data) => {
+      if (isSupportedCountry(data?.countryCode)) {
+        setDefaultCountry(data.countryCode as Country);
+      }
+    },
+  });
 
   return defaultCountry;
 };