From c20835a4c83d444c3c24fc62218c2d17c46c145a Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sun, 26 Feb 2023 00:45:05 +0530
Subject: [PATCH] feat: get country code from ip geolocation (#6880)

* feat: get coutnry code from ip geolocation

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

* fix: create new api route for fetching code

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

* chore: replace city with country

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

* refactor: create hook for country

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

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 apps/web/pages/api/countrycode.ts | 20 ++++++++++++++++++++
 packages/ui/form/PhoneInput.tsx   | 20 ++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 apps/web/pages/api/countrycode.ts

diff --git a/apps/web/pages/api/countrycode.ts b/apps/web/pages/api/countrycode.ts
new file mode 100644
index 0000000000..db40ce2ce7
--- /dev/null
+++ b/apps/web/pages/api/countrycode.ts
@@ -0,0 +1,20 @@
+import type { NextRequest } from "next/server";
+
+export const config = {
+  runtime: "experimental-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/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index 27e247e040..125750caee 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -1,3 +1,5 @@
+import { isSupportedCountry } from "libphonenumber-js";
+import { useEffect, useState } from "react";
 import type { Props } from "react-phone-number-input/react-hook-form";
 import BasePhoneInput from "react-phone-number-input/react-hook-form";
 import "react-phone-number-input/style.css";
@@ -19,10 +21,12 @@ function PhoneInput<FormValues>({
   onChange,
   ...rest
 }: PhoneInputProps<FormValues>) {
+  const defaultCountry = useDefaultCountry();
   return (
     <BasePhoneInput
       {...rest}
       international
+      defaultCountry={defaultCountry}
       name={name}
       control={control}
       onChange={onChange}
@@ -35,4 +39,20 @@ function PhoneInput<FormValues>({
   );
 }
 
+const useDefaultCountry = () => {
+  const [defaultCountry, setDefaultCountry] = useState("US");
+  useEffect(() => {
+    fetch("/api/countrycode")
+      .then((res) => res.json())
+      .then((res) => {
+        if (isSupportedCountry(res.countryCode)) setDefaultCountry(res.countryCode);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  return defaultCountry;
+};
+
 export default PhoneInput;