Get user country from client

app/(dashboard)/dashboard/settings/@plan/components/lemon-squeezy-buttons.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FC } from 'react';
 
 import Link from 'next/link';
@@ -11,7 +13,7 @@ type Buttons = {
 	plans: PaidSubscriptionPlans;
 };
 
-export const LemonSqueezyButtons: FC<Buttons> = async ({ plans, user }) => {
+export const LemonSqueezyButtons: FC<Buttons> = ({ plans, user }) => {
 	return (
 		<div className='flex w-full flex-col items-center justify-between gap-4 md:flex-row'>
 			{plans.map((plan) => {

app/(dashboard)/dashboard/settings/@plan/components/pay-button.tsx

@@ -1,27 +1,33 @@
-import IPData from 'ipdata';
+'use client';
 
-import { getPaidSubscriptions } from '~/lib/products/get-plans';
+import { FC, useEffect, useState } from 'react';
+
+import { PaidSubscriptionPlans } from '~/lib/products/get-plans';
 import { LemonSqueezyButtons } from './lemon-squeezy-buttons';
 import { PaddleButtons } from './paddle-buttons';
-import { currentUser } from '~/lib/auth/currentUser';
-import { env } from '~/env/server.mjs';
+import { CurrentUser } from '~/lib/auth/currentUser';
+import { env } from '~/env/client.mjs';
+import { FetchCountry } from './types';
 
-const ipData = new IPData(env.IPDATA_KEY);
+type $PayButton = {
+	user: CurrentUser;
+	plans: PaidSubscriptionPlans;
+};
 
-export const PayButton = async () => {
-	const plansPromise = getPaidSubscriptions();
-	const userPromise = currentUser();
-	const countryPromise = ipData.lookup();
+export const PayButton: FC<$PayButton> = ({ plans, user }) => {
+	const [country, setCountry] = useState<FetchCountry>();
 
-	const [user, plans, country] = await Promise.all([
-		userPromise,
-		plansPromise,
-		countryPromise,
-	]);
+	useEffect(() => {
+		fetch(
+			`https://api.geoapify.com/v1/ipinfo?apiKey=${env.NEXT_PUBLIC_GEOLOCATION}`
+		)
+			.then((response) => response.json())
+			.then((res) => setCountry(res));
+	}, []);
 
-	console.log(country);
+	console.log(country?.country);
 
-	const isColombia = country.country_code === 'CO';
+	const isColombia = country?.country.iso_code === 'CO';
 
 	return isColombia ? (
 		<LemonSqueezyButtons user={user} plans={plans} />

app/(dashboard)/dashboard/settings/@plan/components/types.d.ts

@@ -0,0 +1,77 @@
+export type FetchCountry = {
+	city: City;
+	continent: Continent;
+	country: Country;
+	location: Location;
+	subdivisions: Subdivision[];
+	state: State;
+	datasource: Datasource[];
+	ip: string;
+};
+
+export type City = {
+	names: CityNames;
+	name: string;
+};
+
+export type CityNames = {
+	en: string;
+};
+
+export type Continent = {
+	code: string;
+	geoname_id: number;
+	names: ContinentNames;
+	name: string;
+};
+
+export type ContinentNames = {
+	de: string;
+	en: string;
+	es: string;
+	fa: string;
+	fr: string;
+	ja: string;
+	ko: string;
+	'pt-BR': string;
+	ru: string;
+	'zh-CN': string;
+};
+
+export type Country = {
+	geoname_id: number;
+	iso_code: string;
+	names: ContinentNames;
+	name: string;
+	name_native: string;
+	phone_code: string;
+	capital: string;
+	currency: string;
+	flag: string;
+	languages: Language[];
+};
+
+export type Language = {
+	iso_code: string;
+	name: string;
+	name_native: string;
+};
+
+export type Datasource = {
+	name: string;
+	attribution: string;
+	license: string;
+};
+
+export type Location = {
+	latitude: number;
+	longitude: number;
+};
+
+export type State = {
+	name: string;
+};
+
+export type Subdivision = {
+	names: CityNames;
+};

app/(dashboard)/dashboard/settings/@plan/page.tsx

@@ -3,9 +3,13 @@ import { CurrentPlan } from './components/current-plan';
 import { CardHeader } from '~/components/server/settings/card-header';
 import { currentUser } from '~/lib/auth/currentUser';
 import { PayButton } from './components/pay-button';
+import { getPaidSubscriptions } from '~/lib/products/get-plans';
 
 const Plan = async () => {
-	const user = await currentUser();
+	const plansPromise = getPaidSubscriptions();
+	const userPromise = currentUser();
+
+	const [user, plans] = await Promise.all([userPromise, plansPromise]);
 
 	if (!user) return;
 
@@ -22,7 +26,9 @@ const Plan = async () => {
 				</p>
 			</CardContent>
 			<CardFooter className='flex flex-col items-center justify-between gap-4'>
-				{user.plan === 'FREE' && <PayButton />}
+				{user.plan === 'FREE' && (
+					<PayButton user={user} plans={plans} />
+				)}
 			</CardFooter>
 		</Card>
 	);

env/client.mjs

@@ -8,13 +8,15 @@ export const env = createEnv({
 		NEXT_PUBLIC_S3_BUCKET: string().min(4),
 		NEXT_PUBLIC_S3_REGION: string().min(4),
 		NEXT_PUBLIC_PADDLE_CLIENT: string().min(8),
+		NEXT_PUBLIC_GEOLOCATION: string().min(8),
 	},
 	runtimeEnv: {
 		NEXT_PUBLIC_S3_PUBLIC: process.env.NEXT_PUBLIC_S3_PUBLIC,
 		NEXT_PUBLIC_S3_SECRET: process.env.NEXT_PUBLIC_S3_SECRET,
 		NEXT_PUBLIC_S3_BUCKET: process.env.NEXT_PUBLIC_S3_BUCKET,
 		NEXT_PUBLIC_S3_REGION: process.env.NEXT_PUBLIC_S3_REGION,
 		NEXT_PUBLIC_PADDLE_CLIENT: process.env.NEXT_PUBLIC_PADDLE_CLIENT,
+		NEXT_PUBLIC_GEOLOCATION: process.env.GEOLOCATION,
 	},
 	onValidationError: (error = ZodError) => {
 		throw new Error(`[*] Missing environment varibales: ${error.flatten().fieldErrors}`);

env/server.mjs

@@ -17,7 +17,6 @@ export const env = createEnv({
 		OPENAI_ORG: string().min(8),
 		RESEND_API_KEY: string().min(8),
 		CLOUDFRONT_HOST: string().url(),
-		IPDATA_KEY: string().min(8),
 	},
 	runtimeEnv: {
 		DATABASE_URL: process.env.DATABASE_URL,
@@ -34,7 +33,6 @@ export const env = createEnv({
 		OPENAI_ORG: process.env.OPENAI_ORG,
 		RESEND_API_KEY: process.env.RESEND_API_KEY,
 		CLOUDFRONT_HOST: process.env.CLOUDFRONT_HOST,
-		IPDATA_KEY: process.env.IPDATA_KEY,
 	},
 	onValidationError: (error = ZodError) => {
 		console.error(

package.json

@@ -57,7 +57,6 @@
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
 		"geist": "^1.2.0",
-		"ipdata": "^2.2.4",
 		"langchain": "^0.0.172",
 		"lucide-react": "^0.294.0",
 		"md5": "^2.3.0",