V1.1.0

languages/vsge-mapbox-block.pot

@@ -2,13 +2,13 @@
 # This file is distributed under the GPL-2.0-or-later license.
 msgid ""
 msgstr ""
-"Project-Id-Version: vsge-mapbox-block 1.0.1\n"
+"Project-Id-Version: vsge-mapbox-block 1.0.2\n"
 "Report-Msgid-Bugs-To: codekraft <EMAIL>\n"
 "MIME-Version: 1.0\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Content-Type: text/plain; charset=iso-8859-1\n"
 "Plural-Forms: nplurals=2; plural=(n!=1);\n"
-"POT-Creation-Date: 2024-06-23T23:13:00.505Z\n"
+"POT-Creation-Date: 2024-07-03T10:50:15.992Z\n"
 "PO-Revision-Date: 2024-MO-DA HO:MI+ZONE\n"
 "Last-Translator: codekraft <EMAIL>\n"
 "Language-Team: codekraft <EMAIL>\n"
@@ -61,7 +61,7 @@ msgid "Select a tag"
 msgstr ""
 
 #: src/components/Sortable/SortablePins.tsx:134
-#: src/components/Sortable/index.tsx:158
+#: src/components/Sortable/index.tsx:163
 msgid "New"
 msgstr ""
 
@@ -70,95 +70,99 @@ msgid "type"
 msgstr ""
 
 #: src/components/Sortable/SortablePins.tsx:165
-msgid "lat"
+msgid "long"
 msgstr ""
 
 #: src/components/Sortable/SortablePins.tsx:184
-msgid "lang"
+msgid "lat"
 msgstr ""
 
 #: src/components/Sortable/SortablePins.tsx:218
-msgid "Add Pin"
+msgid "Get position from map"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:227
+#: src/components/Sortable/SortablePins.tsx:230
 msgid "Name"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:242
+#: src/components/Sortable/SortablePins.tsx:245
 msgid "Company"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:257
+#: src/components/Sortable/SortablePins.tsx:260
 #: src/components/Popup/PopupContent.tsx:65
 msgid "Phone"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:271
+#: src/components/Sortable/SortablePins.tsx:274
 #: src/components/Popup/PopupContent.tsx:70
 msgid "Mobile"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:285
+#: src/components/Sortable/SortablePins.tsx:288
 #: src/components/Sidebar/Listing.tsx:149
 #: src/components/Popup/PopupContent.tsx:87
 msgid "Email"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:299
+#: src/components/Sortable/SortablePins.tsx:302
 msgid "website"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:313
+#: src/components/Sortable/SortablePins.tsx:316
 msgid "City"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:327
+#: src/components/Sortable/SortablePins.tsx:330
 msgid "Country"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:341
+#: src/components/Sortable/SortablePins.tsx:344
 msgid "Postal Code"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:355
+#: src/components/Sortable/SortablePins.tsx:358
 msgid "Country Code"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:369
+#: src/components/Sortable/SortablePins.tsx:372
+msgid "Preferred area"
+msgstr ""
+
+#: src/components/Sortable/SortablePins.tsx:396
 msgid "Address"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:422
+#: src/components/Sortable/SortablePins.tsx:449
 msgid "Filters"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:482
+#: src/components/Sortable/SortablePins.tsx:509
 msgid "Select a Marker"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:490
+#: src/components/Sortable/SortablePins.tsx:517
 msgid "Default"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:520
+#: src/components/Sortable/SortablePins.tsx:547
 msgid "Marker"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:568
+#: src/components/Sortable/SortablePins.tsx:595
 msgid "Reset"
 msgstr ""
 
-#: src/components/Sortable/SortablePins.tsx:577
+#: src/components/Sortable/SortablePins.tsx:604
 msgid "Save"
 msgstr ""
 
 #: src/components/Sortable/index.tsx:17
-#: src/components/Sortable/index.tsx:133
+#: src/components/Sortable/index.tsx:138
 msgid "New Marker"
 msgstr ""
 
-#: src/components/Sortable/index.tsx:229
+#: src/components/Sortable/index.tsx:234
 #: src/components/Edit/EditPanelIcons.tsx:119
 msgid "Add new"
 msgstr ""

package.json

@@ -68,7 +68,8 @@
     "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@mapbox/mapbox-gl-language": "^1.0.1",
     "@turf/turf": "^6.5.0",
-    "mapbox-gl": "^3.4.0"
+    "mapbox-gl": "^3.4.0",
+    "iso3166-helper": "^1.0.1"
   },
   "browserslist": [
     "extends @wordpress/browserslist-config"

src/components/Geocoder/init.ts

@@ -11,6 +11,7 @@ import { DEFAULT_GEOCODER_TYPE_SEARCH } from '../../constants';
 import { initGeoMarker } from '../Marker/Geomarker';
 import './style.scss';
 import type mapboxgl from 'mapbox-gl';
+import { filterByPreferredArea, getCurrentContext } from './utils';
 
 /**
  * Initializes the geocoder for the map.
@@ -22,7 +23,6 @@ import type mapboxgl from 'mapbox-gl';
  * @param                                              markersRef          - The ref object for the markers' container.
  * @param {HTMLDivElement}                             geocoderRef         - The ref object for the geocoder container.
  * @param {MapBoxListing[]}                            listings            - The array of mapbox listings.
- * @param {MapBoxListing[]}                            filteredListings    - The array of filtered mapbox listings.
  * @param {(listings: MapBoxListing[] | null) => void} setFilteredListings - The function to set the filtered listings.
  * @param                                              mapDefaults
  * @return {MapboxGeocoder | undefined} The initialized Mapbox geocoder.
@@ -105,6 +105,13 @@ export function initGeoCoder(
 					listings
 				);
 
+				const currentArea = getCurrentContext( searchResult );
+
+				const preferredStores = filterByPreferredArea(
+					currentArea,
+					sortedNearestStores
+				);
+
 				// @ts-ignore
 				const geoMarker = geocoder.mapMarker;
 
@@ -139,7 +146,9 @@ export function initGeoCoder(
 							type: 'Point',
 						},
 					},
-					sortedNearestStores,
+					preferredStores.length
+						? preferredStores
+						: sortedNearestStores,
 					mapRef,
 					map
 				);

src/components/Geocoder/style.scss

@@ -19,7 +19,7 @@
 			padding: 6px var(--wp--preset--spacing--40) 6px 48px;
 
 			@media (max-width: 600px) {
-				font-size: 0.25rem;
+				font-size: var(--wp--preset--font-size--small);
 			}
 		}
 

src/components/Geocoder/utils.ts

@@ -0,0 +1,80 @@
+import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import { MapBoxListing } from '../../types';
+import { isChildOf } from 'iso3166-helper';
+/**
+ * The geocoder entry context
+ */
+export type CurrentContext = {
+	[ key: string ]: {
+		id?: string;
+		mapbox_id?: string;
+		wikidata?: string;
+		short_code: string;
+		text?: string;
+		language?: string;
+	};
+};
+
+/**
+ * Parse the geocoder results to get the context data
+ *
+ * @param searchResult The mapbox geocoder results
+ */
+export function getCurrentContext(
+	searchResult: MapboxGeocoder.Result
+): CurrentContext {
+	// parse the current pointer area to get the country and the region
+	const currentArea: CurrentContext = {};
+
+	if ( searchResult.place_type.includes( 'region' ) ) {
+		currentArea.region = {
+			...( searchResult.properties as {
+				mapbox_id: string;
+				wikidata: string;
+				short_code: string;
+			} ),
+			text: searchResult.text,
+		};
+	}
+	// loop into context in order the search the entries that were holding the region and the country
+	searchResult.context?.forEach( ( contextItem ) => {
+		const id = contextItem.id.split( '.' );
+		if ( id[ 0 ] === 'region' || id[ 0 ] === 'country' ) {
+			currentArea[ id[ 0 ] ] = contextItem;
+		}
+	} );
+
+	return currentArea;
+}
+
+/**
+ * Filters the sorted stores and returns the results that are compatible with the context
+ * @param currentContext        The geocoder current region
+ * @param currentContext.region The geocoder current region
+ * @param stores                the stores collection
+ *
+ * @return the filtered stores
+ */
+export function filterByPreferredArea(
+	currentContext: { region: CurrentContext[ 'region' ] },
+	stores: MapBoxListing[]
+): MapBoxListing[] {
+	/** @member preferredStores the list of the stores that should be shown because related to the area of the search */
+	const preferredStores: MapBoxListing[] = [];
+	stores?.forEach( ( currentStore: MapBoxListing ) => {
+		// the reseller preferred area
+		const prefArea = currentStore.properties.preferredArea;
+		if ( prefArea && prefArea.length ) {
+			prefArea.forEach( ( storeRegion ) => {
+				// check if the current position matches the reseller preferred area
+				if (
+					currentContext.region.short_code === storeRegion ||
+					isChildOf( currentContext.region.short_code, storeRegion )
+				) {
+					preferredStores.push( currentStore );
+				}
+			} );
+		}
+	} );
+	return preferredStores;
+}

src/components/Mapbox/index.tsx

@@ -296,6 +296,8 @@ export function MapBox( {
 			// Set the ready state of the map
 			map.current.on( 'load', () => {
 				setLoaded( true );
+				// make sure the map is loaded before resizing to match the wrapper size
+				map.current.resize();
 			} );
 		}
 	}, [ mapRef?.current ] );