@abcagency/hc-ui-components 1.3.15 → 1.3.16

package/src/components/modules/maps/list/index.js

@@ -1,107 +1,112 @@
-import React from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import Header from '~/components/modules/maps/list/header';
-import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
-import Sort from '~/components/modules/filter/sort';
-import ListingDetails from '~/components/modules/jobListing/listing-details';
-
-import useListLogic from '~/hooks/useList';
-
-import Loading from "~/util/loading";
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-
-import { dynamicSort } from '~/util/sortUtil';
-
-const ItemsList = ({
-	fieldNames,
-	showMap,
-	fieldsShown,
-	specialFeatures
-}) => {
-	const { mapItems, filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
-	const {
-		itemLimit,
-		loader,
-		scrollContainerRef,
-		itemRefs
-	} = useListLogic(filteredListings);
-	const { selectedListItem } = useMap();
-
-	const itemExpandedContent = (item, recruiters) =>
-		item ? <ListingDetails item={item} recruiters={recruiters} /> : null;
-	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
-		fieldsShown.push('travelTime');
-		fieldNames['travelTime'] = 'Commute';
-	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
-		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
-	}
-
-	return (
-		<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
-			<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
-				<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
-					{loading &&
-						<span>Loading...</span>
-					}
-					{!loading &&
-						<span>{filteredListings.length} results</span>
-					}
-				</h2>
-				<div className="hc-block md:hc-hidden">
-					<Sort
-						fields={fieldsShown}
-						setSortSetting={setSortSetting}
-						fieldNames={fieldNames}
-					/>
-				</div>
-			</div>
-			<div>
-				<Header
-					setSortSetting={setSortSetting}
-					sortSetting={sortSetting}
-					fieldsShown={fieldsShown}
-					fieldNames={fieldNames}
-				/>
-			</div>
-			<div
-				ref={scrollContainerRef}
-				className={`
-					hc-flex-grow hc-overflow-y-auto
-					${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
-				`}
-			>
-				{loading ? (
-					<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
-						<Loading />
-					</div>
-				) : (
-					<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
-						{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings).slice(0, itemLimit).map(item => {
-							return (<MapAccordionItem
-								key={item.id}
-								showMap={showMap}
-								item={item}
-								itemRefs={itemRefs}
-								fieldsShown={fieldsShown}
-								itemExpandedContent={itemExpandedContent}
-								specialFeatures={specialFeatures}
-								mapItems={mapItems}
-								isActive={selectedListItem?.id == item.id}
-								hasListItemSelected={selectedListItem != null}
-							/>
-							);
-						})}
-					</Accordion>
-				)}
-				<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
-					{filteredListings.length >= itemLimit && <Loading />}
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default ItemsList;
+import React from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import Header from '~/components/modules/maps/list/header';
+import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
+import Sort from '~/components/modules/filter/sort';
+import ListingDetails from '~/components/modules/jobListing/listing-details';
+
+import useListLogic from '~/hooks/useList';
+
+import Loading from "~/util/loading";
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+import { dynamicSort } from '~/util/sortUtil';
+
+const ItemsList = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	specialFeatures
+}) => {
+	const { mapItems, filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
+	const {
+		itemLimit,
+		loader,
+		scrollContainerRef,
+		itemRefs
+	} = useListLogic(filteredListings);
+	const { selectedListItem } = useMap();
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const itemExpandedContent = (item, recruiters) =>
+		item ? <ListingDetails item={item} recruiters={recruiters} /> : null;
+	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
+		fieldsShown.push('travelTime');
+		fieldNames['travelTime'] = 'Commute';
+	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
+		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
+	}
+
+	const setTrackedSortSetting = sortSetting => {
+		trackEvent(eventTypes.LIST_SORTED, sortSetting);
+		setSortSetting(sortSetting);
+	};
+	return (
+		<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
+			<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
+				<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
+					{loading &&
+						<span>Loading...</span>
+					}
+					{!loading &&
+						<span>{filteredListings.length} results</span>
+					}
+				</h2>
+				<div className="hc-block md:hc-hidden">
+					<Sort
+						fields={fieldsShown}
+						setSortSetting={setTrackedSortSetting}
+						fieldNames={fieldNames}
+					/>
+				</div>
+			</div>
+			<div>
+				<Header
+					setSortSetting={setTrackedSortSetting}
+					sortSetting={sortSetting}
+					fieldsShown={fieldsShown}
+					fieldNames={fieldNames}
+				/>
+			</div>
+			<div
+				ref={scrollContainerRef}
+				className={`
+					hc-flex-grow hc-overflow-y-auto
+					${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
+				`}
+			>
+				{loading ? (
+					<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
+						<Loading />
+					</div>
+				) : (
+					<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
+						{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings).slice(0, itemLimit).map(item => {
+							return (<MapAccordionItem
+								key={item.id}
+								showMap={showMap}
+								item={item}
+								itemRefs={itemRefs}
+								fieldsShown={fieldsShown}
+								itemExpandedContent={itemExpandedContent}
+								specialFeatures={specialFeatures}
+								mapItems={mapItems}
+								isActive={selectedListItem?.id == item.id}
+								hasListItemSelected={selectedListItem != null}
+							/>
+							);
+						})}
+					</Accordion>
+				)}
+				<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
+					{filteredListings.length >= itemLimit && <Loading />}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ItemsList;

package/src/components/modules/maps/list/list-item/index.js

@@ -5,6 +5,7 @@ import Icon from '~/components/modules/icon';
 import FieldMapper from '~/components/modules/maps/list/field-mapper';
 
 import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
 
 const ListItem = forwardRef(
 	(
@@ -25,6 +26,7 @@ const ListItem = forwardRef(
 		ref
 	) => {
 		const { siteConfig } = useMapList();
+		const { trackEvent, eventTypes } = useTrackEvent();
 		const mapPinColor = siteConfig.colors.primary.replace("#", "");
 
 		const handleClick = () => {
@@ -41,11 +43,11 @@ const ListItem = forwardRef(
 			if (isFavorite) {
 				updatedFavorites = favorites.filter(fav => fav !== item.id);
 			} else {
+				trackEvent(eventTypes.FAVORITE_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
 				updatedFavorites = [...favorites, item.id];
 			}
 			isFavorite = !isFavorite;
 			setFavorites(updatedFavorites);
-
 		};
 
 		return (

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

@@ -6,6 +6,7 @@ import InfoWindowContent from "~/components/modules/maps/info-window-content";
 
 import { useMap } from "~/contexts/mapContext";
 import { useMapList } from "~/contexts/mapListContext";
+import { useTrackEvent } from '~/contexts/trackEventContext';
 
 const MapMarker = ({
 	item,
@@ -21,7 +22,7 @@ const MapMarker = ({
 	const { setLocation, commuteLocation } = useMap();
 	const isSelected = item.id === selectedLocation?.id;
 	const markerRef = useRef(null);
-
+	const { trackEvent, eventTypes } = useTrackEvent();
 	const {
 		handleFilterListingsByLocation
 	} = useMapList();
@@ -31,6 +32,7 @@ const MapMarker = ({
 	}, []);
 
 	const onMarkerClick = () => {
+		trackEvent(eventTypes.MAP_MARKER_CLICKED, { entityDisplayName: item.entityDisplayName, lat: item.latitude, lng: item.longitude, travelTime: item.travelTime });
 		setMapInteracted(true);
 		markerClickHandler(item);
 	};

package/src/constants/eventTypes.js

@@ -0,0 +1,13 @@
+export const eventTypes = {
+	FILTER_APPLIED: "filter_applied",
+	MAP_MARKER_CLICKED: "map_marker_clicked",
+	JOB_LISTING_SELECTED: "job_listing_selected",
+	APPLY_NOW_CLICKED: "apply_now_clicked",
+	VIEW_DETAILS_CLICKED: "view_details_clicked",
+	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
+	POI_APPLIED: "point_of_interest_applied",
+	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
+	FAVORITE_SELECTED: "favorite_job_selected",
+	LIST_SORTED: "jobs_list_sorted",
+	FILTERS_RESET: "filters_reset_button_clicked"
+};

package/src/contexts/mapContext.js

@@ -1,101 +1,101 @@
-import React, { createContext, useState, useContext, useEffect, useRef } from 'react';
-import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
-
-const MapContext = createContext();
-
-export const useMap = () => {
-	const context = useContext(MapContext);
-	if (!context) {
-		throw new Error("useMap must be used within a MapProvider");
-	}
-	return context;
-};
-
-export const MapProvider = ({ children, resetFilters }) => {
-	const [selectedListItem, setSelectedListItem] = useState(getStorageObject('selectedListItem'));
-	const [location, setLocation] = useState(getStorageObject('location'));
-	const [center, setCenter] = useState(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }));
-	const [zoom, setZoom] = useState(getStorageObject("zoom", 10));
-	const [selectedPlaces, setSelectedPlaces] = useState([]);
-	const [mapInteracted, setMapInteracted] = useState(false);
-	const [firstLoadListItem] = useState(getStorageObject('selectedListItem') ?? { id: "defaultId" });
-	const userSetZoom = useRef(true);
-
-	useEffect(() => {
-		setStorageObject("selectedListItem", selectedListItem);
-	}, [selectedListItem]);
-
-	useEffect(() => {
-		localStorage.setItem("zoom", zoom);
-	}, [zoom]);
-
-	useEffect(() => {
-		if (location == null) {
-			localStorage.removeItem("location");
-		} else {
-			setStorageObject("location", location);
-		}
-	}, [location]);
-
-	useEffect(() => {
-		setStorageObject("center", center);
-	}, [center]);
-
-	const selectItem = (item, itemLocation, zoom, center) => {
-		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);
-	};
-
-	if (resetFilters === true) {
-		filterReset();
-	}
-	const selectLocationEntity = location => {
-
-		localStorage.removeItem("selectedListItem");
-		setTimeout(() => setLocation(location), 200);
-		setSelectedListItem(null);
-	};
-
-	return (
-		<MapContext.Provider
-			value={{
-				selectedListItem,
-				setSelectedListItem,
-				location,
-				center,
-				zoom,
-				setZoom,
-				selectItem,
-				setSelectedPlaces,
-				selectedPlaces,
-				selectLocationEntity,
-				setLocation,
-				setMapInteracted,
-				mapInteracted,
-				userSetZoom,
-				firstLoadListItem,
-				filterReset
-			}}
-		>
-			{children}
-		</MapContext.Provider>
-	);
-};
+import React, { createContext, useState, useContext, useEffect, useRef } from 'react';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+
+const MapContext = createContext();
+
+export const useMap = () => {
+	const context = useContext(MapContext);
+	if (!context) {
+		throw new Error("useMap must be used within a MapProvider");
+	}
+	return context;
+};
+
+export const MapProvider = ({ children, resetFilters }) => {
+	const [selectedListItem, setSelectedListItem] = useState(getStorageObject('selectedListItem'));
+	const [location, setLocation] = useState(getStorageObject('location'));
+	const [center, setCenter] = useState(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }));
+	const [zoom, setZoom] = useState(getStorageObject("zoom", 10));
+	const [selectedPlaces, setSelectedPlaces] = useState([]);
+	const [mapInteracted, setMapInteracted] = useState(false);
+	const [firstLoadListItem] = useState(getStorageObject('selectedListItem') ?? { id: "defaultId" });
+	const userSetZoom = useRef(true);
+
+	useEffect(() => {
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
+
+	useEffect(() => {
+		localStorage.setItem("zoom", zoom);
+	}, [zoom]);
+
+	useEffect(() => {
+		if (location == null) {
+			localStorage.removeItem("location");
+		} else {
+			setStorageObject("location", location);
+		}
+	}, [location]);
+
+	useEffect(() => {
+		setStorageObject("center", center);
+	}, [center]);
+
+	const selectItem = (item, itemLocation, zoom, center) => {
+		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);
+	};
+
+	if (resetFilters === true) {
+		filterReset();
+	}
+	const selectLocationEntity = location => {
+
+		localStorage.removeItem("selectedListItem");
+		setTimeout(() => setLocation(location), 200);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<MapContext.Provider
+			value={{
+				selectedListItem,
+				setSelectedListItem,
+				location,
+				center,
+				zoom,
+				setZoom,
+				selectItem,
+				setSelectedPlaces,
+				selectedPlaces,
+				selectLocationEntity,
+				setLocation,
+				setMapInteracted,
+				mapInteracted,
+				userSetZoom,
+				firstLoadListItem,
+				filterReset
+			}}
+		>
+			{children}
+		</MapContext.Provider>
+	);
+};