homeflowjs 0.13.3 → 0.13.5

package/branches/branch-map/branch-map.component.jsx

@@ -30,22 +30,24 @@ class BranchMap extends React.Component {
     const {
       mapTypeControl,
       scrollWheel,
-      zoom,
+      defaultZoom,
       disableStreetview,
       custom,
       iconConfig,
       fullscreenControl,
       zoomControl,
+      googleMapsBranchZoomLevel,
     } = this.props;
 
     // Should this be added to Redux?
     const branch = Homeflow.get('branch');
+    const usedZoom = parseInt(googleMapsBranchZoomLevel || defaultZoom, 10);
 
     const options = {
       center: new google.maps.LatLng(branch.lat, branch.lng),
       mapTypeControl,
       scrollWheel,
-      zoom,
+      zoom: usedZoom,
       streetViewControl: !disableStreetview,
       fullscreenControl: false,
       zoomControl,
@@ -110,7 +112,7 @@ BranchMap.defaultProps = {
   mapTypeControl: false,
   scrollWheel: false,
   custom: null,
-  zoom: 15,
+  defaultZoom: 15,
   disableStreetview: false,
   google: false,
   iconConfig: null,
@@ -118,11 +120,15 @@ BranchMap.defaultProps = {
   zoomControl: false,
 };
 
+const mapStateToProps = (state) => ({
+  googleMapsBranchZoomLevel: state.app.themePreferences.googleMapsBranchZoomLevel,
+});
+
 const mapDispatchToProps = {
   initGoogleMaps,
 };
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps,
 )(BranchMap);

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.3",
+  "version": "0.13.5",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

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

@@ -80,6 +80,14 @@ export default class GeonamesMap extends DraggableMap {
      */
     setTimeout(() => {
       if (!this.markersInitialized) {
+        const { geonames, properties } = store.getState().properties
+        if (!properties && !geonames?.length) {
+          const place = store.getState().search.currentSearch?.place;
+          const { lat, lng } = place;
+          this.map.setView(new L.LatLng(lat, lng), 14);
+          this.onMapDrag();
+          this.hideLoader();
+        }
         this.setMarkerTypeforZoomLevel();
         this.setMarkers();
         this.setToMarkeredBounds();

package/properties/properties-map/map-loader.js

@@ -1,7 +1,7 @@
 export default `
 <div id="geonames-map-loader" class="js-geonames-map-loader geonames-map__loader-background">
   <div class="geonames-map__loader-inner">
-    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <svg width="100" height="100" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="gray">
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(1 1)" stroke-width="2">
           <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>