homeflowjs 0.11.0 → 0.11.2

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import L from 'leaflet';
-import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 
-const BranchLeafletMap = ({ iconConfig }) => {
+const BranchLeafletMap = ({ iconConfig, CustomPopup }) => {
   const branch = Homeflow.get('branch');
 
   const defaultIconConfig = {
@@ -25,17 +25,25 @@ const BranchLeafletMap = ({ iconConfig }) => {
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={[branch.lat, branch.lng]} icon={icon} />
+      <Marker position={[branch.lat, branch.lng]} icon={icon}>
+        {CustomPopup && (
+          <Popup>
+            <CustomPopup branch={branch} />
+          </Popup>
+        )}
+      </Marker>
     </MapContainer>
   );
 };
 
 BranchLeafletMap.propTypes = {
   iconConfig: PropTypes.object,
+  CustomPopup: PropTypes.elementType,
 };
 
 BranchLeafletMap.defaultProps = {
   iconConfig: null,
+  CustomPopup: null,
 };
 
 export default BranchLeafletMap;

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

@@ -33,21 +33,20 @@ class BranchMap extends React.Component {
       custom,
       iconConfig,
       fullscreenControl,
+      zoomControl,
     } = this.props;
 
     // Should this be added to Redux?
     const branch = Homeflow.get('branch');
 
-    // debugger;
-
     const options = {
       center: new google.maps.LatLng(branch.lat, branch.lng),
       mapTypeControl,
       scrollWheel,
       zoom,
       streetViewControl: !disableStreetview,
-      zoomControl: false,
       fullscreenControl: false,
+      zoomControl,
     };
 
     if (custom === 'simple_bw') {
@@ -56,18 +55,34 @@ class BranchMap extends React.Component {
 
     const map = new google.maps.Map(document.getElementById('hfjs-branch-map'), options);
 
-    new google.maps.Marker({
+    const marker = new google.maps.Marker({
       position: { lat: branch.lat, lng: branch.lng },
       map,
       ...(iconConfig && { icon: iconConfig.iconUrl }),
     });
+
+    const branchPopupContent = document.getElementById('branch-map-popup-template')?.innerHTML;
+
+    if (branchPopupContent) {
+      const infoWindow = new google.maps.InfoWindow({
+        content: branchPopupContent,
+        ariaLabel: 'Custom Popup',
+      });
+
+      marker.addListener('click', () => {
+        infoWindow.open({
+          anchor: marker,
+          map,
+        });
+      });
+    }
   }
 
   render() {
-    const { google, iconConfig } = this.props;
+    const { google, iconConfig, CustomPopup } = this.props;
 
     if (!google) {
-      return <LazyLeafletMap iconConfig={iconConfig} />;
+      return <LazyLeafletMap iconConfig={iconConfig} CustomPopup={CustomPopup} />;
     }
 
     return (
@@ -85,6 +100,8 @@ BranchMap.propTypes = {
   initGoogleMaps: PropTypes.func.isRequired,
   google: PropTypes.bool,
   iconConfig: PropTypes.object,
+  CustomPopup: PropTypes.elementType,
+  zoomControl: PropTypes.bool,
 };
 
 BranchMap.defaultProps = {
@@ -95,6 +112,8 @@ BranchMap.defaultProps = {
   disableStreetview: false,
   google: false,
   iconConfig: null,
+  CustomPopup: null,
+  zoomControl: false,
 };
 
 const mapDispatchToProps = {
@@ -104,4 +123,4 @@ const mapDispatchToProps = {
 export default connect(
   null,
   mapDispatchToProps,
-)(BranchMap);
+)(BranchMap);

package/package.json

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

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import L from 'leaflet';
-import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 
-const PropertyLeafletMap = () => {
+const PropertyLeafletMap = ({ CustomPopup }) => {
   const property = Homeflow.get('property');
   const customIcon = Homeflow.get('custom_map_icon');
 
@@ -23,9 +24,23 @@ const PropertyLeafletMap = () => {
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={[property.lat, property.lng]} icon={defaultIcon} />
+      <Marker position={[property.lat, property.lng]} icon={defaultIcon}>
+        {CustomPopup && (
+          <Popup>
+            <CustomPopup property={property} />
+          </Popup>
+        )}
+      </Marker>
     </MapContainer>
   );
 };
 
+PropertyLeafletMap.propTypes = {
+  CustomPopup: PropTypes.elementType,
+};
+
+PropertyLeafletMap.defaultProps = {
+  CustomPopup: null,
+};
+
 export default PropertyLeafletMap;

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

@@ -55,13 +55,29 @@ class PropertyMap extends React.Component {
       map,
       ...(iconConfig && { icon: iconConfig.iconUrl }),
     });
+
+    const propertyPopupContent = document.getElementById('property-show-map-popup-template')?.innerHTML;
+
+    if (propertyPopupContent) {
+      const infoWindow = new google.maps.InfoWindow({
+        content: propertyPopupContent,
+        ariaLabel: 'Custom Popup',
+      });
+
+      marker.addListener('click', () => {
+        infoWindow.open({
+          anchor: marker,
+          map,
+        });
+      });
+    }
   }
 
   render() {
-    const { google, iconConfig } = this.props;
+    const { google, iconConfig, CustomPopup } = this.props;
 
     if (!google) {
-      return <LazyLeafletMap iconConfig={iconConfig} />;
+      return <LazyLeafletMap iconConfig={iconConfig} CustomPopup={CustomPopup} />;
     }
 
     return (
@@ -79,6 +95,7 @@ PropertyMap.propTypes = {
   initGoogleMaps: PropTypes.func.isRequired,
   google: PropTypes.bool,
   iconConfig: PropTypes.object,
+  CustomPopup: PropTypes.elementType,
 };
 
 PropertyMap.defaultProps = {
@@ -89,6 +106,7 @@ PropertyMap.defaultProps = {
   disableStreetview: false,
   google: false,
   iconConfig: null,
+  CustomPopup: null,
 };
 
 const mapDispatchToProps = {
@@ -98,4 +116,4 @@ const mapDispatchToProps = {
 export default connect(
   null,
   mapDispatchToProps,
-)(PropertyMap);
+)(PropertyMap);

package/user/default-profile/account/account-edit.component.jsx

@@ -28,7 +28,7 @@ const AccountEdit = ({ localUser, toggleEdit, updating }) => (
         </div>
 
         <div className="profile-edit-form__group">
-          <UserInput name="tel_home" required />
+          <UserInput name="tel_home" pattern="^[+]?[0-9]{9,12}$" required />
           <label htmlFor="user-input-tel_home" className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
         </div>