homeflowjs 0.12.17 → 0.12.18

package/actions/properties.actions.js

@@ -14,7 +14,18 @@ export const setPropertyLinksAsync = () => (dispatch) => {
   const searchHistory = localStorage.getItem('searchHistory');
   if (!searchHistory) return null;
 
-  const lastSearch = JSON.parse(searchHistory)[0];
+  const parsedSearchHistory = JSON.parse(searchHistory);
+  if (!Array.isArray(parsedSearchHistory)) return null;
+
+  const validateSearch = (search) =>
+    (!search.isQuerySearch && search?.q)
+    || search?.place
+    || (search.isQuerySearch && search?.placeId)
+    || (search.isQuerySearch && search?.poly);
+
+  const filteredSearchHistory = parsedSearchHistory.filter(validateSearch)
+  if (!filteredSearchHistory?.length) return null;
+  const lastSearch = filteredSearchHistory[0];
   const { place, ...restOfSearch } = lastSearch;
   const searchURL = `/search.ljson?${buildQueryString(restOfSearch)}`;
 
@@ -23,14 +34,18 @@ export const setPropertyLinksAsync = () => (dispatch) => {
     prev: '',
   };
 
+  const getPropertyUrl = (property) => property?.property_url || property?.url;
+
   fetch(searchURL)
     .then((response) => response.json())
     .then(({ properties }) => {
+      if (!properties) return;
+
       const index = properties.findIndex((prop) => prop.property_id === Homeflow.get('property').property_id);
       // if there is a next and previous property in page, set those
       if (properties[index + 1] && properties[index - 1]) {
-        propertyLinks.next = properties[index + 1].property_url;
-        propertyLinks.prev = properties[index - 1].property_url;
+        propertyLinks.next = getPropertyUrl(properties[index + 1]);
+        propertyLinks.prev = getPropertyUrl(properties[index - 1]);
 
         return dispatch(setPropertyLinks(propertyLinks));
       }
@@ -38,7 +53,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
       // if there is no next but there is a previous, conduct search for next page
       // but use previous
       if (!properties[index + 1] && properties[index - 1]) {
-        propertyLinks.prev = properties[index - 1].property_url;
+        propertyLinks.prev = getPropertyUrl(properties[index - 1]);
 
         const nextSearch = {
           ...restOfSearch,
@@ -52,7 +67,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
             if (!properties) {
               propertyLinks.next = '';
             } else {
-              propertyLinks.next = properties[0].property_url;
+              propertyLinks.next = getPropertyUrl(properties[0]);
             }
 
             return dispatch(setPropertyLinks(propertyLinks));
@@ -62,7 +77,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
       // if there is no previous but there is a next, conduct search for previous page
       // but use next
       if (!properties[index - 1] && properties[index + 1]) {
-        propertyLinks.next = properties[index + 1].property_url;
+        propertyLinks.next = getPropertyUrl(properties[index + 1]);
 
         const nextSearch = {
           ...restOfSearch,
@@ -83,7 +98,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
             if (!properties) {
               propertyLinks.prev = '';
             } else {
-              propertyLinks.prev = properties[properties.length - 1].property_url;
+              propertyLinks.prev = getPropertyUrl(properties[properties.length - 1]);
             }
 
             return dispatch(setPropertyLinks(propertyLinks));

package/app/hf-initialize.jsx

@@ -105,11 +105,14 @@ const hfInitialize = () => {
     store.dispatch(setArticles(Homeflow.get('articles')));
   }
 
+  // all property results routes
   if (pageRoute === 'properties#index'
       || pageRoute === 'counties#show'
       || pageRoute === 'postcodes#show'
       || pageRoute === 'locations#show'
-    ) {
+      || pageRoute === 'countries#show'
+      || pageRoute === 'branches#properties'
+  ) {
     const searchFromFragment = parseFragment(window.location.pathname);
     const defaultStatus = store.getState().app.themePreferences.default_search_status;
 
@@ -123,17 +126,18 @@ const hfInitialize = () => {
 
       store.dispatch(setInitialSearch(searchFromFragment));
       store.dispatch(setSearch(searchFromFragment));
-    } else {
-      if (defaultStatus && !search.status) store.dispatch(setSearchField({ status: defaultStatus }));
     }
 
     const place = Homeflow.get('place');
     if (place) {
+      const initialSearchSet = Object.keys(store.getState().search?.initialSearch)?.length;
       store.dispatch(setPlace(place));
-      store.dispatch(setInitialSearch({
-        q: place.name + (place.county_name ? `, ${place.county_name}` : ''),
-        place,
-      }));
+      if (!initialSearchSet) {
+        store.dispatch(setInitialSearch({
+          q: place.name + (place.county_name ? `, ${place.county_name}` : ''),
+          place,
+        }));
+      }
     }
     const expandedPolygon = Homeflow.get('expanded_polygon');
     if (expandedPolygon) {

package/branches/branches-search-form/branches-search-input.component.jsx

@@ -124,6 +124,7 @@ const BranchesSearchInput = ({
         inputProps={{
           placeholder,
           name: 'react-autosuggest__input',
+          id: 'react-autosuggest__input',
           required: isRequired,
           value: branchesSearch,
           // eslint-disable-next-line no-unused-vars

package/cookie-consent/cookie-consent.js

@@ -3,7 +3,7 @@ const initCookieConsent = () => {
     const defaultMessage = 'This website uses cookies to improve your experience.';
     // appends the 'decline' and 'learn more' links to the message
     const ccFullscreenMessage = (message = defaultMessage, href) => {
-      let newMessage = `${message}<a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="${href}" target="_blank">Learn more</a>`;
+      let newMessage = `${message}<a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="${href}" target="_blank">View cookie policy</a>`;
       newMessage += ' or <a aria-label="deny cookies" role="button" tabindex="0" class="cc-btn cc-deny cc-deny-link">decline</a>';
       return newMessage;
     };
@@ -56,8 +56,8 @@ const initCookieConsent = () => {
             message: ccFullscreenMessage(message, href),
           },
           elements: {
-            deny: '<a style="display: none;"></a>',
-            link: '<a style="display: none;"></a>',
+            deny: '<a style="display: none;" href="#"></a>',
+            link: '<a style="display: none;" href="#"></a>',
           },
         };
       }

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "homeflowjs",
-  "version": "0.12.17",
+  "version": "0.12.18",
   "sideEffects": [
     "modal/**/*",
+    "user/default-profile/**/*",
+    "instant-valuation/**/*",
     "properties/properties-map/**/*",
     "properties/property-map/**/*",
-    "properties/property-streetview/**/*"
+    "properties/property-streetview/**/*",
+    "properties/stamp-duty-calculator/**/*"
   ],
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",

package/properties/properties-map/draggable-map.js

@@ -29,8 +29,8 @@ export default class DraggableMap {
       this.selectedMarker = null;
       store.subscribe(() => {
         const newSelectedMarker = store.getState().properties.selectedMarker;
-        const newSelectedPropertyID = newSelectedMarker ? newSelectedMarker.property.property_id : null;
-        const stateSelectedPropertyID = this.selectedMarker ? this.selectedMarker.property.property_id : null;
+        const newSelectedPropertyID = this.markerPropertyIdOrGeonameId(newSelectedMarker);
+        const stateSelectedPropertyID = this.markerPropertyIdOrGeonameId(this.selectedMarker);
 
         if (newSelectedPropertyID !== stateSelectedPropertyID) {
           this.activateMarker(newSelectedMarker);
@@ -59,7 +59,7 @@ export default class DraggableMap {
       this.buildPolygon();
       this.setMarkers();
       if (this.noLocationfound || Homeflow.get('breadcrumbs_map')) { this.setToMarkeredBounds(); }
-      if (Homeflow.get('custom_map_zoom') !== null) {
+      if (Homeflow.get('custom_map_zoom')) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
       }
     }
@@ -75,7 +75,7 @@ export default class DraggableMap {
     // }
 
     this.generateMap();
-    if (!Homeflow.get('free_text_search') && !Homeflow.get('breadcrumbs_map')) {
+    if (!Homeflow.get('free_text_search')) {
       this.map.on('zoomend', () => (this.onMapDrag()));
     }
     this.map.on('dragend', () => (this.onMapDrag()));
@@ -97,6 +97,12 @@ export default class DraggableMap {
     }
     this.selectedMarker = marker;
     if (this.selectedMarker) this.selectedMarker.setIcon(this.generateMarkerIcon(marker.property));
+
+    if (marker.property.geoname_id && marker.property.viewport) {
+      this.bounds = this.getViewportBounds(marker.property.viewport);
+      this.map.fitBounds(this.bounds, Homeflow.get('custom_map_bounds_padding'));
+      this.onMapDrag();
+    }
   }
 
   generateMarkerIcon(property) {
@@ -281,7 +287,7 @@ export default class DraggableMap {
     const layer = Homeflow.get('pin_clustering') ? this.clusteringMarkerLayer : this.nonClusteringMarkerLayer;
 
     if (property.property_id === null || property.lat === 0 || property.lng === 0) return;
-    if (geonameId && Homeflow.get('breadcrumbs_map') && geonameId !== currentGeonameId()) return;
+    if (geonameId && Homeflow.get('breadcrumbs_map') && geonameId !== currentGeonameId() && !this.isDisplayProperties()) return;
 
     layer.addLayer(this.generateMarker(property));
   }
@@ -293,6 +299,12 @@ export default class DraggableMap {
   }
 
   setToMarkeredBounds() {
+    const viewport = store.getState().search.currentSearch.place?.viewport;
+
+    if (viewport && this.viewport !== viewport) {
+      this.viewport = viewport;
+    }
+
     const options = Homeflow.get('custom_map_bounds_padding');
     const bounds = this.getMarkerBounds();
 
@@ -311,27 +323,39 @@ export default class DraggableMap {
     if (this.bounds && this.bounds.isValid()) {
       return this.bounds;
     } else {
-      const bounds = [this.getTopLeftMarkerCoordinates(), this.getBottomRightMarkerCoordinates()];
-      if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
+      if (Homeflow.get('breadcrumbs_map') && this.viewport) {
+        const viewportBounds = this.getViewportBounds();
+        if (viewportBounds.flat().find(coordinate => coordinate === Infinity)) return null;
 
-      return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
+        return L.latLngBounds(...viewportBounds.map(bound => L.latLng(...bound)));
+      } else {
+        const bounds = [this.getTopRightMarkerCoordinates(), this.getBottomLeftMarkerCoordinates()];
+        if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
+
+        return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
+      }
     }
   }
 
-  getTopLeftMarkerCoordinates() {
-    return [
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
-    ];
+  getViewportBounds(viewport) {
+    viewport = viewport || this.viewport;
+    return [...viewport[0].filter((coords, index) => index === 0 || index === 2).map(coords => [...coords.toReversed()])];
   }
 
-  getBottomRightMarkerCoordinates() {
+  getTopRightMarkerCoordinates() {
     return [
       Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
       Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
     ];
   }
 
+  getBottomLeftMarkerCoordinates() {
+    return [
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+    ];
+  }
+
   parseCoordinateArray(items, coordinateType) {
     if (!items) return [];
 
@@ -341,7 +365,7 @@ export default class DraggableMap {
   isDisplayProperties() {
     const { properties: { pagination: { total_count: totalCount } } } = store.getState();
 
-    if (!this.breadcrumbs || !Homeflow.get('breadcrumbs_map')) {
+    if (!this.breadcrumbs || this.breadcrumbs?.length === 0 || !Homeflow.get('breadcrumbs_map')) {
       return true;
     } else if (this.properties && totalCount <= this.properties.length) {
       return true;
@@ -425,7 +449,7 @@ export default class DraggableMap {
         const placeBounds = this.buildSubPolygons(place.polygon)
         return this.map.fitBounds(placeBounds);
 
-      } else {
+      } else if (!search.place?.viewport) {
         center = new L.LatLng(place.lat, place.lng);
         const bounds = this.getMarkerBounds();
         if (bounds && bounds.isValid()) return;
@@ -439,46 +463,57 @@ export default class DraggableMap {
 
 
   onMapDrag() {
-    if (!Homeflow.get('disable_draggable_map')) {
-      let url;
-      const bounds = this.getSearchableBounds();
-      const has_expanded = this.getSearch().expandedPolygon;
-      if (this.mapLoadedTimes === 1 || has_expanded ) {
-        url = `/search.ljson?${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}&count=50`;
-      } else {
-        // unset place
-        store.dispatch(setPlace(null));
-        const newSearch = this.getSearch();
-        newSearch.place = null;
-        url = `/search.ljson?${buildQueryString(newSearch)}/view-${bounds.toBBoxString()}&count=50`;
-      }
-      if (Homeflow.get('get_geo_features')) {
-        const geo_url = Homeflow.get('root_url') + `geo_features.ljson?${Ctesius.getSearch().toGetParams(false)}/view-${bounds.toBBoxString()}&count=50`;
-        $.get(geo_url, (res, status, xhr) => {
-          this._running_update = false;
-          if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
-          return this.addGeoMarkers(res);
-        });
-      }
-      if (Homeflow.get('map_branch_id') != null) {
-        url = url + "&branch_id=" + Homeflow.get('map_branch_id');
-      }
-      Homeflow.kickEvent('before_draggable_map_updated');
-      return fetch(url)
-              .then((response) => response.json())
-              .then(json => {
-                Homeflow.kickEvent('draggable_map_updated', json);
-                store.dispatch(setProperties(json.properties))
-                this._running_update = false;
+    if (Homeflow.get('disable_draggable_map') || this.drawableMapInitialized) return;
 
-                this.properties = json.properties;
-                // TODO: figure out what 'tile view' is
-                // if (this.tile_view != null) {
-                //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
-                // }
-                return this.setMarkers();
-              });
+    let url;
+    const bounds = this.getSearchableBounds();
+    const has_expanded = this.getSearch().expandedPolygon;
+    if (this.mapLoadedTimes === 1 || has_expanded ) {
+      url = `/search.ljson?${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}&count=50`;
+    } else {
+      // unset place
+      // Leaving this commented as it may be needed
+      // It is causing issues as the place state is never reset after the request
+      // so the place is just empty
+      // Not sure it has to be set to null for the request to work
+      // store.dispatch(setPlace(null));
+      const newSearch = this.getSearch();
+      url = `/search.ljson?${buildQueryString(newSearch)}/view-${bounds.toBBoxString()}&count=50`;
+    }
+    if (Homeflow.get('get_geo_features')) {
+      const geo_url = Homeflow.get('root_url') + `geo_features.ljson?${Ctesius.getSearch().toGetParams(false)}/view-${bounds.toBBoxString()}&count=50`;
+      $.get(geo_url, (res, status, xhr) => {
+        this._running_update = false;
+        if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
+        return this.addGeoMarkers(res);
+      });
     }
+    if (Homeflow.get('map_branch_id') != null) {
+      url = url + "&branch_id=" + Homeflow.get('map_branch_id');
+    }
+    Homeflow.kickEvent('before_draggable_map_updated');
+    url = url + '&zoom_level=' + this.map.getZoom();
+
+    return fetch(url)
+            .then((response) => response.json())
+            .then(json => {
+              Homeflow.kickEvent('draggable_map_updated', json);
+              store.dispatch(setProperties(json.properties))
+              this._running_update = false;
+
+              if (json.breadcrumbs) {
+                this.breadcrumbs = this.concatenateDistinctObjects('geoname_id', this.breadcrumbs, json.breadcrumbs);
+                this.properties = [];
+              } else if (json.properties) {
+                this.properties = this.concatenateDistinctObjects('property_id', this.properties, json.properties);
+                this.breadcrumbs = [];
+              }
+              // TODO: figure out what 'tile view' is
+              // if (this.tile_view != null) {
+              //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
+              // }
+              return this.setMarkers();
+            });
   }
 
   // this method was copied directly from transpiled ES5 from the browser as it's the only
@@ -691,26 +726,29 @@ export default class DraggableMap {
     return new L.LatLng(y, x);
   }
 
-  propertiesOrBreadcrumbs() {
-    const breadcrumbs = this.breadcrumbs;
-    const properties = this.properties;
-    if (breadcrumbs && breadcrumbs.length) {
-      return breadcrumbs;
-    } else if (breadcrumbs && !breadcrumbs.length) {
-      return properties;
-    } else if (properties !== null && !Homeflow.get('breadcrumbs_map')) {
-      return properties;
-    } else {
-      return null;
-    }
-  }
-
   handleBreadcrumbsInit() {
+    if (this.breadcrumbsInitialized) return;
+
     const { properties: { breadcrumbs } } = store.getState();
 
     if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
       this.breadcrumbs = breadcrumbs;
       this.setMarkers();
+      this.setToMarkeredBounds();
     }
+
+    this.breadcrumbsInitialized = true;
+  }
+
+  concatenateDistinctObjects(key, array, otherArray) {
+    return [...new Map((array || []).concat(otherArray || []).map((object) => [object[key], object])).values()];
+  }
+
+  markerPropertyIdOrGeonameId(marker) {
+    if (!marker) return null;
+    if (marker?.property?.property_id) return marker.property.property_id;
+    if (marker?.property?.geoname_id) return marker.property.geoname_id;
+
+    return null;
   }
 }

package/properties/properties-map/drawable-map.js

@@ -20,7 +20,11 @@ export default class DrawableMap extends DraggableMap {
     Homeflow.kickEvent('editbanner', this);
     Homeflow.kickEvent('deletebanner', this);
     this.repositionDrawControls();
-    return this.onMapDrag();
+    // note: I'm not 100% sure this is will ever be required if super.init() is called
+    // something to review in homeflow_next
+    if (!Homeflow.get('breadcrumbs_map')) {
+      return this.onMapDrag();
+    }
   }
 
   onMapDrag() {
@@ -142,11 +146,6 @@ export default class DrawableMap extends DraggableMap {
       if (!this.first) { return this.onMapDrag(); }
     });
 
-    this.map.on('dragend', () => {
-      return this.onMapDrag();
-    });
-
-
     this.map.on("draw:drawstart", e => {
       this.first = false;
       this.map.removeLayer(this.marker_layer);

package/properties/property-streetview/property-streetview.component.jsx

@@ -8,20 +8,10 @@ const PropertyStreetview = ({ initGoogleMaps, ...otherProps }) => {
   const initializeMap = () => {
     // Should this be added to Redux?
     const property = Homeflow.get('property');
-
-    const panorama = new google.maps.StreetViewPanorama(document.getElementById('hfjs-property-streetview'));
-    panorama.setPosition(new google.maps.LatLng(property.lat, property.lng));
-
-    if (property.streetview) {
-      const { pitch, heading } = property.streetview.orientation;
-      const { lat, lng } = property.streetview.position;
-
-      panorama.setPosition(new google.maps.LatLng(lat, lng));
-      panorama.setPov({ heading, pitch });
-    } else {
-      panorama.setPosition(new google.maps.LatLng(property.lat, property.lng));
-    }
-
+    const panorama = new google.maps.StreetViewPanorama(document.getElementById('hfjs-property-streetview'), {
+      position: {lat: property.lat, lng: property.lng},
+      pov: {heading: 0, pitch: 0}
+    });
     panorama.setVisible(true);
   };
 

package/properties/remove-saved-property-button/remove-saved-property-button.component.jsx

@@ -20,12 +20,14 @@ const RemoveSavedPropertyButton = (props) => {
   };
 
   return (
-    <a
+    <button
+      type="button"
       onClick={removeProperty}
       {...otherProps}
+      aria-label="Remove saved property"
     >
       {children}
-    </a>
+    </button>
   );
 };
 

package/properties/save-property-button/save-property-button.component.jsx

@@ -38,13 +38,15 @@ const SavePropertyButton = (props) => {
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid
-    <a
+    <button
+      type="button"
       style={style}
       onClick={toggleProperty}
       className={`${className} ${isSaved ? 'saved' : ''}`}
+      aria-label="Save"
     >
       {isSaved ? SavedComponent : UnsavedComponent}
-    </a>
+    </button>
   );
 };
 

package/reducers/search.reducer.js

@@ -11,6 +11,7 @@ const INITIAL_STATE = {
     tags: [],
     poly: '',
     auctionDate: '',
+    viewport: [],
   },
   initialSearch: {}, // original search when the page first loads
   savedSearches: [],
@@ -120,8 +121,11 @@ const searchReducer = (state = INITIAL_STATE, action) => {
       if (!place) {
         return {
           ...state,
-          place: null,
-          placeId: null,
+          currentSearch: {
+            ...state.currentSearch,
+            place: null,
+            placeId: null,
+          }
         };
       }
 

package/search/search-form/search-form.component.jsx

@@ -28,6 +28,7 @@ class SearchForm extends Component {
       }
     } else {
       if (defaultSort && !search.sorted) setSearchField({ sorted: defaultSort });
+      if (defaultStatus && !search.status) setSearchField({ status: defaultStatus });
     }
 
     if (defaultChannel) setSearchField({ channel: defaultChannel });