[DO NOT MERGE] easy testing for jeremy

samples/localities-api-autocomplete-advanced/index.njk

@@ -7,7 +7,7 @@
             <em>Restrictions on "locality|postal_code|address", country "fr|gb|it|es|de"</em>
         </p>
         <div class="search-container">
-            <div id="autocomplete-container">
+            <div id="autocomplete-container" class="autocomplete-container">
                 {% svgIcon 'search.svg' %}
                 <input
                         type="text"
@@ -18,8 +18,17 @@
                 <button aria-label="Clear" class="clear-searchButton" type="button">
                     {% svgIcon 'clear.svg' %}
                 </button>
-                <ul id="suggestions-list"></ul>
+                <ul id="suggestions-list" class="suggestions-list"></ul>
+                <ul id="pr-suggestions-list" class="suggestions-list"></ul>
             </div>
+            <input
+                    type="text"
+                    id="secondary-target"
+                    value="1237"
+                    autocomplete="off"
+                    class="autocomplete-input"
+                    hint="PR number or empty for develop"
+                />
         </div>
         <pre id="response-container"></pre>
     </div>

samples/localities-api-autocomplete-advanced/index.ts

@@ -4,8 +4,12 @@ const woosmap_key = "YOUR_API_KEY";
 let debouncedAutocomplete: (
   ...args: any[]
 ) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
+let debouncedAutocompletePR: (
+  ...args: any[]
+) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
+let prSuggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let responseElement: HTMLElement;
 
@@ -29,6 +33,7 @@ function init(): void {
     inputElement.focus();
   });
   debouncedAutocomplete = debouncePromise(autocompleteAddress, 0);
+  debouncedAutocompletePR = debouncePromise(autocompleteAddressPR, 0);
 }
 
 function handleAutocomplete(): void {
@@ -45,33 +50,40 @@ function handleAutocomplete(): void {
         .catch((error) =>
           console.error("Error autocomplete localities:", error),
         );
+      debouncedAutocompletePR(input, componentsArgs, woosmap_key)
+        .then(({ localities }) => displaySuggestions(localities, prSuggestionsList))
+        .catch((error) =>
+          console.error("Error autocomplete localities:", error),
+        );
     } else {
       suggestionsList.style.display = "none";
+      prSuggestionsList.style.display = "none";
       clearSearchBtn.style.display = "none";
     }
   }
 }
 
 function displaySuggestions(
   localitiesPredictions: woosmap.map.localities.LocalitiesPredictions[],
+  container: HTMLUListElement = suggestionsList
 ) {
-  if (inputElement && suggestionsList) {
-    suggestionsList.innerHTML = "";
+  if (inputElement && container) {
+    container.innerHTML = "";
     if (localitiesPredictions.length > 0) {
       localitiesPredictions.forEach((locality) => {
         const li = document.createElement("li");
         li.innerHTML = formatPredictionList(locality) ?? "";
         li.addEventListener("click", () => {
           inputElement.value = locality.description ?? "";
-          suggestionsList.style.display = "none";
+          container.style.display = "none";
           displayLocalitiesResponse(locality);
         });
-        suggestionsList.appendChild(li);
+        container.appendChild(li);
       });
-      suggestionsList.style.display = "block";
+      container.style.display = "block";
       clearSearchBtn.style.display = "block";
     } else {
-      suggestionsList.style.display = "none";
+      container.style.display = "none";
     }
   }
 }
@@ -147,6 +159,37 @@ function autocompleteAddress(
   ).then((response) => response.json());
 }
 
+function getSecondaryUrl():string {
+  let secondary_target = document.getElementById("secondary-target") as HTMLInputElement
+  if (secondary_target && secondary_target.value) {
+    return `https://develop-api.woosmap.com/${secondary_target.value}`
+  }
+  return "https://develop-api.woosmap.com"
+}
+
+function autocompleteAddressPR(
+  input: string,
+  components: string,
+  woosmap_key: string,
+): Promise<woosmap.map.localities.LocalitiesAutocompleteResponse> {
+  const args = {
+    key: "woos-b2f35903-92d8-3a95-9b35-dd503c752a51",
+    input,
+    types: "locality|postal_code|address",
+    components: "country:fr|country:gb|country:it|country:es|country:de",
+  };
+
+  if (components !== "") {
+    if (args["components"]) {
+      args["components"] = components;
+    }
+  }
+
+  return fetch(
+    `${getSecondaryUrl()}/localities/autocomplete/?${buildQueryString(args)}`,
+  ).then((response) => response.json());
+}
+
 function buildQueryString(params: object) {
   const queryStringParts = [];
 
@@ -204,6 +247,9 @@ document.addEventListener("DOMContentLoaded", () => {
   suggestionsList = document.getElementById(
     "suggestions-list",
   ) as HTMLUListElement;
+  prSuggestionsList = document.getElementById(
+    "pr-suggestions-list",
+  ) as HTMLUListElement;
   clearSearchBtn = document.getElementsByClassName(
     "clear-searchButton",
   )[0] as HTMLButtonElement;

samples/localities-api-autocomplete-advanced/style.scss

@@ -2,8 +2,9 @@
 
 /* [START woosmap_localities_api_autocomplete_advanced] */
 @include meta.load-css("../../shared/scss/_default.scss");
-@include meta.load-css("../../shared/scss/_autocomplete_input.scss");
+/*@include meta.load-css("../../shared/scss/_autocomplete_input.scss");*/
 @include meta.load-css("../../shared/scss/_autocomplete_list.scss");
 @include meta.load-css("../../shared/scss/_autocomplete_without_map.scss");
+@include meta.load-css("../../shared/scss/_pr_test.scss");
 
 /* [END woosmap_localities_api_autocomplete_advanced] */

samples/localities-geocode/index.njk

@@ -1,24 +1,50 @@
+---json
+{
+"countries": [
+{ "code": "GB", "name": "United Kingdom", "selected": true },
+{ "code": "FR", "name": "France" },
+{ "code": "DZ", "name": "Algeria" }
+]
+}
+---
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="autocomplete-container">
-            {% svgIcon 'search.svg' %}
+        <div id="map"></div>
+        <div class="search-container">
+            <div id="autocomplete-container">
+                {% svgIcon 'search.svg' %}
+                <input
+                        type="text"
+                        id="autocomplete-input"
+                        placeholder="Geocode Localities..."
+                />
+               <button aria-label="Clear" class="clear-searchButton" type="button">
+                    {% svgIcon 'clear.svg' %}
+                </button>
+               <ul id="suggestions-list" class="suggestions-list"></ul>
+                <ul id="pr-suggestions-list" class="suggestions-list"></ul>
+            </div>
             <input
-                    type="text"
-                    id="autocomplete-input"
-                    placeholder="Geocode Localities..."
+                type="text"
+                id="secondary-target"
+                value="1216"
+                autocomplete="off"
+                class="autocomplete-input"
+                hint="PR number or empty for develop"
             />
-           <button aria-label="Clear" class="clear-searchButton" type="button">
-                {% svgIcon 'clear.svg' %}
-            </button>
+            {% include '../../src/_includes/country-selector.njk' %}
+            <div class="checkbox-container">
+                <input type="checkbox" id="list-sub-buildings" name="list-sub-buildings"/>
+                <label for="list-sub-buildings">reverse list sub buildings</label>
+            </div>
         </div>
-
         <div id="instructions">
             Enter an address to geocode or click on the map to reverse geocode.
         </div>
 
-        <div id="map"></div>
+
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}