Allow filter search for country and region.

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,4 +1,6 @@
 import { useApi } from '../useApi';
+import { useCountryNames, useRegionNames } from 'components/hooks';
+import useLocale from '../useLocale';
 
 export function useWebsiteValues({
   websiteId,
@@ -14,6 +16,26 @@ export function useWebsiteValues({
   search?: string;
 }) {
   const { get, useQuery } = useApi();
+  const { locale } = useLocale();
+  const { countryNames } = useCountryNames(locale);
+  const { regionNames } = useRegionNames(locale);
+
+  const names = {
+    country: countryNames,
+    region: regionNames,
+  };
+
+  const getSearch = (type: string, value: string) => {
+    if (value) {
+      const values = names[type];
+      return Object.keys(values).reduce((code: string, key: string) => {
+        if (!code && values[key].toLowerCase().includes(value.toLowerCase())) {
+          code = key;
+        }
+        return code;
+      }, '');
+    }
+  };
 
   return useQuery({
     queryKey: ['websites:values', { websiteId, type, startDate, endDate, search }],
@@ -22,7 +44,7 @@ export function useWebsiteValues({
         type,
         startAt: +startDate,
         endAt: +endDate,
-        search,
+        search: getSearch(type, search),
       }),
     enabled: !!(websiteId && type && startDate && endDate),
   });