@abcagency/hc-ui-components 1.3.57 → 1.3.58-uvm.0

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

@@ -1,38 +1,38 @@
-import React from 'react';
-import Tabs from '~/components/modules/maps/tabs';
-
-const MapList = ({ showMap, loading, list, map, filter, mapPosition }) => {
-	return (
-		<>
-			<div
-				className={`
-					${showMap === false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
-					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
-				`}
-			>
-				{mapPosition && mapPosition === 'top' && showMap ? (
-					<>
-						<div>{map}</div>
-						<div>{list}</div>
-					</>
-				) : (
-					<>
-						<div>{list}</div>
-						<div>{showMap && map}</div>
-					</>
-				)}
-
-			</div>
-			<div className="md:hc-hidden">
-				<Tabs
-					showMap={showMap}
-					list={list}
-					map={!loading && showMap && map}
-					filter={filter}
-				/>
-			</div>
-		</>
-	);
-};
-
-export default MapList;
+import React from 'react';
+import Tabs from '~/components/modules/maps/tabs';
+
+const MapList = ({ showMap, loading, list, map, filter, mapPosition }) => {
+	return (
+		<>
+			<div
+				className={`
+					${showMap === false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
+					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
+				`}
+			>
+				{mapPosition && mapPosition === 'top' && showMap ? (
+					<>
+						<div>{map}</div>
+						<div>{list}</div>
+					</>
+				) : (
+					<>
+						<div>{list}</div>
+						<div>{showMap && map}</div>
+					</>
+				)}
+
+			</div>
+			<div className="md:hc-hidden">
+				<Tabs
+					showMap={showMap}
+					list={list}
+					map={!loading && showMap && map}
+					filter={filter}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default MapList;

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

@@ -1,29 +1,29 @@
-import React from 'react';
-import { MarkerF } from '@react-google-maps/api';
-
-const MapMarker = ({
-	position,
-	title,
-	icon,
-	zIndex,
-	onLoad,
-	onClick,
-	clusterer,
-	children
-}) => {
-	return (
-		<MarkerF
-			position={position}
-			title={title}
-			options={{ icon: icon }}
-			zIndex={zIndex}
-			onLoad={onLoad}
-			onClick={onClick}
-			clusterer={clusterer}
-		>
-			{children}
-		</MarkerF>
-	);
-};
-
-export default MapMarker;
+import React from 'react';
+import { MarkerF } from '@react-google-maps/api';
+
+const MapMarker = ({
+	position,
+	title,
+	icon,
+	zIndex,
+	onLoad,
+	onClick,
+	clusterer,
+	children
+}) => {
+	return (
+		<MarkerF
+			position={position}
+			title={title}
+			options={{ icon: icon }}
+			zIndex={zIndex}
+			onLoad={onLoad}
+			onClick={onClick}
+			clusterer={clusterer}
+		>
+			{children}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;

package/src/constants/eventTypes.js

@@ -3,6 +3,7 @@ export const eventTypes = {
 	MAP_MARKER_CLICKED: "map_marker_clicked",
 	JOB_LISTING_SELECTED: "job_listing_selected",
 	APPLY_NOW_CLICKED: "apply_now_clicked",
+	EASY_APPLY_CLICKED: "easy_apply_clicked",
 	VIEW_DETAILS_CLICKED: "view_details_clicked",
 	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
 	POI_APPLIED: "point_of_interest_applied",

package/src/contexts/mapContext.tsx

@@ -1,129 +1,129 @@
-import React, { createContext, useState, useContext, useEffect, useRef, ReactNode } from 'react';
-import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
-import { Listing } from '~/types/Listings';
-import { LatLng } from '~/types/LatLng';
-interface IMapContext {
-  selectedListItem: Listing | null;
-  setSelectedListItem: (item: Listing | null) => void;
-  location: any | null;
-  setLocation: (location: LatLng | null) => void;
-  center: LatLng;
-  setCenter: (center: LatLng) => void;
-  zoom: number;
-  setZoom: (zoom: number) => void;
-  selectedPlaces: string[];
-  setSelectedPlaces: (places: string[]) => void;
-  mapInteracted: boolean;
-  setMapInteracted: (interacted: boolean) => void;
-  userSetZoom: React.MutableRefObject<boolean>;
-  firstLoadListItem: any;
-  selectItem: (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => void;
-  filterReset: () => void;
-  selectLocationEntity: (location: LatLng) => void;
-}
-
-const MapContext = createContext<IMapContext | undefined>(undefined);
-
-export const useMap = () => {
-	const context = useContext(MapContext);
-	if (!context) {
-		throw new Error("useMap must be used within a MapProvider");
-	}
-	return context;
-};
-
-interface MapProviderProps {
-  children: ReactNode;
-  resetFilters: boolean;
-}
-
-export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters }) => {
-	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject('selectedListItem'));
-	const [location, setLocation] = useState<any>(getStorageObject('location'));
-	const [center, setCenter] = useState<LatLng>(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
-	const [zoom, setZoom] = useState<number>(getStorageObject("zoom", 10) || 10);
-	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
-	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
-	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
-	const userSetZoom = useRef<boolean>(true);
-
-	useEffect(() => {
-		setStorageObject("selectedListItem", selectedListItem);
-	}, [selectedListItem]);
-
-	useEffect(() => {
-		localStorage.setItem("zoom", zoom.toString());
-	}, [zoom]);
-
-	useEffect(() => {
-		if (location == null) {
-			localStorage.removeItem("location");
-		} else {
-			setStorageObject("location", location);
-		}
-	}, [location]);
-
-	useEffect(() => {
-		setStorageObject("center", center);
-	}, [center]);
-
-	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
-		setSelectedListItem(item);
-		if (mapInteracted === false && itemLocation != null) {
-			setLocation(itemLocation);
-		}
-		if (mapInteracted === false || itemLocation != null) {
-			setLocation(itemLocation);
-			setCenter(center);
-		}
-		if (mapInteracted === false) {
-			setZoom(zoom);
-		}
-	};
-
-	const filterReset = () => {
-		setSelectedPlaces([]);
-		setSelectedListItem(null);
-		setLocation(null);
-		setZoom(8);
-		setMapInteracted(false);
-	};
-
-	useEffect(() => {
-		if (resetFilters === true) {
-			filterReset();
-		}
-	}, [resetFilters]);
-
-	const selectLocationEntity = (location: LatLng) => {
-		localStorage.removeItem("selectedListItem");
-		setTimeout(() => setLocation(location), 200);
-		setSelectedListItem(null);
-	};
-
-	return (
-		<MapContext.Provider
-			value={{
-				selectedListItem,
-				setSelectedListItem,
-				location,
-				center,
-				setCenter,
-				zoom,
-				setZoom,
-				selectItem,
-				setSelectedPlaces,
-				selectedPlaces,
-				selectLocationEntity,
-				setLocation,
-				setMapInteracted,
-				mapInteracted,
-				userSetZoom,
-				firstLoadListItem,
-				filterReset
-			}}
-		>
-			{children}
-		</MapContext.Provider>
-	);
-};
+import React, { createContext, useState, useContext, useEffect, useRef, ReactNode } from 'react';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+import { Listing } from '~/types/Listings';
+import { LatLng } from '~/types/LatLng';
+interface IMapContext {
+  selectedListItem: Listing | null;
+  setSelectedListItem: (item: Listing | null) => void;
+  location: any | null;
+  setLocation: (location: LatLng | null) => void;
+  center: LatLng;
+  setCenter: (center: LatLng) => void;
+  zoom: number;
+  setZoom: (zoom: number) => void;
+  selectedPlaces: string[];
+  setSelectedPlaces: (places: string[]) => void;
+  mapInteracted: boolean;
+  setMapInteracted: (interacted: boolean) => void;
+  userSetZoom: React.MutableRefObject<boolean>;
+  firstLoadListItem: any;
+  selectItem: (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => void;
+  filterReset: () => void;
+  selectLocationEntity: (location: LatLng) => void;
+}
+
+const MapContext = createContext<IMapContext | undefined>(undefined);
+
+export const useMap = () => {
+	const context = useContext(MapContext);
+	if (!context) {
+		throw new Error("useMap must be used within a MapProvider");
+	}
+	return context;
+};
+
+interface MapProviderProps {
+  children: ReactNode;
+  resetFilters: boolean;
+}
+
+export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters }) => {
+	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject('selectedListItem'));
+	const [location, setLocation] = useState<any>(getStorageObject('location'));
+	const [center, setCenter] = useState<LatLng>(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
+	const [zoom, setZoom] = useState<number>(getStorageObject("zoom", 10) || 10);
+	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
+	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
+	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
+	const userSetZoom = useRef<boolean>(true);
+
+	useEffect(() => {
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
+
+	useEffect(() => {
+		localStorage.setItem("zoom", zoom.toString());
+	}, [zoom]);
+
+	useEffect(() => {
+		if (location == null) {
+			localStorage.removeItem("location");
+		} else {
+			setStorageObject("location", location);
+		}
+	}, [location]);
+
+	useEffect(() => {
+		setStorageObject("center", center);
+	}, [center]);
+
+	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
+		setSelectedListItem(item);
+		if (mapInteracted === false && itemLocation != null) {
+			setLocation(itemLocation);
+		}
+		if (mapInteracted === false || itemLocation != null) {
+			setLocation(itemLocation);
+			setCenter(center);
+		}
+		if (mapInteracted === false) {
+			setZoom(zoom);
+		}
+	};
+
+	const filterReset = () => {
+		setSelectedPlaces([]);
+		setSelectedListItem(null);
+		setLocation(null);
+		setZoom(8);
+		setMapInteracted(false);
+	};
+
+	useEffect(() => {
+		if (resetFilters === true) {
+			filterReset();
+		}
+	}, [resetFilters]);
+
+	const selectLocationEntity = (location: LatLng) => {
+		localStorage.removeItem("selectedListItem");
+		setTimeout(() => setLocation(location), 200);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<MapContext.Provider
+			value={{
+				selectedListItem,
+				setSelectedListItem,
+				location,
+				center,
+				setCenter,
+				zoom,
+				setZoom,
+				selectItem,
+				setSelectedPlaces,
+				selectedPlaces,
+				selectLocationEntity,
+				setLocation,
+				setMapInteracted,
+				mapInteracted,
+				userSetZoom,
+				firstLoadListItem,
+				filterReset
+			}}
+		>
+			{children}
+		</MapContext.Provider>
+	);
+};

package/src/contexts/mapListContext.tsx

@@ -42,6 +42,8 @@ interface MapListContextProps {
   navigateToEasyApply: (id: number) => void;
   Link: React.ComponentType<any>;
   linkFormat: string;
+  easyApplyUrl: string;
+  easyApplyText: string;
   sortSetting: { field: string; type: string };
   setSortSetting: (setting: { field: string; type: string }) => void;
   trackEvent: (event: string) => void;
@@ -73,6 +75,8 @@ interface MapListProviderProps {
   navigateToEasyApply: (id: number) => void;
   Link: React.ComponentType<any>;
   linkFormat: string;
+  easyApplyUrl: string;
+  easyApplyText: string;
   trackEvent: (event: string) => void;
   listings?: Listing[];
   setFiltersUrl?:boolean;
@@ -87,6 +91,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	navigateToEasyApply,
 	Link,
 	linkFormat,
+	easyApplyUrl,
+	easyApplyText,
 	trackEvent,
 	listings = [],
 	setFiltersUrl,
@@ -308,6 +314,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			navigateToEasyApply,
 			Link,
 			linkFormat,
+			easyApplyUrl,
+			easyApplyText,
 			sortSetting,
 			setSortSetting,
 			trackEvent

package/src/contexts/placesContext.js

@@ -1,102 +1,102 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
-import { markerIconProps } from '~/util/mapIconUtil';
-
-import { useMap } from '~/contexts/mapContext';
-
-import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
-
-const PlacesContext = createContext();
-
-export const usePlaces = () => useContext(PlacesContext);
-
-export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
-	const { selectedPlaces, zoom, center } = useMap();
-	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
-	const [currentCenter, setCurrentCenter] = useState(center);
-	const [currentZoom, setCurrentZoom] = useState(zoom);
-	const [placesWindow, setPlacesWindow] = useState(false);
-	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
-
-	const getRadiusForZoom = () => {
-		if (currentZoom >= 18) return 1000;
-		if (currentZoom <= 10) return 0;
-
-		let tempZoom = Math.pow(19 - currentZoom, 4.85);
-		let radius = tempZoom;
-		let minRadius = 1500;
-		let maxRadius = 800000;
-
-		if (radius < minRadius) radius = minRadius;
-		else if (radius > maxRadius) radius = maxRadius;
-
-		return radius;
-	};
-
-	useEffect(() => {
-		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
-			setPoiMarkers({ markers: [], icon: null });
-			return;
-		}
-		const fetchPlaces = async () => {
-			let poiTypes = [];
-			const selectedPOICategories = selectedPlaces;
-			selectedPOICategories.forEach(pointOfInterest => {
-				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
-			});
-
-			const radius = getRadiusForZoom();
-			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
-
-			try {
-				const response = await searchNearbyPlaces(poiTypes, location, radius);
-				const newMarkers = response.places.map(place => {
-					const getParentCategory = types => {
-						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
-							return acc.concat(placeMappings[category]);
-						}, []);
-
-						for (const type of types) {
-							if (!selectedTypes.includes(type)) continue;
-							for (const category in placeMappings) {
-								if (placeMappings[category].includes(type)) {
-									return category;
-								}
-							}
-
-						}
-					};
-
-					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
-
-					return {
-						position: { lat: place.location.latitude, lng: place.location.longitude },
-						title: place.displayName.text,
-						icon: icon
-					};
-				});
-				setPoiMarkers({ markers: newMarkers, icon: null });
-			} catch (error) {
-				console.error('Failed to fetch places:', error);
-			}
-		};
-
-		fetchPlaces();
-	}, [selectedPlaces, currentZoom, currentCenter]);
-
-	return (
-		<PlacesContext.Provider value={{
-			poiMarkers,
-			setCurrentCenter,
-			currentCenter,
-			setCurrentZoom,
-			currentZoom,
-			placesWindow,
-			setPlacesWindow,
-			selectedPlaceMarker,
-			setSelectedPlaceMarker
-		}}>
-			{children}
-		</PlacesContext.Provider>
-	);
-};
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { markerIconProps } from '~/util/mapIconUtil';
+
+import { useMap } from '~/contexts/mapContext';
+
+import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
+
+const PlacesContext = createContext();
+
+export const usePlaces = () => useContext(PlacesContext);
+
+export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
+	const { selectedPlaces, zoom, center } = useMap();
+	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
+	const [currentCenter, setCurrentCenter] = useState(center);
+	const [currentZoom, setCurrentZoom] = useState(zoom);
+	const [placesWindow, setPlacesWindow] = useState(false);
+	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
+
+	const getRadiusForZoom = () => {
+		if (currentZoom >= 18) return 1000;
+		if (currentZoom <= 10) return 0;
+
+		let tempZoom = Math.pow(19 - currentZoom, 4.85);
+		let radius = tempZoom;
+		let minRadius = 1500;
+		let maxRadius = 800000;
+
+		if (radius < minRadius) radius = minRadius;
+		else if (radius > maxRadius) radius = maxRadius;
+
+		return radius;
+	};
+
+	useEffect(() => {
+		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
+			setPoiMarkers({ markers: [], icon: null });
+			return;
+		}
+		const fetchPlaces = async () => {
+			let poiTypes = [];
+			const selectedPOICategories = selectedPlaces;
+			selectedPOICategories.forEach(pointOfInterest => {
+				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
+			});
+
+			const radius = getRadiusForZoom();
+			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
+
+			try {
+				const response = await searchNearbyPlaces(poiTypes, location, radius);
+				const newMarkers = response.places.map(place => {
+					const getParentCategory = types => {
+						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
+							return acc.concat(placeMappings[category]);
+						}, []);
+
+						for (const type of types) {
+							if (!selectedTypes.includes(type)) continue;
+							for (const category in placeMappings) {
+								if (placeMappings[category].includes(type)) {
+									return category;
+								}
+							}
+
+						}
+					};
+
+					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
+
+					return {
+						position: { lat: place.location.latitude, lng: place.location.longitude },
+						title: place.displayName.text,
+						icon: icon
+					};
+				});
+				setPoiMarkers({ markers: newMarkers, icon: null });
+			} catch (error) {
+				console.error('Failed to fetch places:', error);
+			}
+		};
+
+		fetchPlaces();
+	}, [selectedPlaces, currentZoom, currentCenter]);
+
+	return (
+		<PlacesContext.Provider value={{
+			poiMarkers,
+			setCurrentCenter,
+			currentCenter,
+			setCurrentZoom,
+			currentZoom,
+			placesWindow,
+			setPlacesWindow,
+			selectedPlaceMarker,
+			setSelectedPlaceMarker
+		}}>
+			{children}
+		</PlacesContext.Provider>
+	);
+};