homeflowjs 1.0.4 → 1.0.6

package/actions/app.actions.js

@@ -38,7 +38,7 @@ export const initGoogleMaps = () => (dispatch, getState) => {
         // Load the Google Maps API
         const script = document.createElement('script');
         const { app: { themePreferences: { google_maps_api_key: gmapKey } } } = getState();
-        script.src = `https://maps.googleapis.com/maps/api/js?key=${gmapKey}&callback=resolveGoogleMapsPromise`;
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${gmapKey}&libraries=marker&loading=async&callback=resolveGoogleMapsPromise`;
         script.async = true;
         script.id = 'hfjs-google-maps-script';
         document.body.appendChild(script);

package/actions/properties.actions.js

@@ -127,7 +127,8 @@ export const postPropertyView = (payload) => () => {
     });
 };
 
-export const postBulkPropertyExposureCreation = (payload, { sendAsFormData } = {}) => () => {
+export const postBulkPropertyExposureCreation = (payload) => () => {
+  const { sendAsFormData } = Homeflow.get('createManyOptions') ?? {};
   const domain = location.hostname;
   const exposuresPublicUrl = Homeflow.get('exposures_public_url');
 

package/app/hf-initialize.jsx

@@ -116,7 +116,7 @@ const hfInitialize = () => {
       postBulkPropertyExposureCreation({
         eventType: 'SearchResult',
         propertyIds,
-      }, Homeflow.get('createManyOptions')),
+      }),
     );
   }
 

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

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
 import { initGoogleMaps } from '../../actions/app.actions';
 import { simpleBW } from '../../shared/custom-gmap-styles';
 
-const BranchLeafletMap = React.lazy(() => import('./branch-leaflet-map.component'));
-
 import 'leaflet/dist/leaflet.css';
 
+const BranchLeafletMap = React.lazy(() => import('./branch-leaflet-map.component'));
+
 const LazyLeafletMap = (props) => (
   <Suspense fallback={<div>Loading</div>}>
     <BranchLeafletMap {...props} />
@@ -34,7 +34,6 @@ class BranchMap extends React.Component {
       disableStreetview,
       custom,
       iconConfig,
-      fullscreenControl,
       zoomControl,
       googleMapsBranchZoomLevel,
     } = this.props;
@@ -42,7 +41,7 @@ class BranchMap extends React.Component {
     // Should this be added to Redux?
     const branch = Homeflow.get('branch');
     const usedZoom = parseInt(googleMapsBranchZoomLevel || defaultZoom, 10);
-
+    const imgElement = document.createElement('img');
     const options = {
       center: new google.maps.LatLng(branch.lat, branch.lng),
       mapTypeControl,
@@ -51,18 +50,25 @@ class BranchMap extends React.Component {
       streetViewControl: !disableStreetview,
       fullscreenControl: false,
       zoomControl,
+      mapId: 'HF_BRANCH_MAP',
     };
 
     if (custom === 'simple_bw') {
       options.styles = simpleBW;
     }
 
-    const map = new google.maps.Map(document.getElementById('hfjs-branch-map'), options);
+    if (iconConfig && iconConfig?.iconUrl) {
+      imgElement.src = iconConfig?.iconUrl;
+    }
 
-    const marker = new google.maps.Marker({
+    const map = new google.maps.Map(document.getElementById('hfjs-branch-map'), options);
+    const marker = new google.maps.marker.AdvancedMarkerElement({
       position: { lat: branch.lat, lng: branch.lng },
       map,
-      ...(iconConfig && { icon: iconConfig.iconUrl }),
+      ...(
+        (iconConfig && iconConfig?.iconUrl) && {
+          content: imgElement,
+        }),
     });
 
     const branchPopupContent = document.getElementById('branch-map-popup-template')?.innerHTML;
@@ -100,6 +106,7 @@ BranchMap.propTypes = {
   scrollWheel: PropTypes.bool,
   custom: PropTypes.oneOf(['simple_bw', null]),
   zoom: PropTypes.number,
+  defaultZoom: PropTypes.number,
   disableStreetview: PropTypes.bool,
   initGoogleMaps: PropTypes.func.isRequired,
   google: PropTypes.bool,

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

@@ -21,7 +21,7 @@ const BranchesMap = ({
   scrollWheelZoom,
   markerClickHandler,
   displayPopup,
-  selectedBranch, 
+  selectedBranch,
   branches: branchesProp,
   MapContainerProps,
 }) => {
@@ -42,8 +42,6 @@ const BranchesMap = ({
     shadowUrl: '/assets/marker-shadow.png',
   };
 
-  
-
   const bounds = latLngBounds([branches[0].lat, branches[0].lng]);
 
   const markers = branches.map((branch) => {
@@ -149,10 +147,10 @@ BranchesMap.propTypes = {
   fallbackLatLng: PropTypes.object,
   scrollWheelZoom: PropTypes.bool,
   markerClickHandler: PropTypes.func,
-  displayPopup : PropTypes.bool,
+  displayPopup: PropTypes.bool,
   selectedBranch: PropTypes.object,
   branches: PropTypes.arrayOf(PropTypes.object),
-  MapContainerProps: PropTypes.object
+  MapContainerProps: PropTypes.object,
 };
 
 BranchesMap.defaultProps = {
@@ -166,7 +164,7 @@ BranchesMap.defaultProps = {
   displayPopup: true,
   selectedBranch: {},
   branches: [],
-  MapContainerProps: {}
+  MapContainerProps: {},
 };
 
 const mapStateToProps = (state) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

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

@@ -277,7 +277,7 @@ export default class DraggableMap {
         console.warn('Tried to render a Google map layer without a google maps API key being set in admin.');
       }
       layer = new L.TileLayer(
-        'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
+        'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&loading=async', {
           subdomains: ['mt0','mt1','mt2','mt3'],
           attribution: `<img src="${Homeflow.get('root_url')}assets/leaflet/google-logo.png" alt="Powered by Google" />`
       });

package/properties/properties-map/properties-map.component.jsx

@@ -73,7 +73,7 @@ const PropertiesMap = ({ leaflet, gmapKey, googleLayer, legacyMapOptions }) => {
 
     if (needsGoogle && !document.getElementById('hfjs-gmaps') && gmapKey) {
       const gmapScript = document.createElement('script');
-      gmapScript.setAttribute('src', `https://maps.google.com/maps/api/js?key=${gmapKey}`);
+      gmapScript.setAttribute('src', `https://maps.google.com/maps/api/js?key=${gmapKey}&loading=async`);
       gmapScript.setAttribute('id', 'hfjs-gmaps');
       document.head.appendChild(gmapScript);
     }

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

@@ -10,6 +10,7 @@ import '../properties-map/leaflet.css';
 
 const PropertyLeafletMap = React.lazy(() => import('./property-leaflet-map.component'));
 
+// eslint-disable-next-line react/prop-types
 const LazyLeafletMap = ({ placeholder, ...props }) => (
   <Suspense fallback={placeholder}>
     <PropertyLeafletMap {...props} />
@@ -38,24 +39,32 @@ class PropertyMap extends React.Component {
 
     // Should this be added to Redux?
     const property = Homeflow.get('property');
-
+    const imgElement = document.createElement('img');
     const options = {
       center: new google.maps.LatLng(property.lat, property.lng),
       mapTypeControl,
       scrollWheel,
       zoom,
       streetViewControl: !disableStreetview,
+      mapId: 'HF_PROPERTY_MAP',
     };
 
     if (custom === 'simple_bw') {
       options.styles = simpleBW;
     }
 
+    if (iconConfig && iconConfig?.iconUrl) {
+      imgElement.src = iconConfig?.iconUrl;
+    }
+
     const map = new google.maps.Map(document.getElementById('hfjs-property-map'), options);
-    const marker = new google.maps.Marker({
+    const marker = new google.maps.marker.AdvancedMarkerElement({
       position: { lat: property.lat, lng: property.lng },
       map,
-      ...(iconConfig && { icon: iconConfig.iconUrl }),
+      ...(
+        (iconConfig && iconConfig?.iconUrl) && {
+          content: imgElement,
+        }),
     });
 
     const propertyPopupContent = document.getElementById('property-show-map-popup-template')?.innerHTML;
@@ -76,7 +85,9 @@ class PropertyMap extends React.Component {
   }
 
   render() {
-    const { google, iconConfig, CustomPopup, placeholder, leafletWhenReady } = this.props;
+    const {
+      google, iconConfig, CustomPopup, placeholder, leafletWhenReady,
+    } = this.props;
 
     if (!google) {
       return (
@@ -85,7 +96,8 @@ class PropertyMap extends React.Component {
           CustomPopup={CustomPopup}
           placeholder={placeholder}
           leafletWhenReady={leafletWhenReady}
-        />);
+        />
+      );
     }
 
     return (