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>

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