Integrate geolocation API

website/src/app/[lang]/[region]/(website)/me/hooks.ts

@@ -6,6 +6,7 @@ import { DONATION_CERTIFICATE_FIRESTORE_PATH } from '@socialincome/shared/src/ty
 import { Employer, EMPLOYERS_FIRESTORE_PATH } from '@socialincome/shared/src/types/employers';
 import { USER_FIRESTORE_PATH } from '@socialincome/shared/src/types/user';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Geo } from '@vercel/functions';
 import { addDoc, collection, deleteDoc, doc, getDocs, query, Timestamp, updateDoc, where } from 'firebase/firestore';
 import { useContext } from 'react';
 import { useFirestore } from 'reactfire';
@@ -170,3 +171,20 @@ export const useAddEmployer = () => {
 		await queryClient.invalidateQueries({ queryKey: ['me', 'employers'] });
 	};
 };
+
+export const useGeolocation = () => {
+	const api = useApi();
+	const {
+		data: geolocation,
+		isLoading,
+		error,
+	} = useQuery({
+		queryKey: ['geolocation'],
+		queryFn: async () => {
+			const response = await api.get('/api/geolocation');
+			return (await response.json()) as Geo;
+		},
+	});
+
+	return { geolocation, isLoading, error };
+};

website/src/app/api/geolocation/route.ts

@@ -0,0 +1,10 @@
+import { geolocation } from '@vercel/functions';
+import { handleApiError } from '@/app/api/auth';
+
+export async function GET(request: Request) {
+	try {
+		return Response.json(geolocation(request));
+	} catch (error: any) {
+		return handleApiError(error);
+	}
+}

website/src/components/navbar/navbar-client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { DefaultParams } from '@/app/[lang]/[region]';
+import { useGeolocation } from '@/app/[lang]/[region]/(website)/me/hooks';
 import { getFlagComponentByCurrency } from '@/components/country-flags';
 import { DonateIcon } from '@/components/logos/donate-icon';
 import { SIAnimatedLogo } from '@/components/logos/si-animated-logo';
@@ -408,11 +409,12 @@ const DesktopNavigation = ({
 
 export function NavbarClient(props: NavbarProps) {
 	const { backgroundColor } = useGlobalStateProvider();
+	const { geolocation } = useGeolocation();
 
 	return (
 		<nav className={twMerge('theme-blue group/navbar fixed inset-x-0 top-0 z-20 flex flex-col', backgroundColor)}>
-			<DesktopNavigation {...props} />
-			<MobileNavigation {...props} />
+			<DesktopNavigation {...props} country={geolocation?.country} />
+			<MobileNavigation {...props} country={geolocation?.country} />
 		</nav>
 	);
 }