@abcagency/hc-ui-components 1.3.46 → 1.3.48

package/src/components/containers/maps/map-container.js

@@ -1,206 +1,245 @@
-import React, { useEffect, useRef } from 'react';
-
-import MapMarker from "~/components/containers/maps/map-marker-container";
-import PlaceMarker from "~/components/modules/maps/place-marker";
-
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-
-import Map from "~/components/modules/maps/map";
-import { MarkerClustererF } from "@react-google-maps/api";
-import { clusterOptions } from "~/util/mapUtil";
-
-const MapContainer = ({
-	markerConfigs,
-	infoWindowClasses,
-	clusterGridSize = 60
-}) => {
-	const {
-		location,
-		zoom,
-		center,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted
-	} = useMap();
-
-	const {
-		mapItems, filteredListings, setSelectedFilters,
-		setQuery
-	} = useMapList();
-
-	const mapRef = useRef();
-	const markerRefs = useRef({});
-	const mapContainerRef = useRef(null);
-	const {
-		poiMarkers,
-		setCurrentCenter,
-		currentCenter,
-		setCurrentZoom,
-		currentZoom,
-		selectedPlaceMarker,
-		setSelectedPlaceMarker,
-		placesWindow,
-		setPlacesWindow } = usePlaces();
-
-	const onIdle = () => {
-		if (!currentCenter || !mapRef.current) return;
-		const newCenter = mapRef.current.getCenter().toJSON();
-		const newZoom = mapRef.current.zoom;
-
-		setCurrentCenter(newCenter);
-
-		if (newZoom !== currentZoom) {
-			setCurrentZoom(newZoom);
-		}
-	};
-
-	useEffect(() => {
-		if (mapContainerRef.current) {
-			const handleScroll = () => {
-				setMapInteracted(true);
-			};
-			var mapContainerRefCurrent = mapContainerRef.current;
-			mapContainerRef.current.addEventListener('wheel', handleScroll);
-			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
-		}
-	}, [mapContainerRef.current]);
-
-	useEffect(() => {
-		if (mapRef.current) {
-			const mapInstance = mapRef.current;
-			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
-			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
-			return () => {
-				google.maps.event.removeListener(dragStartListener);
-				google.maps.event.removeListener(mouseDownListener);
-			};
-		}
-	}, [mapRef.current, mapContainerRef.current]);
-
-	useEffect(() => {
-		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
-			fitBounds(mapRef.current);
-		}
-	}, [mapItems, mapRef.current, location]);
-
-	useEffect(() => {
-		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
-			fitBounds(mapRef.current, true);
-		}
-		if (mapRef.current) {
-			let currZoom = mapRef.current.zoom;
-			let setZoomVal = currZoom < 13 ? currZoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [filteredListings]);
-
-	useEffect(() => {
-		if (!mapRef.current || !location || mapInteracted) return;
-		mapRef.current.panTo(
-			new google.maps.LatLng(location.latitude, location.longitude)
-		);
-		if (mapRef.current) {
-			let setZoomVal = zoom < 13 ? zoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [location, zoom, mapRef.current]);
-
-	const fitBounds = (map, overload = false) => {
-		if ((mapInteracted === false || overload) && mapItems != null) {
-			const bounds = new window.google.maps.LatLngBounds();
-			mapItems.forEach(item => {
-				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
-			});
-			if (!map) return;
-			map.fitBounds(bounds);
-		}
-		if (mapRef.current.zoom > 17) {
-			mapRef.current.setZoom(16);
-		}
-	};
-
-	const markerClickHandler = mapLocation => {
-		setMapInteracted(true);
-		selectLocationEntity(mapLocation);
-	};
-
-	const onLoad = map => {
-		if (!location || location === null) {
-			mapRef.current = map;
-			fitBounds(map, true);
-			return;
-		}
-		mapRef.current = map;
-
-		if (mapInteracted === false) {
-			mapRef.current.panTo(
-				new google.maps.LatLng(location.latitude, location.longitude)
-			);
-
-			mapRef.current.setZoom(zoom);
-		}
-	};
-
-	const pinIconUrl = pinIcon({
-		fillColor: markerConfigs.fillColor,
-		strokeColor: markerConfigs.strokeColor
-	});
-
-	return (
-		<Map
-			zoom={zoom}
-			center={center}
-			mapContainerRef={mapContainerRef}
-			onLoad={onLoad}
-			onIdle={onIdle}
-			mapInteracted={mapInteracted}
-			pinIconUrl={pinIconUrl}
-			setMapInteracted={setMapInteracted}
-			fitBounds={fitBounds}
-			mapRef={mapRef}
-			setQuery={setQuery}
-			filteredListingsLength={filteredListings.length}
-			setSelectedFilters={setSelectedFilters}
-		>
-			<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
-				{clusterer => (
-					<>
-						{mapItems.map(item => (
-							<MapMarker
-								key={item.id}
-								item={item}
-								selectedLocation={location}
-								markerRefs={markerRefs}
-								infoWindowClasses={infoWindowClasses}
-								setSelectedLocation={setLocation}
-								markerClickHandler={markerClickHandler}
-								clusterer={clusterer}
-								markerIcon={markerIcon(markerConfigs)}
-								markerIconSelected={markerIconSelected(markerConfigs)}
-								setMapInteracted={setMapInteracted}
-							/>
-						))}
-						{poiMarkers && poiMarkers.markers.map((marker, index) => (
-							<PlaceMarker
-								key={`marker-${marker.title}-${index}`}
-								marker={marker}
-								index={index}
-								selectedPlaceMarker={selectedPlaceMarker}
-								placesWindow={placesWindow}
-								setPlacesWindow={setPlacesWindow}
-								setSelectedPlaceMarker={setSelectedPlaceMarker}
-							  />
-						))}
-					</>
-				)}
-			</MarkerClustererF>
-		</Map>
-	);
-};
-
-export default MapContainer;
+import React, { useEffect, useRef, useState } from 'react';
+
+import MapMarker from "~/components/containers/maps/map-marker-container";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+
+import Map from "~/components/modules/maps/map";
+import { MarkerClustererF } from "@react-google-maps/api";
+import { clusterOptions } from "~/util/mapUtil";
+
+const MapContainer = ({
+	markerConfigs,
+	infoWindowClasses,
+	clusterGridSize = 60
+}) => {
+	const {
+		location,
+		zoom,
+		center,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted
+	} = useMap();
+
+	const {
+		mapItems, filteredListings, setSelectedFilters,
+		setQuery,
+		siteConfig
+	} = useMapList();
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const {
+		poiMarkers,
+		setCurrentCenter,
+		currentCenter,
+		setCurrentZoom,
+		currentZoom,
+		selectedPlaceMarker,
+		setSelectedPlaceMarker,
+		placesWindow,
+		setPlacesWindow } = usePlaces();
+
+	const onIdle = () => {
+		if (!currentCenter || !mapRef.current) return;
+		const newCenter = mapRef.current.getCenter().toJSON();
+		const newZoom = mapRef.current.zoom;
+
+		setCurrentCenter(newCenter);
+
+		if (newZoom !== currentZoom) {
+			setCurrentZoom(newZoom);
+		}
+	};
+
+	useEffect(() => {
+		if (mapContainerRef.current) {
+			const handleScroll = () => {
+				setMapInteracted(true);
+			};
+			var mapContainerRefCurrent = mapContainerRef.current;
+			mapContainerRef.current.addEventListener('wheel', handleScroll);
+			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
+		}
+	}, [mapContainerRef.current]);
+
+	useEffect(() => {
+		if (mapRef.current) {
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
+			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
+			return () => {
+				google.maps.event.removeListener(dragStartListener);
+				google.maps.event.removeListener(mouseDownListener);
+			};
+		}
+	}, [mapRef.current, mapContainerRef.current]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
+			fitBounds(mapRef.current);
+		}
+	}, [mapItems, mapRef.current, location]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
+			fitBounds(mapRef.current, true);
+		}
+		if (mapRef.current) {
+			let currZoom = mapRef.current.zoom;
+			let setZoomVal = currZoom < 13 ? currZoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [filteredListings]);
+
+	useEffect(() => {
+		if (!mapRef.current || !location || mapInteracted) return;
+		mapRef.current.panTo(
+			new google.maps.LatLng(location.latitude, location.longitude)
+		);
+		if (mapRef.current) {
+			let setZoomVal = zoom < 13 ? zoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [location, zoom, mapRef.current]);
+
+	const fitBounds = (map, overload = false) => {
+		if ((mapInteracted === false || overload) && mapItems != null) {
+		  const bounds = new window.google.maps.LatLngBounds();
+		  mapItems.forEach(item => {
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+		  });
+
+		  if (!map) return;
+		  const currentCenter = map.getCenter();
+		  map.fitBounds(bounds);
+		  const newCenter = bounds.getCenter();
+		  if (currentCenter && newCenter) {
+				map.panTo(newCenter);
+		  }
+		}
+		if (mapRef.current.zoom > 17) {
+		  mapRef.current.setZoom(16);
+		}
+	  };
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		selectLocationEntity(mapLocation);
+	};
+
+	const onLoad = map => {
+		if (!location || location === null) {
+			mapRef.current = map;
+			fitBounds(map, true);
+			return;
+		}
+		mapRef.current = map;
+
+		if (mapInteracted === false) {
+			mapRef.current.panTo(
+				new google.maps.LatLng(location.latitude, location.longitude)
+			);
+
+			mapRef.current.setZoom(zoom);
+		}
+	};
+
+	const pinIconUrl = pinIcon({
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	});
+
+	const onClusterClick = cluster => {
+		if(!siteConfig.optionalShowLocationClusterConfig || (mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan)) {
+			console.log("should return");
+			return;
+		}
+		if (!cluster || typeof cluster.getMarkers !== 'function') {
+		  console.error('Cluster object or getMarkers method not available.');
+		  return;
+		}
+
+		const markers = cluster.getMarkers();
+
+		if (!markers || markers.length === 0) {
+		  console.error('No markers found in the cluster.');
+		  return;
+		}
+
+		setTimeout(() => {
+		  const bounds = new window.google.maps.LatLngBounds();
+
+		  markers.forEach(marker => {
+				bounds.extend(marker.getPosition());
+		  });
+
+		  bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
+
+		  if (mapRef.current) {
+				mapRef.current.fitBounds(bounds);
+		  }
+		}, 500);
+	  };
+
+	return (
+		<Map
+			zoom={zoom}
+			center={center}
+			mapContainerRef={mapContainerRef}
+			onLoad={onLoad}
+			onIdle={onIdle}
+			mapInteracted={mapInteracted}
+			pinIconUrl={pinIconUrl}
+			setMapInteracted={setMapInteracted}
+			fitBounds={fitBounds}
+			mapRef={mapRef}
+			setQuery={setQuery}
+			filteredListingsLength={filteredListings.length}
+			setSelectedFilters={setSelectedFilters}
+		>
+			<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)} onClick={onClusterClick}>
+				{clusterer => (
+					<>
+						{mapItems.map(item => (
+							<MapMarker
+								key={item.id}
+								item={item}
+								selectedLocation={location}
+								markerRefs={markerRefs}
+								infoWindowClasses={infoWindowClasses}
+								setSelectedLocation={setLocation}
+								markerClickHandler={markerClickHandler}
+								clusterer={clusterer}
+								markerIcon={markerIcon(markerConfigs)}
+								markerIconSelected={markerIconSelected(markerConfigs)}
+								setMapInteracted={setMapInteracted}
+							/>
+						))}
+						{poiMarkers && poiMarkers.markers.map((marker, index) => (
+							<PlaceMarker
+								key={`marker-${marker.title}-${index}`}
+								marker={marker}
+								index={index}
+								selectedPlaceMarker={selectedPlaceMarker}
+								placesWindow={placesWindow}
+								setPlacesWindow={setPlacesWindow}
+								setSelectedPlaceMarker={setSelectedPlaceMarker}
+							  />
+						))}
+					</>
+				)}
+			</MarkerClustererF>
+		</Map>
+	);
+};
+
+export default MapContainer;

package/src/components/containers/maps/map-list-container.js

@@ -14,7 +14,8 @@ const MapListContainer = ({
 	specialFeatures,
 	fieldNames,
 	showMap,
-	placeMappings
+	placeMappings,
+	mapPosition
 }) => {
 
 	const listProps = {
@@ -41,6 +42,7 @@ const MapListContainer = ({
 			list={<List {...listProps} />}
 			map={<Map {...mapProps} />}
 			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
+			mapPosition={mapPosition}
 		/>
 	);
 };

package/src/components/modules/buttons/show-all-button.js

@@ -1,10 +1,9 @@
 import React from 'react';
 
-const ShowAllButton = ({ mapInteracted, markerConfigs, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
-	if (!mapInteracted || !markerConfigs) {
+const ShowAllButton = ({ mapInteracted, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
+	if (!mapInteracted) {
 		return null;
 	}
-
 	return (
 		<button
 			style={{ fontFamily: 'Roboto, Arial, sans-serif', fontSize: '14px', fontWeight: '500' }}

package/src/components/modules/filter/location.js

@@ -25,8 +25,11 @@ const FilterLocation = ({
 			{!locations && <Loading />}
 			{locations && (
 				<Accordion defaultValue={defaultValue} className="hc-space-y-4">
-					{locations?.map(filter => (
-						<AccordionFilterItem
+					{locations?.map(filter => {
+						if(filter.id === 'entityName' && (!selectedFilters.cityState && !selectedFilters.state)){
+							return;
+						}
+						return(<AccordionFilterItem
 							key={filter.id}
 							filter={filter}
 							setDefaultValue={setDefaultValue}
@@ -36,8 +39,8 @@ const FilterLocation = ({
 								setLocation(null);
 								setSelectedListItem(null);
 							}}
-						/>
-					))}
+						/>);
+					})}
 					{children}
 				</Accordion>
 			)}

package/src/components/modules/maps/map-list.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Tabs from '~/components/modules/maps/tabs';
 
-const MapList = ({ showMap, loading, list, map, filter }) => {
+const MapList = ({ showMap, loading, list, map, filter, mapPosition }) => {
 	return (
 		<>
 			<div
@@ -10,8 +10,18 @@ const MapList = ({ showMap, loading, list, map, filter }) => {
 					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
 				`}
 			>
-				<div>{list}</div>
-				<div>{showMap && map}</div>
+				{mapPosition && mapPosition === 'top' && showMap ? (
+					<>
+						<div>{map}</div>
+						<div>{list}</div>
+					</>
+				) : (
+					<>
+						<div>{list}</div>
+						<div>{showMap && map}</div>
+					</>
+				)}
+
 			</div>
 			<div className="md:hc-hidden">
 				<Tabs

package/src/components/modules/maps/map.js

@@ -1,64 +1,64 @@
-import React from 'react';
-import { GoogleMap } from "@react-google-maps/api";
-import ShowAllButton from "~/components/modules/buttons/show-all-button";
-
-const Map = ({
-	zoom,
-	center,
-	mapContainerRef,
-	onLoad,
-	onIdle,
-	mapInteracted,
-	pinIconUrl,
-	setMapInteracted,
-	fitBounds,
-	mapRef,
-	setQuery,
-	filteredListingsLength,
-	setSelectedFilters,
-	children
-}) => {
-	return (
-		<>
-			{zoom && center && (
-				<div ref={mapContainerRef} className="hc-h-full hc-relative">
-					<GoogleMap
-						zoom={zoom}
-						onLoad={onLoad}
-						onIdle={onIdle}
-						center={center}
-						mapContainerStyle={{
-							width: "100%",
-							height: "100%"
-						}}
-						options={{
-							styles: [
-								{
-									featureType: "poi",
-									elementType: "labels",
-									stylers: [{ visibility: "off" }]
-								}
-							]
-						}}
-					>
-						{children}
-					</GoogleMap>
-					{mapInteracted && (
-						<ShowAllButton
-							mapInteracted={mapInteracted}
-							setMapInteracted={setMapInteracted}
-							fitBounds={fitBounds}
-							mapRef={mapRef}
-							pinIconUrl={pinIconUrl}
-							setQuery={setQuery}
-							listingCount={filteredListingsLength}
-							setSelectedFilters={setSelectedFilters}
-						/>
-					)}
-				</div>
-			)}
-		</>
-	);
-};
-
-export default Map;
+import React from 'react';
+import { GoogleMap } from "@react-google-maps/api";
+import ShowAllButton from "~/components/modules/buttons/show-all-button";
+
+const Map = ({
+	zoom,
+	center,
+	mapContainerRef,
+	onLoad,
+	onIdle,
+	mapInteracted,
+	pinIconUrl,
+	setMapInteracted,
+	fitBounds,
+	mapRef,
+	setQuery,
+	filteredListingsLength,
+	setSelectedFilters,
+	children
+}) => {
+	return (
+		<>
+			{zoom && center && (
+				<div ref={mapContainerRef} className="hc-h-full hc-relative">
+					<GoogleMap
+						zoom={zoom}
+						onLoad={onLoad}
+						onIdle={onIdle}
+						center={center}
+						mapContainerStyle={{
+							width: "100%",
+							height: "100%"
+						}}
+						options={{
+							styles: [
+								{
+									featureType: "poi",
+									elementType: "labels",
+									stylers: [{ visibility: "off" }]
+								}
+							]
+						}}
+					>
+						{children}
+					</GoogleMap>
+					{mapInteracted && (
+						<ShowAllButton
+							mapInteracted={mapInteracted}
+							setMapInteracted={setMapInteracted}
+							fitBounds={fitBounds}
+							mapRef={mapRef}
+							pinIconUrl={pinIconUrl}
+							setQuery={setQuery}
+							listingCount={filteredListingsLength}
+							setSelectedFilters={setSelectedFilters}
+						/>
+					)}
+				</div>
+			)}
+		</>
+	);
+};
+
+export default Map;