homeflowjs 0.11.4 → 0.11.6

package/actions/properties.actions.js

@@ -205,3 +205,8 @@ export const setSelectedMarker = (payload) => ({
   type: PropertiesActionTypes.SET_SELECTED_MARKER,
   payload,
 });
+
+export const setBreadcrumbs = (payload) => ({
+  type: PropertiesActionTypes.SET_BREADCRUMBS,
+  payload,
+});

package/actions/properties.types.js

@@ -8,6 +8,7 @@ const PropertiesActionTypes = {
   SET_PAGINATION: 'SET_PAGINATION',
   SET_PROPERTY_LINKS: 'SET_PROPERTY_LINKS',
   SET_SELECTED_MARKER: 'SET_SELECTED_MARKER',
+  SET_BREADCRUMBS: 'SET_BREADCRUMBS',
 };
 
 export default PropertiesActionTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

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

@@ -23,6 +23,7 @@ export default class DraggableMap {
     this.render = this.render.bind(this);
     this.generateMap = this.generateMap.bind(this);
     this.properties = this.getProperties();
+    this.breadcrumbs = null;
     if (Homeflow.get('select_marker_on_click')) {
       this.selectedMarker = null;
       store.subscribe(() => {
@@ -35,6 +36,8 @@ export default class DraggableMap {
         }
       })
     }
+
+    if (Homeflow.get('breadcrumbs_map')) store.subscribe(() => this.handleBreadcrumbsInit());
   }
 
   getSearch() {
@@ -53,10 +56,7 @@ export default class DraggableMap {
       this.mapLoadedTimes = 1;
       this.render();
       this.buildPolygon();
-      const properties = this.properties;
-      if (properties != null) {
-        this.setMarkersFor(properties);
-      }
+      this.setMarkersFor(this.propertiesOrBreadcrumbs());
       if (this.noLocationfound) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom') !== null) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
@@ -74,7 +74,9 @@ export default class DraggableMap {
     // }
 
     this.generateMap();
-    if (!Homeflow.get('free_text_search')) { this.map.on('zoomend', () => (this.onMapDrag())); }
+    if (!Homeflow.get('free_text_search') && !Homeflow.get('breadcrumbs_map')) {
+      this.map.on('zoomend', () => (this.onMapDrag()));
+    }
     this.map.on('dragend', () => (this.onMapDrag()));
     const _this = this;
 
@@ -120,7 +122,7 @@ export default class DraggableMap {
   }
 
   generateMarker(property) {
-    const marker = L.marker([property.lat, property.lng], { icon: this.generateMarkerIcon(property) });
+    const marker = L.marker([property.lat, property.lng], { icon: Homeflow.get('custom_property_pin')(property) });
 
     // add the property to marker attributes so they can be accessed on click
     marker.property = property;
@@ -242,12 +244,12 @@ export default class DraggableMap {
     }
   }
 
-  setMarkersFor(properties) {
+  setMarkersFor(propertiesOrBreadcrumbs) {
     let bounds;
     if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
-    if (!properties) { return null }
+    if (!propertiesOrBreadcrumbs) { return null }
 
-    if (Homeflow.get('pin_clustering')) {
+    if (Homeflow.get('pin_clustering') && !this.breadcrumbs?.length) {
       let radius = Homeflow.get('custom_clustering_radius');
       if (!radius) {
         radius = 10;
@@ -256,10 +258,10 @@ export default class DraggableMap {
     } else {
       this.marker_layer = L.featureGroup();
     }
-    const markers = properties.map((property) => {
-      if (property.property_id != null) {
-        if (property.lat !== 0 && property.lng !== 0) {
-          const m = this.generateMarker(property);
+    const markers = propertiesOrBreadcrumbs.map((propertyOrBreadcrumb) => {
+      if (propertyOrBreadcrumb.property_id != null || Homeflow.get('breadcrumbs_map')) {
+        if (propertyOrBreadcrumb.lat !== 0 && propertyOrBreadcrumb.lng !== 0) {
+          const m = this.generateMarker(propertyOrBreadcrumb);
           this.marker_layer.addLayer(m);
           return m;
         }
@@ -409,7 +411,7 @@ export default class DraggableMap {
                 // if (this.tile_view != null) {
                 //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
                 // }
-                return this.setMarkersFor(this.properties);
+                return this.setMarkersFor(this.propertiesOrBreadcrumbs());
               });
     }
   }
@@ -573,7 +575,7 @@ export default class DraggableMap {
           //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
           // }
 
-          return this.setMarkersFor(json.properties);
+          return this.setMarkersFor(this.propertiesOrBreadcrumbs());
       })
     // return $.get(url, (res, status, xhr) => {
     //   s.set('performed_data', res);
@@ -623,4 +625,27 @@ 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() {
+    const { properties: { breadcrumbs } } = store.getState();
+
+    if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
+      this.breadcrumbs = breadcrumbs;
+      this.setMarkersFor(breadcrumbs);
+    }
+  }
 }

package/properties/stamp-duty-calculator/stamp-duty-calculator.component.jsx

@@ -9,6 +9,8 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
   const [type, setType] = useState('residential');
   const [purchaseType, setPurchaseType] = useState('firstTimeBuyer')
   const [purchasePrice, setPurchasePrice] = useState();
+  const [firstTimeBuyer, setFirstTimeBuyer] = useState(false);
+  const [additionalProperty, setAdditionalProperty] = useState(false);
 
   const renderCalculator = () => {
     if (type === 'residential') {
@@ -16,8 +18,8 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
         <DefaultCalculator
           purchasePrice={purchasePrice}
           setPurchasePrice={setPurchasePrice}
-          firstTimeBuyer={purchaseType === 'firstTimeBuyer'}
-          additionalProperty={purchaseType === 'additional'} 
+          firstTimeBuyer={firstTimeBuyer}
+          additionalProperty={additionalProperty} 
           ukResident
         />
       );
@@ -61,22 +63,22 @@ const StampDutyCalculator = ({ scotland, themePreferences }) => {
       </div>
       <div className="switches">
         <div className="form-group">
-          <button
-            type="button"
-            className={`stamp-duty-cal__type ${purchaseType === 'firstTimeBuyer' ? 'selected' : ''}`}
-            onClick={() => setPurchaseType('firstTimeBuyer')}
-          >
-            First Time Buyer
-          </button>
+          <input
+            type="checkbox"
+            id="firstTime"
+            checked={firstTimeBuyer}
+            onChange={() => setFirstTimeBuyer(prev => !prev)}
+          />
+          <label htmlFor="firstTime">First Time Buyer</label>
         </div>
         <div className="form-group">
-          <button
-            type="button"
-            className={`stamp-duty-cal__type ${purchaseType === 'additional' ? 'selected' : ''}`}
-            onClick={() => setPurchaseType('additional')}
-          >
-            Additional Property
-          </button>
+          <input
+            type="checkbox"
+            id="additionalProperty"
+            checked={additionalProperty}
+            onChange={() => setAdditionalProperty(prev => !prev)}
+          />
+          <label htmlFor="additionalProperty">Additional Property</label>
         </div>
       </div>
       {renderCalculator()}

package/reducers/properties.reducer.js

@@ -83,6 +83,12 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
         ...state,
         selectedMarker: action.payload,
       };
+    case 'SET_BREADCRUMBS': {
+      return {
+        ...state,
+        breadcrumbs: action.payload,
+      }
+    };
     default:
       return state;
   }

package/reducers/properties.reducer.test.js

@@ -59,4 +59,12 @@ describe('propertiesReducer', () => {
 
     expect(reducedState).toMatchObject(state);
   });
+
+  it('Sets breadcrumbs when it receives the SET_BREADCRUMBS action', () => {
+    const breadcrumbs = [{ geoname_id: '12345' }, { geoname_id: '45678' }];
+    const state = { properties: [] };
+    const reducedState = propertiesReducer(state, { type: 'SET_BREADCRUMBS', payload: breadcrumbs });
+
+    expect(reducedState.breadcrumbs).toEqual([{ geoname_id: '12345' }, { geoname_id: '45678' }]);
+  });
 });

package/search/property-search/parse-fragment.js

@@ -41,6 +41,11 @@ export default (fragment) => {
       return;
     }
 
+    if (part.startsWith('gid-')) {
+      search.placeId = part.replace(/^gid-/, '');
+      return;
+    }
+
     if (orderParams.includes(part)) {
       search.sorted = part;
       return;

package/search/property-search/parse-fragment.test.js

@@ -37,4 +37,10 @@ describe('parseFragment', () => {
     // Have to use `Array []` to check equality here for some reason
     expect(parseFragment(fragment).tags).toEqual(Array ['house', 'flat']);
   });
+
+  it('turns gid-12345 into Place ID', () => {
+    const fragment = '/properties/sales/france/gid-12345/from-3-bed';
+
+    expect(parseFragment(fragment).placeId).toEqual('12345');
+  });
 });