homeflowjs 0.13.4 → 0.13.6

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

@@ -8,7 +8,6 @@ import { flatten } from 'q-flat';
 
 import IntroStep from '../intro-step/intro-step.component';
 import YourDetailsStep from '../your-details-step/your-details-step.component';
-import SimilarPropertiesStep from '../similar-properties-step/similar-properties-step.component';
 import ResultStep from '../result-step/result-step.component';
 import { DEBOUNCE_DELAY } from '../../utils';
 
@@ -19,7 +18,6 @@ const INITIAL_STATE = {
   loading: false,
   addresses: [],
   message: null,
-  similarProperties: [],
   recentSales: [],
   search: {
     paon: '',
@@ -55,8 +53,7 @@ const INITIAL_STATE = {
 const stepComponents = {
   1: IntroStep,
   2: YourDetailsStep,
-  3: SimilarPropertiesStep,
-  4: ResultStep,
+  3: ResultStep,
 };
 
 class InstantValuation extends Component {
@@ -80,8 +77,6 @@ class InstantValuation extends Component {
 
     this.updateState = this.updateState.bind(this);
     this.setStep = this.setStep.bind(this);
-    this.getSimilarProperties = this.getSimilarProperties.bind(this);
-    this.toggleSimilarProperty = this.toggleSimilarProperty.bind(this);
     this.getValuation = this.getValuation.bind(this);
     this.addressLookup = debounce(this.addressLookup, DEBOUNCE_DELAY).bind(this);
     this.reset = this.reset.bind(this);
@@ -92,14 +87,6 @@ class InstantValuation extends Component {
     this.setState({ step });
   }
 
-  getSimilarProperties() {
-    this.setState({ loading: true });
-    const { search } = this.state;
-    fetch(`/properties/similar_properties?bedrooms=${search.bedrooms}&postcode=${search.postcode}&channel=sales`)
-      .then((response) => response.json())
-      .then((json) => this.setState({ similarProperties: json, loading: false }));
-  }
-
   getRecentSales() {
     const { search: { postcode, property_type } } = this.state;
 
@@ -252,7 +239,6 @@ class InstantValuation extends Component {
       search,
       lead,
       message,
-      similarProperties,
       valuation,
       recentSales,
       loading,
@@ -267,7 +253,7 @@ class InstantValuation extends Component {
     return (
       <div
         className="instant-valuation hf-modal"
-        style={step === 4 ? largeModalStyles : {}}
+        style={step === 3 ? largeModalStyles : {}}
       >
         <div id="valuation-section">
           <Link to="/" className="valuations-modal-close">
@@ -291,9 +277,6 @@ class InstantValuation extends Component {
             addressLookup={this.addressLookup}
             message={message}
             setStep={this.setStep}
-            similarProperties={similarProperties}
-            getSimilarProperties={this.getSimilarProperties}
-            toggleSimilarProperty={this.toggleSimilarProperty}
             getValuation={this.getValuation}
             valuation={valuation}
             recentSales={recentSales}

package/instant-valuation/instant-valuation/instant-valuation.styles.scss

@@ -290,7 +290,6 @@
 #valuation-section #price_1 {
   font-size: 3rem;
   margin: 20px 50px;
-  background-color: white;
 }
 
 #valuation-section #valuation-wrapper {

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

@@ -149,7 +149,7 @@ const ResultStep = ({
             </div>
           )}
 
-          <ValuationMap recentSales={recentSales} />
+          { recentSales && <ValuationMap recentSales={recentSales} /> }
 
           <div style={{ clear: 'both' }} />
 
@@ -158,7 +158,7 @@ const ResultStep = ({
             <p>These properties near you were sold recently.</p>
 
             <ul id="recently-sold-list">
-              {recentSales.map((property) => recentSale(property))}
+              {recentSales?.map((property) => recentSale(property))}
             </ul>
           </div>
 

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

@@ -21,7 +21,7 @@ const ValuationMap = ({ recentSales }) => {
     parseFloat(recentSales[0].longitude),
   ]);
 
-  const markers = recentSales.map((property) => {
+  const markers = recentSales?.map((property) => {
     bounds.extend([property.latitude, property.longitude]);
 
     return (

package/package.json

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

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

@@ -252,6 +252,18 @@ export default class GeonamesMap extends DraggableMap {
     this.propertiesLayer.addTo(this.map);
   }
 
+  popup(marker) {
+    const formatter = Intl.NumberFormat('en', { notation: 'compact' });
+    const priceValue = marker?.property?.price_value;
+    const formattedPrice = priceValue ? formatter.format(priceValue) : null;
+
+    if (!priceValue) return;
+
+    return `
+      <div class="geomap__property-popup">£${formattedPrice}</div>
+    `;
+  }
+
   generateMarker(propertyOrGeoname) {
     const marker = L.marker(
       [propertyOrGeoname.lat, propertyOrGeoname.lng],
@@ -268,6 +280,15 @@ export default class GeonamesMap extends DraggableMap {
       }
     });
 
+    marker.on('mouseover', (e) => {
+      if (!marker?.property) return;
+
+      L.popup({ closeButton: false, offset: [0, -40] })
+        .setLatLng(e.latlng)
+        .setContent(this.popup(marker))
+        .openOn(this.map)
+    });
+
     if (Homeflow.get('show_geoname_polygon_on_mouseover') && propertyOrGeoname.polygon?.length) {
       marker.on('mouseover', () => this.geonameMarkerMouseOver(marker));
       marker.on('mouseout', () => this.geonameMarkerMouseOut(marker));