revamp the sidebar and implement the filter search

messages/ar.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "استخدام GPS الجهاز",
       "PREFERRED_SEARCH_CENTER": "استخدام مركز البحث"
     },
+    "SEARCH_FILTERS_SUBHEADER": "فلاتر البحث",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "تضمين البائعين النشطين",
+      "INCLUDE_INACTIVE_SELLERS": "تضمين البائعين غير النشطين",
+      "INCLUDE_TEST_SELLERS": "تضمين البائعين التجريبيين",
+      "INCLUDE_TRUST_LEVEL_100": "تضمين مستوى الثقة 100",
+      "INCLUDE_TRUST_LEVEL_80": "تضمين مستوى الثقة 80",
+      "INCLUDE_TRUST_LEVEL_50": "تضمين مستوى الثقة 50",
+      "INCLUDE_TRUST_LEVEL_0": "تضمين مستوى الثقة 0"
+    },
     "CONTACT_MAP_OF_PI": "اتصل بـ Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "تم حفظ التفضيلات بنجاح",

messages/en-GB.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Use my device GPS",
       "PREFERRED_SEARCH_CENTER": "Use Search Centre"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Search Filters",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Include active sellers",
+      "INCLUDE_INACTIVE_SELLERS": "Include inactive sellers",
+      "INCLUDE_TEST_SELLERS": "Include test sellers",
+      "INCLUDE_TRUST_LEVEL_100": "Include trust level 100",
+      "INCLUDE_TRUST_LEVEL_80": "Include trust level 80",
+      "INCLUDE_TRUST_LEVEL_50": "Include trust level 50",
+      "INCLUDE_TRUST_LEVEL_0": "Include trust level 0"
+    },
     "CONTACT_MAP_OF_PI": "Contact Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Preferences successful",

messages/en.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Use my device GPS",
       "PREFERRED_SEARCH_CENTER": "Use Search Center"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Search Filters",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Include active sellers",
+      "INCLUDE_INACTIVE_SELLERS": "Include inactive sellers",
+      "INCLUDE_TEST_SELLERS": "Include test sellers",
+      "INCLUDE_TRUST_LEVEL_100": "Include trust level 100",
+      "INCLUDE_TRUST_LEVEL_80": "Include trust level 80",
+      "INCLUDE_TRUST_LEVEL_50": "Include trust level 50",
+      "INCLUDE_TRUST_LEVEL_0": "Include trust level 0"
+    },
     "CONTACT_MAP_OF_PI": "Contact Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Preferences successful",

messages/es.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Usar el GPS de mi dispositivo",
       "PREFERRED_SEARCH_CENTER": "Usar el Centro de Búsqueda"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Filtros de búsqueda",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Incluir vendedores activos",
+      "INCLUDE_INACTIVE_SELLERS": "Incluir vendedores inactivos",
+      "INCLUDE_TEST_SELLERS": "Incluir vendedores de prueba",
+      "INCLUDE_TRUST_LEVEL_100": "Incluir nivel de confianza 100",
+      "INCLUDE_TRUST_LEVEL_80": "Incluir nivel de confianza 80",
+      "INCLUDE_TRUST_LEVEL_50": "Incluir nivel de confianza 50",
+      "INCLUDE_TRUST_LEVEL_0": "Incluir nivel de confianza 0"
+    },
     "CONTACT_MAP_OF_PI": "Contactar a Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Preferencias guardadas con éxito",

messages/ewe-BJ.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Zã nye mɔ̃a ƒe GPS",
       "PREFERRED_SEARCH_CENTER": "Zã Didiƒe"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Agbalẽŋlɔwo ƒe Filterwo",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Le ame aɖe si dɔ agboɖa le ŋkeke me",
+      "INCLUDE_INACTIVE_SELLERS": "Le ame aɖe si dɔ agboɖa o le ŋkeke me",
+      "INCLUDE_TEST_SELLERS": "Le ame aɖe si dɔ agboɖa dɔɖa",
+      "INCLUDE_TRUST_LEVEL_100": "Le ame aɖe si nà agbo 100%",
+      "INCLUDE_TRUST_LEVEL_80": "Le ame aɖe si nà agbo 80%",
+      "INCLUDE_TRUST_LEVEL_50": "Le ame aɖe si nà agbo 50%",
+      "INCLUDE_TRUST_LEVEL_0": "Le ame aɖe si nà agbo 0%"
+    },
     "CONTACT_MAP_OF_PI": "Kadodo ƒe Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Nu siwo wodi la kpɔ dzidzedze",

messages/fon-BJ.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Zan GPS azɔwanú ce tɔn",
       "PREFERRED_SEARCH_CENTER": "Zan Bibaatɛn"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Wàɖànsu ƒè Filtèr",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Gba anɔnkɔ tɔn xɔxɔ me",
+      "INCLUDE_INACTIVE_SELLERS": "Gba anɔnkɔ tɔn mà xɔxɔ o me",
+      "INCLUDE_TEST_SELLERS": "Gba anɔnkɔ tɔn sɔ̃ɖo me",
+      "INCLUDE_TRUST_LEVEL_100": "Gba anɔnkɔ tɔn wɔ ɖe 100%",
+      "INCLUDE_TRUST_LEVEL_80": "Gba anɔnkɔ tɔn wɔ ɖe 80%",
+      "INCLUDE_TRUST_LEVEL_50": "Gba anɔnkɔ tɔn wɔ ɖe 50%",
+      "INCLUDE_TRUST_LEVEL_0": "Gba anɔnkɔ tɔn wɔ ɖe 0%"
+    },
     "CONTACT_MAP_OF_PI": "Do xo sedo Map Of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Nǔ e jló we lɛ é ɖuɖeji",

messages/fr.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Utiliser le GPS de mon appareil",
       "PREFERRED_SEARCH_CENTER": "Utiliser le Centre de recherche"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Filtres de recherche",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Inclure les vendeurs actifs",
+      "INCLUDE_INACTIVE_SELLERS": "Inclure les vendeurs inactifs",
+      "INCLUDE_TEST_SELLERS": "Inclure les vendeurs test",
+      "INCLUDE_TRUST_LEVEL_100": "Inclure le niveau de confiance 100",
+      "INCLUDE_TRUST_LEVEL_80": "Inclure le niveau de confiance 80",
+      "INCLUDE_TRUST_LEVEL_50": "Inclure le niveau de confiance 50",
+      "INCLUDE_TRUST_LEVEL_0": "Inclure le niveau de confiance 0"
+    },
     "CONTACT_MAP_OF_PI": "Contacter Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Préférences enregistrées",

messages/hau-NG.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Yi amfani da GPS na na'urar",
       "PREFERRED_SEARCH_CENTER": "Yi amfani da Cibiyar Bincike"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Farantan Bincike",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Hada da masu sayarwa masu aiki",
+      "INCLUDE_INACTIVE_SELLERS": "Hada da masu sayarwa marasa aiki",
+      "INCLUDE_TEST_SELLERS": "Hada da masu sayarwa na gwaji",
+      "INCLUDE_TRUST_LEVEL_100": "Hada da matakin amana 100",
+      "INCLUDE_TRUST_LEVEL_80": "Hada da matakin amana 80",
+      "INCLUDE_TRUST_LEVEL_50": "Hada da matakin amana 50",
+      "INCLUDE_TRUST_LEVEL_0": "Hada da matakin amana 0"
+    },
     "CONTACT_MAP_OF_PI": "Tuntubi Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Zaɓuɓɓuka sun yi nasara",

messages/ja.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "デバイスのGPSを使用",
       "PREFERRED_SEARCH_CENTER": "検索センターを使用"
     },
+    "SEARCH_FILTERS_SUBHEADER": "検索フィルター",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "アクティブな販売者を含める",
+      "INCLUDE_INACTIVE_SELLERS": "非アクティブな販売者を含める",
+      "INCLUDE_TEST_SELLERS": "テスト販売者を含める",
+      "INCLUDE_TRUST_LEVEL_100": "信頼レベル100を含める",
+      "INCLUDE_TRUST_LEVEL_80": "信頼レベル80を含める",
+      "INCLUDE_TRUST_LEVEL_50": "信頼レベル50を含める",
+      "INCLUDE_TRUST_LEVEL_0": "信頼レベル0を含める"
+    },
     "CONTACT_MAP_OF_PI": "Map of Pi に連絡",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "設定の保存に成功しました",

messages/ko.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "내 기기의 GPS 사용",
       "PREFERRED_SEARCH_CENTER": "검색 센터 사용"
     },
+    "SEARCH_FILTERS_SUBHEADER": "검색 필터",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "활동 중인 판매자 포함",
+      "INCLUDE_INACTIVE_SELLERS": "비활동 중인 판매자 포함",
+      "INCLUDE_TEST_SELLERS": "테스트 판매자 포함",
+      "INCLUDE_TRUST_LEVEL_100": "신뢰 수준 100 포함",
+      "INCLUDE_TRUST_LEVEL_80": "신뢰 수준 80 포함",
+      "INCLUDE_TRUST_LEVEL_50": "신뢰 수준 50 포함",
+      "INCLUDE_TRUST_LEVEL_0": "신뢰 수준 0 포함"
+    },
     "CONTACT_MAP_OF_PI": "Map of Pi에 문의",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "환경 설정이 성공적으로 완료되었습니다",

messages/vi.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Sử dụng GPS thiết bị của tôi",
       "PREFERRED_SEARCH_CENTER": "Sử dụng Trung tâm tìm kiếm"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Bộ lọc tìm kiếm",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Bao gồm người bán hoạt động",
+      "INCLUDE_INACTIVE_SELLERS": "Bao gồm người bán không hoạt động",
+      "INCLUDE_TEST_SELLERS": "Bao gồm người bán thử nghiệm",
+      "INCLUDE_TRUST_LEVEL_100": "Bao gồm mức độ tin cậy 100",
+      "INCLUDE_TRUST_LEVEL_80": "Bao gồm mức độ tin cậy 80",
+      "INCLUDE_TRUST_LEVEL_50": "Bao gồm mức độ tin cậy 50",
+      "INCLUDE_TRUST_LEVEL_0": "Bao gồm mức độ tin cậy 0"
+    },
     "CONTACT_MAP_OF_PI": "Liên hệ với Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Cập nhật tùy chọn thành công",

messages/yor-NG.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "Lo GPS ohun elo mi",     
       "PREFERRED_SEARCH_CENTER": "Lo Ile-iṣẹ Wiwa"
     },
+    "SEARCH_FILTERS_SUBHEADER": "Àwọn Àlẹ̀mọ́ọ̀rùn Ìwádìí",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "Fi awọn olutaja ti n ṣiṣẹ kun",
+      "INCLUDE_INACTIVE_SELLERS": "Fi awọn olutaja ti ko n ṣiṣẹ kun",
+      "INCLUDE_TEST_SELLERS": "Fi awọn olutaja idanwo kun",
+      "INCLUDE_TRUST_LEVEL_100": "Fi ipele igbẹkẹle 100 kun",
+      "INCLUDE_TRUST_LEVEL_80": "Fi ipele igbẹkẹle 80 kun",
+      "INCLUDE_TRUST_LEVEL_50": "Fi ipele igbẹkẹle 50 kun",
+      "INCLUDE_TRUST_LEVEL_0": "Fi ipele igbẹkẹle 0 kun"
+    },
     "CONTACT_MAP_OF_PI": "Olubasọrọ Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "Aseyori awọn ayanfẹ",

messages/zh-CN.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "使用我设备的 GPS",
       "PREFERRED_SEARCH_CENTER": "使用搜索中心"
     },
+    "SEARCH_FILTERS_SUBHEADER": "搜索筛选器",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "包含活跃卖家",
+      "INCLUDE_INACTIVE_SELLERS": "包含非活跃卖家",
+      "INCLUDE_TEST_SELLERS": "包含测试卖家",
+      "INCLUDE_TRUST_LEVEL_100": "包含信任等级100",
+      "INCLUDE_TRUST_LEVEL_80": "包含信任等级80",
+      "INCLUDE_TRUST_LEVEL_50": "包含信任等级50",
+      "INCLUDE_TRUST_LEVEL_0": "包含信任等级0"
+    },
     "CONTACT_MAP_OF_PI": "联络 Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "偏好设置已成功保存",

messages/zh-TW.json

@@ -29,6 +29,16 @@
       "PREFERRED_DEVICE_GPS": "使用我設備的 GPS",
       "PREFERRED_SEARCH_CENTER": "使用搜尋中心"
     },
+    "SEARCH_FILTERS_SUBHEADER": "搜尋篩選器",
+    "SEARCH_FILTERS": {
+      "INCLUDE_ACTIVE_SELLERS": "包含活躍賣家",
+      "INCLUDE_INACTIVE_SELLERS": "包含非活躍賣家",
+      "INCLUDE_TEST_SELLERS": "包含測試賣家",
+      "INCLUDE_TRUST_LEVEL_100": "包含信任級別100",
+      "INCLUDE_TRUST_LEVEL_80": "包含信任級別80",
+      "INCLUDE_TRUST_LEVEL_50": "包含信任級別50",
+      "INCLUDE_TRUST_LEVEL_0": "包含信任級別0"
+    },
     "CONTACT_MAP_OF_PI": "聯絡 Map of Pi",
     "VALIDATION": {
       "SUCCESSFUL_PREFERENCES_SUBMISSION": "偏好設定已成功儲存",

src/app/[locale]/page.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useContext, useEffect, useState, useRef } from 'react';
+import { useContext, useEffect, useState, useRef, ChangeEvent } from 'react';
 
 import { Button } from '@/components/shared/Forms/Buttons/Buttons';
 import SearchBar from '@/components/shared/SearchBar/SearchBar';
@@ -34,21 +34,22 @@ export default function Page({ params }: { params: { locale: string } }) {
   const [dbUserSettings, setDbUserSettings] = useState<IUserSettings | null>(null);
   const [zoomLevel, setZoomLevel] = useState(2);
   const [locationError, setLocationError] = useState<string | null>(null);
+  const [searchBarValue, setSearchBarValue] = useState('');
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [isSearchClicked, setSearchClicked] = useState(false);
   const [searchResults, setSearchResults] = useState<any[]>([]);
-  const [showPopup, setShowPopup] = useState<boolean>(false)
+  const [showPopup, setShowPopup] = useState<boolean>(false);
 
   const { isSigningInUser, currentUser, autoLoginUser, reload, setReload } = useContext(AppContext);
 
   useEffect(() => {
     // clear previous map state when findme option is changed
-    if (reload){
+    if (reload) {
       sessionStorage.removeItem('prevMapCenter');
       sessionStorage.removeItem('prevMapZoom');
     }
-    setReload(false)
-    setShowPopup(false)
+    setReload(false);
+    setShowPopup(false);
     checkAndAutoLoginUser(currentUser, autoLoginUser);
 
     const getUserSettingsData = async () => {
@@ -61,7 +62,7 @@ export default function Page({ params }: { params: { locale: string } }) {
             const coordinates = {
               lat: data.search_map_center.coordinates[1],
               lng: data.search_map_center.coordinates[0],
-            }
+            };
             setSearchCenter(coordinates);
             if (coordinates.lat === 0 && coordinates.lng === 0) {
               setShowPopup(true);
@@ -70,14 +71,14 @@ export default function Page({ params }: { params: { locale: string } }) {
         } else {
           logger.warn('User Settings not found.');
           setDbUserSettings(null);
-          setSearchCenter(null)
+          setSearchCenter(null);
         }
       } catch (error) {
         logger.error('Error fetching user settings data:', error);
       }
     };
 
-    getUserSettingsData();   
+    getUserSettingsData();
   }, [currentUser, reload]);
 
   useEffect(() => {
@@ -86,9 +87,8 @@ export default function Page({ params }: { params: { locale: string } }) {
         const loc = await userLocation(dbUserSettings);
         if (loc) {
           setSearchCenter({ lat: loc[0], lng: loc[1] });
-        }
-        else{
-          setSearchCenter(null)
+        } else {
+          setSearchCenter(null);
         }
       }
     };
@@ -104,28 +104,29 @@ export default function Page({ params }: { params: { locale: string } }) {
       if (loc) {
         setSearchCenter({ lat: loc[0], lng: loc[1] });
         logger.info('User location obtained successfully on button click:', { location });
-      }
-      else{
-        setSearchCenter(null)
+      } else{
+        setSearchCenter(null);
       }
     }
   };
 
   // Handle search query update from SearchBar and associated results
   const handleSearch = async (query: string) => {
-    setSearchQuery(query);
-    setSearchClicked(true);
+    if (query) {
+      setSearchQuery(query);
+      setSearchClicked(true);
 
-    // Fetch sellers based on current map bounds and search query
-    try {
-      const mapInstance = mapRef.current;
-      if (mapInstance) {
-        const bounds = mapInstance.getBounds();
-        const results = await fetchSellers(bounds, query); // Use API to fetch sellers
-        setSearchResults(results || []); // Update searchResults
+      // Fetch sellers based on current map bounds and search query
+      try {
+        const mapInstance = mapRef.current;
+        if (mapInstance) {
+          const bounds = mapInstance.getBounds();
+          const results = await fetchSellers(bounds, query); // Use API to fetch sellers
+          setSearchResults(results || []); // Update searchResults
+        }
+      } catch (error) {
+        logger.error('Failed to fetch sellers for search query.', error);
       }
-    } catch (error) {
-      logger.error('Failed to fetch sellers for search query.', error);
     }
   };
 
@@ -139,7 +140,14 @@ export default function Page({ params }: { params: { locale: string } }) {
         isSearchClicked={isSearchClicked}
         searchResults={searchResults || []}
       />
-      <SearchBar page={'default'} onSearch={handleSearch} />
+      <SearchBar
+        page={'default'}
+        onSearch={handleSearch}
+        setSearchResults={setSearchResults}
+        setSearchQuery={setSearchQuery}
+        setSearchClicked={setSearchClicked}
+        isSearchClicked={isSearchClicked}
+      />
       <div className="absolute bottom-8 z-10 right-0 left-0 m-auto pointer-events-none">
         <div className="w-[90%] lg:w-full lg:px-6 mx-auto flex items-center justify-between">
           {/* Add Seller Button */}
@@ -181,12 +189,14 @@ export default function Page({ params }: { params: { locale: string } }) {
             />
           </div>
         </div>
-        {showPopup && <ConfirmDialog
-          show={setShowPopup} 
-          onClose={()=> setShowPopup(false)}
-          message={t('HOME.SEARCH_CENTER_DEFAULT_MESSAGE')} 
-          url={`/map-center?entryType=search`}
-        />}
+        {showPopup && (
+          <ConfirmDialog
+            show={setShowPopup}
+            onClose={() => setShowPopup(false)}
+            message={t('HOME.SEARCH_CENTER_DEFAULT_MESSAGE')}
+            url={`/map-center?entryType=search`}
+          />
+        )}
       </div>
     </>
   );