homeflowjs 0.13.4 → 0.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/instant-valuation/instant-valuation/instant-valuation.component.jsx +2 -19
- package/instant-valuation/instant-valuation/instant-valuation.styles.scss +0 -1
- package/instant-valuation/result-step/result-step.component.jsx +2 -2
- package/instant-valuation/result-step/valuation-map.component.jsx +1 -1
- package/package.json +1 -1
- package/properties/properties-map/geonames-map.js +21 -0
@@ -8,7 +8,6 @@ import { flatten } from 'q-flat';
|
|
8
8
|
|
9
9
|
import IntroStep from '../intro-step/intro-step.component';
|
10
10
|
import YourDetailsStep from '../your-details-step/your-details-step.component';
|
11
|
-
import SimilarPropertiesStep from '../similar-properties-step/similar-properties-step.component';
|
12
11
|
import ResultStep from '../result-step/result-step.component';
|
13
12
|
import { DEBOUNCE_DELAY } from '../../utils';
|
14
13
|
|
@@ -19,7 +18,6 @@ const INITIAL_STATE = {
|
|
19
18
|
loading: false,
|
20
19
|
addresses: [],
|
21
20
|
message: null,
|
22
|
-
similarProperties: [],
|
23
21
|
recentSales: [],
|
24
22
|
search: {
|
25
23
|
paon: '',
|
@@ -55,8 +53,7 @@ const INITIAL_STATE = {
|
|
55
53
|
const stepComponents = {
|
56
54
|
1: IntroStep,
|
57
55
|
2: YourDetailsStep,
|
58
|
-
3:
|
59
|
-
4: ResultStep,
|
56
|
+
3: ResultStep,
|
60
57
|
};
|
61
58
|
|
62
59
|
class InstantValuation extends Component {
|
@@ -80,8 +77,6 @@ class InstantValuation extends Component {
|
|
80
77
|
|
81
78
|
this.updateState = this.updateState.bind(this);
|
82
79
|
this.setStep = this.setStep.bind(this);
|
83
|
-
this.getSimilarProperties = this.getSimilarProperties.bind(this);
|
84
|
-
this.toggleSimilarProperty = this.toggleSimilarProperty.bind(this);
|
85
80
|
this.getValuation = this.getValuation.bind(this);
|
86
81
|
this.addressLookup = debounce(this.addressLookup, DEBOUNCE_DELAY).bind(this);
|
87
82
|
this.reset = this.reset.bind(this);
|
@@ -92,14 +87,6 @@ class InstantValuation extends Component {
|
|
92
87
|
this.setState({ step });
|
93
88
|
}
|
94
89
|
|
95
|
-
getSimilarProperties() {
|
96
|
-
this.setState({ loading: true });
|
97
|
-
const { search } = this.state;
|
98
|
-
fetch(`/properties/similar_properties?bedrooms=${search.bedrooms}&postcode=${search.postcode}&channel=sales`)
|
99
|
-
.then((response) => response.json())
|
100
|
-
.then((json) => this.setState({ similarProperties: json, loading: false }));
|
101
|
-
}
|
102
|
-
|
103
90
|
getRecentSales() {
|
104
91
|
const { search: { postcode, property_type } } = this.state;
|
105
92
|
|
@@ -252,7 +239,6 @@ class InstantValuation extends Component {
|
|
252
239
|
search,
|
253
240
|
lead,
|
254
241
|
message,
|
255
|
-
similarProperties,
|
256
242
|
valuation,
|
257
243
|
recentSales,
|
258
244
|
loading,
|
@@ -267,7 +253,7 @@ class InstantValuation extends Component {
|
|
267
253
|
return (
|
268
254
|
<div
|
269
255
|
className="instant-valuation hf-modal"
|
270
|
-
style={step ===
|
256
|
+
style={step === 3 ? largeModalStyles : {}}
|
271
257
|
>
|
272
258
|
<div id="valuation-section">
|
273
259
|
<Link to="/" className="valuations-modal-close">
|
@@ -291,9 +277,6 @@ class InstantValuation extends Component {
|
|
291
277
|
addressLookup={this.addressLookup}
|
292
278
|
message={message}
|
293
279
|
setStep={this.setStep}
|
294
|
-
similarProperties={similarProperties}
|
295
|
-
getSimilarProperties={this.getSimilarProperties}
|
296
|
-
toggleSimilarProperty={this.toggleSimilarProperty}
|
297
280
|
getValuation={this.getValuation}
|
298
281
|
valuation={valuation}
|
299
282
|
recentSales={recentSales}
|
@@ -149,7 +149,7 @@ const ResultStep = ({
|
|
149
149
|
</div>
|
150
150
|
)}
|
151
151
|
|
152
|
-
<ValuationMap recentSales={recentSales} />
|
152
|
+
{ recentSales && <ValuationMap recentSales={recentSales} /> }
|
153
153
|
|
154
154
|
<div style={{ clear: 'both' }} />
|
155
155
|
|
@@ -158,7 +158,7 @@ const ResultStep = ({
|
|
158
158
|
<p>These properties near you were sold recently.</p>
|
159
159
|
|
160
160
|
<ul id="recently-sold-list">
|
161
|
-
{recentSales
|
161
|
+
{recentSales?.map((property) => recentSale(property))}
|
162
162
|
</ul>
|
163
163
|
</div>
|
164
164
|
|
@@ -21,7 +21,7 @@ const ValuationMap = ({ recentSales }) => {
|
|
21
21
|
parseFloat(recentSales[0].longitude),
|
22
22
|
]);
|
23
23
|
|
24
|
-
const markers = recentSales
|
24
|
+
const markers = recentSales?.map((property) => {
|
25
25
|
bounds.extend([property.latitude, property.longitude]);
|
26
26
|
|
27
27
|
return (
|
package/package.json
CHANGED
@@ -252,6 +252,18 @@ export default class GeonamesMap extends DraggableMap {
|
|
252
252
|
this.propertiesLayer.addTo(this.map);
|
253
253
|
}
|
254
254
|
|
255
|
+
popup(marker) {
|
256
|
+
const formatter = Intl.NumberFormat('en', { notation: 'compact' });
|
257
|
+
const priceValue = marker?.property?.price_value;
|
258
|
+
const formattedPrice = priceValue ? formatter.format(priceValue) : null;
|
259
|
+
|
260
|
+
if (!priceValue) return;
|
261
|
+
|
262
|
+
return `
|
263
|
+
<div class="geomap__property-popup">£${formattedPrice}</div>
|
264
|
+
`;
|
265
|
+
}
|
266
|
+
|
255
267
|
generateMarker(propertyOrGeoname) {
|
256
268
|
const marker = L.marker(
|
257
269
|
[propertyOrGeoname.lat, propertyOrGeoname.lng],
|
@@ -268,6 +280,15 @@ export default class GeonamesMap extends DraggableMap {
|
|
268
280
|
}
|
269
281
|
});
|
270
282
|
|
283
|
+
marker.on('mouseover', (e) => {
|
284
|
+
if (!marker?.property) return;
|
285
|
+
|
286
|
+
L.popup({ closeButton: false, offset: [0, -40] })
|
287
|
+
.setLatLng(e.latlng)
|
288
|
+
.setContent(this.popup(marker))
|
289
|
+
.openOn(this.map)
|
290
|
+
});
|
291
|
+
|
271
292
|
if (Homeflow.get('show_geoname_polygon_on_mouseover') && propertyOrGeoname.polygon?.length) {
|
272
293
|
marker.on('mouseover', () => this.geonameMarkerMouseOver(marker));
|
273
294
|
marker.on('mouseout', () => this.geonameMarkerMouseOut(marker));
|