From f4f869f91977b922af0ff962162e7c31e51af605 Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Sat, 2 Sep 2023 08:58:25 +0000
Subject: [PATCH] localize visitors in map tooltip

---
 src/components/common/WorldMap.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/common/WorldMap.js b/src/components/common/WorldMap.js
index b593099b..6ae84677 100644
--- a/src/components/common/WorldMap.js
+++ b/src/components/common/WorldMap.js
@@ -8,6 +8,7 @@ import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
 import useTheme from 'components/hooks/useTheme';
 import useCountryNames from 'components/hooks/useCountryNames';
 import useLocale from 'components/hooks/useLocale';
+import useMessages from 'components/hooks/useMessages';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
 import styles from './WorldMap.module.css';
@@ -17,7 +18,9 @@ export function WorldMap({ data, className }) {
   const [tooltip, setTooltipPopup] = useState();
   const { theme, colors } = useTheme();
   const { locale } = useLocale();
+  const { formatMessage, labels } = useMessages();
   const countryNames = useCountryNames(locale);
+  const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
   const metrics = useMemo(() => (data ? percentFilter(data) : []), [data]);
 
   function getFillColor(code) {
@@ -40,7 +43,7 @@ export function WorldMap({ data, className }) {
   function handleHover(code) {
     if (code === 'AQ') return;
     const country = metrics?.find(({ x }) => x === code);
-    setTooltipPopup(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
+    setTooltipPopup(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} ${visitorsLabel}`);
   }
 
   return (