homeflowjs 0.13.43 → 0.13.45

package/instant-valuation/instant-valuation/instant-valuation.component.jsx

@@ -25,6 +25,8 @@ const INITIAL_STATE = {
     properties: [],
     property_type: '',
     bedrooms: '',
+    lat: '',
+    lng: '',
   },
   lead: {
     first_name: '',
@@ -122,6 +124,7 @@ class InstantValuation extends Component {
       lead_url_referrer: referrerURL,
     };
 
+
     const params = flatten({ search: restOfSearch, lead });
 
     const query = new URLSearchParams(params);
@@ -200,6 +203,11 @@ class InstantValuation extends Component {
             ...prevState.lead,
             full_address: this.constructor.formatAddress(json.Addresses[0]),
           },
+          search: {
+            ...prevState.search,
+            lat: json.Latitude,
+            lng: json.Longitude,
+          },
         }));
 
         return null;

package/instant-valuation/result-step/result-step.component.jsx

@@ -149,18 +149,20 @@ const ResultStep = ({
             </div>
           )}
 
-          {!!recentSales?.length && <ValuationMap recentSales={recentSales} />}
+          <ValuationMap recentSales={recentSales} search={search} />
 
           <div style={{ clear: 'both' }} />
 
-          <div className="recently-sold">
-            <h3>Recently sold in the area</h3>
-            <p>These properties near you were sold recently.</p>
+          {!!recentSales?.length && (
+            <div className="recently-sold">
+              <h3>Recently sold in the area</h3>
+              <p>These properties near you were sold recently.</p>
 
-            <ul id="recently-sold-list">
-              {recentSales?.map((property) => recentSale(property))}
-            </ul>
-          </div>
+              <ul id="recently-sold-list">
+                {recentSales?.map((property) => recentSale(property))}
+              </ul>
+            </div>
+          )}
 
           <div className="clear" />
         </div>

package/instant-valuation/result-step/valuation-map.component.jsx

@@ -9,19 +9,21 @@ import {
 
 import '../../properties/properties-map/leaflet.css';
 
-const ValuationMap = ({ recentSales }) => {
+const ValuationMap = ({ recentSales, search }) => {
+  if (!recentSales.length && !search.lat && !search.lng) return null;
+
   const defaultIcon = L.icon({
     iconRetinaUrl: '/assets/marker-icon.png',
     iconUrl: '/assets/marker-icon.png',
     shadowUrl: '/assets/marker-shadow.png',
   });
 
-  const bounds = latLngBounds([
+  const bounds = recentSales?.length ? latLngBounds([
     parseFloat(recentSales[0].latitude),
     parseFloat(recentSales[0].longitude),
-  ]);
+  ]) : null;
 
-  const markers = recentSales?.map((property) => {
+  const markers = recentSales?.length ? recentSales?.map((property) => {
     bounds.extend([property.latitude, property.longitude]);
 
     return (
@@ -31,11 +33,17 @@ const ValuationMap = ({ recentSales }) => {
         icon={defaultIcon}
       />
     );
-  });
+  }) : (
+    <Marker
+      position={[search.lat, search.lng]}
+      icon={defaultIcon}
+    />
+  );
 
   return (
     <MapContainer
-      bounds={bounds}
+      {...(!!recentSales.length && bounds && { bounds })}
+      {...(!recentSales.length && { center: [search.lat, search.lng], zoom: 14 })}
       scrollWheelZoom={false}
       style={{ height: 300 }}
     >
@@ -50,6 +58,14 @@ const ValuationMap = ({ recentSales }) => {
 
 ValuationMap.propTypes = {
   recentSales: PropTypes.array.isRequired,
+  search: PropTypes.shape({
+    lat: PropTypes.number,
+    lng: PropTypes.number,
+  }),
+};
+
+ValuationMap.defaultProps = {
+  search: null,
 };
 
 export default ValuationMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.13.43",
+  "version": "0.13.45",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/properties/properties-map/geonames-map.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import DraggableMap from './draggable-map';
 import store from '../../store';
-import { currentGeonameId, filterGeonames } from '../../utils/index';
+import { currentGeonameId, filterGeonames, uniqueGeonamesByNameAndArea } from '../../utils/index';
 import { setProperties, setGeonames, setSelectedMarker } from '../../actions/properties.actions';
 import { setInitialSearch, setPlace, setSearchField } from '../../actions/search.actions';
 import { buildQueryString } from '../../search/property-search/property-search';
@@ -283,11 +283,20 @@ export default class GeonamesMap extends DraggableMap {
     if (json.geonames) {
       this.geonames = this.concatenateDistinctObjects('geoname_id', this.geonames, json.geonames);
       window.markerType = 'geonames';
-      const currentAreaId = store.getState().search.currentSearch?.place?.area;
-      const geonamesFiltered = filterGeonames(
-        this.currentGeonameIdFromLocationPath, Number(currentAreaId), this.geonames
-      );
-      store.dispatch(setGeonames(geonamesFiltered));
+
+      const currentSearchPlace = store.getState().search.currentSearch?.place;
+      const geonamePosition = currentSearchPlace?.geoname_position || null;
+      const area = currentSearchPlace?.area || null;
+      
+      let geonamesToDisplay = uniqueGeonamesByNameAndArea(this.geonames);
+
+      if (geonamePosition || area) {
+        geonamesToDisplay = filterGeonames(
+          this.currentGeonameIdFromLocationPath, Number(area), Number(geoname_position), geonamesToDisplay
+        );
+
+      }
+      store.dispatch(setGeonames(geonamesToDisplay));
     } else if (json.properties) {
       this.properties = this.concatenateDistinctObjects('property_id', this.properties, json.properties);
       window.markerType = 'properties';
@@ -310,11 +319,20 @@ export default class GeonamesMap extends DraggableMap {
       this.hideSuggestedDestinations();
       this.markersInitialized = true;
     } else if (window.markerType === 'geonames' && this.geonames?.length) {
-      const currentAreaId = store.getState().search.currentSearch?.place?.area;
-      const geonamesFiltered = filterGeonames(
-        this.currentGeonameIdFromLocationPath, Number(currentAreaId), this.geonames
-      );
-      geonamesFiltered.forEach(geoname => this.setGeonameMarker(geoname));
+      const currentSearchPlace = store.getState()?.search?.currentSearch?.place;
+      
+      const geonamePosition = currentSearchPlace?.geoname_position || null;
+      const area = currentSearchPlace?.area || null;
+
+      let geonamesToDisplay = uniqueGeonamesByNameAndArea(this.geonames);
+
+      if (geonamePosition || area) {
+        geonamesToDisplay = filterGeonames(
+          this.currentGeonameIdFromLocationPath, Number(area), Number(geonamePosition), geonamesToDisplay
+        );
+      }
+
+      geonamesToDisplay.forEach(geoname => this.setGeonameMarker(geoname));
       this.showSuggestedDestinations();
       this.markersInitialized = true;
     }

package/utils/index.js

@@ -93,10 +93,42 @@ export const currentGeonameId = (path) => {
 
 export const DEBOUNCE_DELAY = 200;
 
-export const filterGeonames = (geonameId = null, areaId = null, geonames) => {
+export const filterGeonames = (geonameId = null, areaId = null, geoPosition = null, geonames) => {
   if (!geonameId) return geonames;
 
-  if (areaId) return geonames.filter((geoname) => geoname?.geoname_id !== geonameId && geoname?.area < areaId);
-
-  return geonames.filter((geoname) => geoname?.geoname_id !== geonameId);
+  // Filter our same id
+  let filtered = geonames.filter((geoname) => geoname?.geoname_id !== geonameId);
+  
+  // Filter out higher area
+  if (areaId && !geoPosition) filtered = filtered.filter((geoname) => geoname?.area < areaId);
+  
+  // Filter out lower geoname_position
+  if (geoPosition) filtered = filtered.filter((geoname) => {
+    // Fallback to area if no geoname_position
+    if (
+      geoname?.geoname_position === 0
+      && geoname?.area
+      && geoname?.area !== 0
+      && areaId
+    ) return geoname?.area < areaId;
+    return geoname?.geoname_position > geoPosition;
+  });
+  
+  return filtered;
 };
+
+export const uniqueGeonamesByNameAndArea = (geonames) => {
+  // One of the duplicated Geonames comes with geoname_position set as 0
+  // First set the one with geoname_position = 0 before the one with actual value, ordered by properties_count (as the response).
+  const sortByNameAndGeonamePosition = geonames.sort(
+    (first, second) => {
+      if (first.name === second.name) return first?.geoname_position - second?.geoname_position;
+      return first.properties_count > second.properties_count ? -1 : 1;
+    }
+  );
+  // Then remove duplicates by name
+  const uniqueNamesOnly =  [...new Map(sortByNameAndGeonamePosition.map(item => [item['name'], item])).values()];
+
+  // Finally remove if they have the same area
+  return [...new Map(uniqueNamesOnly.map(item => [item['area'], item])).values()]
+};