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>pull/7311/head^2
parent
84da528d4d
commit
4e1e2577eb
|
@ -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",
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
|
@ -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({
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue