homeflowjs 0.12.16 → 0.12.17

package/Jenkinsfile

@@ -39,7 +39,7 @@ pipeline {
 
     stage('Publish Verification') {
       when {
-        branch 'master'
+        branch 'main'
 
         anyOf {
           triggeredBy 'BitBucketPushCause'
@@ -69,7 +69,7 @@ pipeline {
         sh 'git config --global user.name "Homeflow CI"'
         sh 'yarn publish --new-version ${PUBLISH_VERSION}'
         sh 'git show'
-        sh 'git push git@bitbucket.org:homeflow_developers/homeflowjs HEAD:master'
+        sh 'git push git@bitbucket.org:homeflow_developers/homeflowjs HEAD:main'
       }
     }
   }

package/actions/properties.actions.js

@@ -14,18 +14,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
   const searchHistory = localStorage.getItem('searchHistory');
   if (!searchHistory) return null;
 
-  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 lastSearch = JSON.parse(searchHistory)[0];
   const { place, ...restOfSearch } = lastSearch;
   const searchURL = `/search.ljson?${buildQueryString(restOfSearch)}`;
 
@@ -34,18 +23,14 @@ 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 = getPropertyUrl(properties[index + 1]);
-        propertyLinks.prev = getPropertyUrl(properties[index - 1]);
+        propertyLinks.next = properties[index + 1].property_url;
+        propertyLinks.prev = properties[index - 1].property_url;
 
         return dispatch(setPropertyLinks(propertyLinks));
       }
@@ -53,7 +38,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 = getPropertyUrl(properties[index - 1]);
+        propertyLinks.prev = properties[index - 1].property_url;
 
         const nextSearch = {
           ...restOfSearch,
@@ -67,7 +52,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
             if (!properties) {
               propertyLinks.next = '';
             } else {
-              propertyLinks.next = getPropertyUrl(properties[0]);
+              propertyLinks.next = properties[0].property_url;
             }
 
             return dispatch(setPropertyLinks(propertyLinks));
@@ -77,7 +62,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 = getPropertyUrl(properties[index + 1]);
+        propertyLinks.next = properties[index + 1].property_url;
 
         const nextSearch = {
           ...restOfSearch,
@@ -98,7 +83,7 @@ export const setPropertyLinksAsync = () => (dispatch) => {
             if (!properties) {
               propertyLinks.prev = '';
             } else {
-              propertyLinks.prev = getPropertyUrl(properties[properties.length - 1]);
+              propertyLinks.prev = properties[properties.length - 1].property_url;
             }
 
             return dispatch(setPropertyLinks(propertyLinks));

package/app/hf-initialize.jsx

@@ -105,14 +105,11 @@ 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;
 
@@ -126,18 +123,17 @@ 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));
-      if (!initialSearchSet) {
-        store.dispatch(setInitialSearch({
-          q: place.name + (place.county_name ? `, ${place.county_name}` : ''),
-          place,
-        }));
-      }
+      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,7 +124,6 @@ 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">View cookie policy</a>`;
+      let newMessage = `${message}<a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="${href}" target="_blank">Learn more</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;" href="#"></a>',
-            link: '<a style="display: none;" href="#"></a>',
+            deny: '<a style="display: none;"></a>',
+            link: '<a style="display: none;"></a>',
           },
         };
       }

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "homeflowjs",
-  "version": "0.12.16",
+  "version": "0.12.17",
   "sideEffects": [
     "modal/**/*",
-    "user/default-profile/**/*",
-    "instant-valuation/**/*",
     "properties/properties-map/**/*",
     "properties/property-map/**/*",
-    "properties/property-streetview/**/*",
-    "properties/stamp-duty-calculator/**/*"
+    "properties/property-streetview/**/*"
   ],
   "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 = this.markerPropertyIdOrGeonameId(newSelectedMarker);
-        const stateSelectedPropertyID = this.markerPropertyIdOrGeonameId(this.selectedMarker);
+        const newSelectedPropertyID = newSelectedMarker ? newSelectedMarker.property.property_id : null;
+        const stateSelectedPropertyID = this.selectedMarker ? this.selectedMarker.property.property_id : null;
 
         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')) {
+      if (Homeflow.get('custom_map_zoom') !== null) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
       }
     }
@@ -75,7 +75,7 @@ export default class DraggableMap {
     // }
 
     this.generateMap();
-    if (!Homeflow.get('free_text_search')) {
+    if (!Homeflow.get('free_text_search') && !Homeflow.get('breadcrumbs_map')) {
       this.map.on('zoomend', () => (this.onMapDrag()));
     }
     this.map.on('dragend', () => (this.onMapDrag()));
@@ -97,12 +97,6 @@ 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) {
@@ -287,7 +281,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() && !this.isDisplayProperties()) return;
+    if (geonameId && Homeflow.get('breadcrumbs_map') && geonameId !== currentGeonameId()) return;
 
     layer.addLayer(this.generateMarker(property));
   }
@@ -299,12 +293,6 @@ 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();
 
@@ -323,36 +311,24 @@ export default class DraggableMap {
     if (this.bounds && this.bounds.isValid()) {
       return this.bounds;
     } else {
-      if (Homeflow.get('breadcrumbs_map') && this.viewport) {
-        const viewportBounds = this.getViewportBounds();
-        if (viewportBounds.flat().find(coordinate => coordinate === Infinity)) return null;
+      const bounds = [this.getTopLeftMarkerCoordinates(), this.getBottomRightMarkerCoordinates()];
+      if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
 
-        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)));
-      }
+      return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
     }
   }
 
-  getViewportBounds(viewport) {
-    viewport = viewport || this.viewport;
-    return [...viewport[0].filter((coords, index) => index === 0 || index === 2).map(coords => [...coords.toReversed()])];
-  }
-
-  getTopRightMarkerCoordinates() {
+  getTopLeftMarkerCoordinates() {
     return [
-      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
-      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
     ];
   }
 
-  getBottomLeftMarkerCoordinates() {
+  getBottomRightMarkerCoordinates() {
     return [
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
     ];
   }
 
@@ -365,7 +341,7 @@ export default class DraggableMap {
   isDisplayProperties() {
     const { properties: { pagination: { total_count: totalCount } } } = store.getState();
 
-    if (!this.breadcrumbs || this.breadcrumbs?.length === 0 || !Homeflow.get('breadcrumbs_map')) {
+    if (!this.breadcrumbs || !Homeflow.get('breadcrumbs_map')) {
       return true;
     } else if (this.properties && totalCount <= this.properties.length) {
       return true;
@@ -449,8 +425,11 @@ export default class DraggableMap {
         const placeBounds = this.buildSubPolygons(place.polygon)
         return this.map.fitBounds(placeBounds);
 
-      } else if (!search.place?.viewport) {
+      } else {
         center = new L.LatLng(place.lat, place.lng);
+        const bounds = this.getMarkerBounds();
+        if (bounds && bounds.isValid()) return;
+
         return this.map.setView(center, 12);
       }
     } else {
@@ -460,57 +439,46 @@ export default class DraggableMap {
 
 
   onMapDrag() {
-    if (Homeflow.get('disable_draggable_map') || this.drawableMapInitialized) return;
+    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;
 
-    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);
-      });
+                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();
+              });
     }
-    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
@@ -723,29 +691,26 @@ export default class DraggableMap {
     return new L.LatLng(y, x);
   }
 
-  handleBreadcrumbsInit() {
-    if (this.breadcrumbsInitialized) return;
+  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() {
     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,11 +20,7 @@ export default class DrawableMap extends DraggableMap {
     Homeflow.kickEvent('editbanner', this);
     Homeflow.kickEvent('deletebanner', this);
     this.repositionDrawControls();
-    // 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();
-    }
+    return this.onMapDrag();
   }
 
   onMapDrag() {
@@ -146,6 +142,11 @@ 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,10 +8,20 @@ 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'), {
-      position: {lat: property.lat, lng: property.lng},
-      pov: {heading: 0, pitch: 0}
-    });
+
+    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));
+    }
+
     panorama.setVisible(true);
   };
 

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

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

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

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

package/reducers/search.reducer.js

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

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

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