Feat/implement search bar mapcenter (#167)

* Declare leaflet-control-geocoder in type definitions

* Refactor SearchBar to accept onSearch and placeholder as props

* Integrate SearchBar component into MapCenter with geocoding functionality

* Add default placeholder text to SearchBar component

* Use dynamic translation keys for search text in MapCenter

* Improve error handling with optional chaining in error response

* Introduce placeholder text for search bar in Map Center across all translation files

* Set map reference using whenCreated in MapContainer

* Update Map Setup to Fix Type Error

* Misc PR adjustments; placeholder mapping; cleanup.

---------

Co-authored-by: Darin Hajou <[email protected]>
Co-authored-by: swoocn <[email protected]>

Author: DarinHajou

messages/en-GB.json

@@ -198,6 +198,7 @@
       }
     },
     "MAP_CENTER": {
+      "SEARCH_BAR_PLACEHOLDER": "Search a location, city, or address",
       "VALIDATION": {
         "SEARCH_CENTER_SUCCESS_MESSAGE": "Your Search Centre has been saved successfully"
       }

messages/en.json

@@ -197,6 +197,7 @@
       }
     },
     "MAP_CENTER": {
+      "SEARCH_BAR_PLACEHOLDER": "Search a location, city, or address",
       "VALIDATION": {
         "SEARCH_CENTER_SUCCESS_MESSAGE": "Your Search Center has been saved successfully"
       }

messages/es.json

@@ -197,8 +197,9 @@
       }
     },
     "MAP_CENTER": {
+      "SEARCH_BAR_PLACEHOLDER": "Buscar una ubicación, ciudad o dirección",
       "VALIDATION": {
-        "SEARCH_CENTER_SUCCESS_MESSAGE": "Tu Centro de Búsqueda se ha guardado exitosamente"
+        "SEARCH_CENTER_SUCCESS_MESSAGE": "Tu centro de búsqueda se ha guardado correctamente"
       }
     },
     "LOADING_SCREEN_MESSAGE": "Cargando datos...",

messages/ewe-BJ.json

@@ -197,8 +197,9 @@
       }
     },
     "MAP_CENTER": {
+      "SEARCH_BAR_PLACEHOLDER": "Nemo wuri, gari ko adireshi",
       "VALIDATION": {
-        "SEARCH_CENTER_SUCCESS_MESSAGE": "Wòɖeɖeɖe gbãtɔwo le mɔ be yé kpɔ̃ nɔ"
+        "SEARCH_CENTER_SUCCESS_MESSAGE": "Nye dzi tsɔtɔ wɔm o"
       }
     },
     "LOADING_SCREEN_MESSAGE": "Ɣe siwo...",

messages/ko.json

@@ -197,6 +197,7 @@
       }
     },
     "MAP_CENTER": {
+      "SEARCH_BAR_PLACEHOLDER": "위치, 도시 또는 주소 검색",
       "VALIDATION": {
         "SEARCH_CENTER_SUCCESS_MESSAGE": "검색 센터가 성공적으로 저장되었습니다"
       }

package-lock.json

@@ -21,15 +21,16 @@
     "@pinetwork-js/sdk": "^0.7.0",
     "@sentry/browser": "^8.26.0",
     "@sentry/nextjs": "^8.26.0",
-    "@sentry/node": "^8.26.0",
-    "axios": "^1.7.2",
+    "@sentry/node": "^8.27.0",
+    "axios": "^1.7.5",
     "clsx": "^2.1.1",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "i18next": "^23.11.3",
     "js-cookie": "^3.0.5",
     "leaflet": "^1.9.4",
+    "leaflet-control-geocoder": "^2.4.0",
     "leaflet-geosearch": "^3.11.1",
     "loglevel": "^1.9.1",
     "next": "^14.2.4",

package.json

@@ -76,7 +76,7 @@ export default function Index() {
   return (
     <>
       <DynamicMap center={[mapCenter.lat, mapCenter.lng]} zoom={zoomLevel} />
-      <SearchBar />
+      <SearchBar page={'default'} />
       <div className="absolute bottom-8 z-10 flex justify-between gap-[22px] px-6 right-0 left-0 m-auto">
         <Link href="/seller/registration">
           <Button