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

@@ -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",
-      },
-    }
-  );
-}

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({

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;
 };