@abcagency/hc-ui-components 1.3.15 → 1.3.17

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

@@ -1,87 +1,89 @@
-import React, { useState } from 'react';
-
-import FilterSearch from '~/components/modules/filter/search';
-import FiltersAccordion from '~/components/modules/accordions/filters';
-import FilterLocations from '~/components/modules/filter/location';
-import Button from '~/components/modules/buttons/default';
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-
-const Filter = ({
-	className,
-	showMap
-}) => {
-	const [hasActiveFilters, setHasActiveFilters] = useState(false);
-	const [defaultValue, setDefaultValue] = useState(null);
-	const { setSelectedListItem, setLocation, filterReset } = useMap();
-	const {
-		filteredListings,
-		selectedFilters,
-		setSelectedFilters,
-		setMobileTab,
-		handleSettingFavorites,
-		setQuery,
-		siteConfig
-	} = useMapList();
-
-	return (
-		<div
-			className={`
-			hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
-				${className ?? ""}
-			`}
-		>
-			<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
-				<FiltersAccordion
-					setHasActiveFilters={setHasActiveFilters}
-					defaultValue={defaultValue}
-					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-					setLocation={setLocation}
-					setSelectedListItem={setSelectedListItem}
-				/>
-				<FilterSearch />
-				{siteConfig.hideLocations !== true &&
-					<FilterLocations
-						setHasActiveFilters={setHasActiveFilters}
-						defaultValue={defaultValue}
-						showMap={showMap}
-						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-						setLocation={setLocation}
-						setSelectedListItem={setSelectedListItem}
-					/>
-				}
-			</div>
-			<div className="hc-sticky hc-bottom-0 hc-inset-x-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-mt-2 hc-bg-white md:hc-bg-gray-100">
-				<Button.Btn
-					onClick={() => { filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
-					variant="outline"
-					size="sm"
-				>
-					Reset
-				</Button.Btn>
-				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
-					<Button.Btn
-						onClick={() => setMobileTab("listTab")}
-						variant="primary"
-						size="sm"
-						className={`
-						md:hc-hidden
-						${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-					`}
-					>
-						<Button.Body>
-							<Button.Icon
-								icon="fluent:search-12-filled"
-								size="hc-size-3.5"
-							/>
-							Show {filteredListings.length} Jobs
-						</Button.Body>
-					</Button.Btn>
-				}
-			</div>
-		</div>
-	);
-};
-
-export default Filter;
+import React, { useState } from 'react';
+
+import FilterSearch from '~/components/modules/filter/search';
+import FiltersAccordion from '~/components/modules/accordions/filters';
+import FilterLocations from '~/components/modules/filter/location';
+import Button from '~/components/modules/buttons/default';
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const Filter = ({
+	className,
+	showMap
+}) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const [hasActiveFilters, setHasActiveFilters] = useState(false);
+	const [defaultValue, setDefaultValue] = useState(null);
+	const { setSelectedListItem, setLocation, filterReset } = useMap();
+	const {
+		filteredListings,
+		selectedFilters,
+		setSelectedFilters,
+		setMobileTab,
+		handleSettingFavorites,
+		setQuery,
+		siteConfig
+	} = useMapList();
+
+	return (
+		<div
+			className={`
+			hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
+				${className ?? ""}
+			`}
+		>
+			<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
+				<FiltersAccordion
+					setHasActiveFilters={setHasActiveFilters}
+					defaultValue={defaultValue}
+					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
+					setLocation={setLocation}
+					setSelectedListItem={setSelectedListItem}
+				/>
+				<FilterSearch />
+				{siteConfig.hideLocations !== true &&
+					<FilterLocations
+						setHasActiveFilters={setHasActiveFilters}
+						defaultValue={defaultValue}
+						showMap={showMap}
+						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
+						setLocation={setLocation}
+						setSelectedListItem={setSelectedListItem}
+					/>
+				}
+			</div>
+			<div className="hc-sticky hc-bottom-0 hc-inset-x-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-mt-2 hc-bg-white md:hc-bg-gray-100">
+				<Button.Btn
+					onClick={() => {trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters }); filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
+					variant="outline"
+					size="sm"
+				>
+					Reset
+				</Button.Btn>
+				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
+					<Button.Btn
+						onClick={() => setMobileTab("listTab")}
+						variant="primary"
+						size="sm"
+						className={`
+						md:hc-hidden
+						${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
+					`}
+					>
+						<Button.Body>
+							<Button.Icon
+								icon="fluent:search-12-filled"
+								size="hc-size-3.5"
+							/>
+							Show {filteredListings.length} Jobs
+						</Button.Body>
+					</Button.Btn>
+				}
+			</div>
+		</div>
+	);
+};
+
+export default Filter;

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

@@ -1,81 +1,87 @@
-import React, { useState, useEffect } from 'react';
-
-const FilterItem = ({
-	className,
-	item,
-	type = 'checkbox',
-	itemKey = null,
-	hasCount = true,
-	field,
-	selectedFilters,
-	setSelectedFilters,
-	...rest
-}) => {
-	const itemName = item.name ? item.name : item;
-	itemKey = itemKey === null ? itemName : itemKey;
-	var isActive =
-		selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
-
-	useEffect(() => {
-		if(!selectedFilters)
-			return;
-		 setActiveItem(!!selectedFilters[field]?.[itemKey]);
-	},[selectedFilters, field, itemKey]);
-	const changeHandler = () => {
-		setSelectedFilters(prevFilters => {
-			const updatedFilters = { ...prevFilters };
-			if (!isActive) {
-				if (!updatedFilters[field]) {
-					updatedFilters[field] = {};
-				}
-				updatedFilters[field][itemKey] = true;
-				return updatedFilters;
-			}
-			delete updatedFilters[field][itemKey];
-			if (Object.keys(updatedFilters[field]).length === 0) {
-				delete updatedFilters[field];
-			}
-			return updatedFilters;
-		});
-	};
-	const [activeItem, setActiveItem] = useState(isActive);
-
-	useEffect(() => {
-		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
-		else if (activeItem === true) {
-			setActiveItem(false);
-		}
-	}, [selectedFilters]);
-
-	return (
-		<label
-			className={`
-				hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<input
-				id={itemKey}
-				name={field}
-				disabled={item.count == 0}
-				value={itemName}
-				type={type}
-				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm`}
-				checked={activeItem}
-				onChange={() => {
-					setActiveItem(!activeItem);
-					changeHandler();
-				}}
-			/>
-			<span className="font-medium">{itemName}</span>
-			{hasCount && (
-				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
-					({item.count})
-				</span>
-			)}
-		</label>
-	);
-};
-
-export default FilterItem;
+import React, { useState, useEffect } from 'react';
+
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const FilterItem = ({
+	className,
+	item,
+	type = 'checkbox',
+	itemKey = null,
+	hasCount = true,
+	field,
+	selectedFilters,
+	setSelectedFilters,
+	...rest
+}) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const itemName = item.name ? item.name : item;
+	itemKey = itemKey === null ? itemName : itemKey;
+	var isActive =
+		selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
+
+	useEffect(() => {
+		if(!selectedFilters)
+			return;
+		 setActiveItem(!!selectedFilters[field]?.[itemKey]);
+	},[selectedFilters, field, itemKey]);
+	const changeHandler = () => {
+		if (!isActive) {
+			trackEvent(eventTypes.FILTER_APPLIED, { filterType:  field, filterChecked: itemKey });
+		}
+		setSelectedFilters(prevFilters => {
+			const updatedFilters = { ...prevFilters };
+			if (!isActive) {
+				if (!updatedFilters[field]) {
+					updatedFilters[field] = {};
+				}
+				updatedFilters[field][itemKey] = true;
+				return updatedFilters;
+			}
+			delete updatedFilters[field][itemKey];
+			if (Object.keys(updatedFilters[field]).length === 0) {
+				delete updatedFilters[field];
+			}
+			return updatedFilters;
+		});
+	};
+	const [activeItem, setActiveItem] = useState(isActive);
+
+	useEffect(() => {
+		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
+		else if (activeItem === true) {
+			setActiveItem(false);
+		}
+	}, [selectedFilters]);
+
+	return (
+		<label
+			className={`
+				hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+				${className ?? ""}
+			`}
+			{...rest}
+		>
+			<input
+				id={itemKey}
+				name={field}
+				disabled={item.count == 0}
+				value={itemName}
+				type={type}
+				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm`}
+				checked={activeItem}
+				onChange={() => {
+					setActiveItem(!activeItem);
+					changeHandler();
+				}}
+			/>
+			<span className="font-medium">{itemName}</span>
+			{hasCount && (
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+					({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;

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

@@ -1,73 +1,71 @@
-import React, { useEffect } from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import FilterCommute from '~/components/modules/filter/commute';
-import FilterPointsOfInterest from '~/components/modules/filter/points-of-interest';
-import FilterCard from '~/components/modules/cards/filter';
-import AccordionFilterItem from '~/components/modules/accordions/filterItem';
-
-import Loading from '~/util/loading';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const FilterLocation = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	showMap = false,
-	setLocation,
-	setSelectedListItem
-}) => {
-	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
-	// const activeItemsCount = selectedFilters != null && selectedFilters["cityState"]
-	// 	? Object.keys(selectedFilters["cityState"]).length
-	// 	: 0;
-
-	// const handleClearFilters = () => {
-	// 	setSelectedFilters(prevFilters => {
-	// 		const updatedFilters = { ...prevFilters };
-	// 		delete updatedFilters["cityState"];
-	// 		return updatedFilters;
-	// 	});
-	// };
-	useEffect(() => {
-		console.log(selectedFilters);
-	},[selectedFilters]);
-	var locations = filterOptions?.locations;
-	var pointsOfInterest = filterOptions?.pointsOfInterest;
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fluent:location-16-filled">
-				<span>
-					<span className="hc-hidden lg:hc-inline">Job</span> location
-				</span>
-			</FilterCard.Title>
-			{!locations && (
-				<Loading />
-			)}
-			{locations && <Accordion defaultValue={defaultValue} className="hc-space-y-4">
-				{locations?.map(filter => (
-					<AccordionFilterItem
-						key={filter.id}
-						filter={filter}
-						setDefaultValue={setDefaultValue}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
-					/>
-				))}
-				{showMap && <FilterCommute className="hc-mt-6" />}
-				{showMap && (
-					<FilterPointsOfInterest
-						className="hc-mt-4"
-						pointsOfInterest={pointsOfInterest}
-						setDefaultValue={setDefaultValue}
-						defaultValue={defaultValue}
-					/>
-				)}
-			</Accordion>
-			}
-		</FilterCard>
-	);
-};
-
-export default FilterLocation;
+import React, { useEffect } from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import FilterCommute from '~/components/modules/filter/commute';
+import FilterPointsOfInterest from '~/components/modules/filter/points-of-interest';
+import FilterCard from '~/components/modules/cards/filter';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+
+import Loading from '~/util/loading';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const FilterLocation = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	showMap = false,
+	setLocation,
+	setSelectedListItem
+}) => {
+	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
+	// const activeItemsCount = selectedFilters != null && selectedFilters["cityState"]
+	// 	? Object.keys(selectedFilters["cityState"]).length
+	// 	: 0;
+
+	// const handleClearFilters = () => {
+	// 	setSelectedFilters(prevFilters => {
+	// 		const updatedFilters = { ...prevFilters };
+	// 		delete updatedFilters["cityState"];
+	// 		return updatedFilters;
+	// 	});
+	// };
+
+	var locations = filterOptions?.locations;
+	var pointsOfInterest = filterOptions?.pointsOfInterest;
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fluent:location-16-filled">
+				<span>
+					<span className="hc-hidden lg:hc-inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && (
+				<Loading />
+			)}
+			{locations && <Accordion defaultValue={defaultValue} className="hc-space-y-4">
+				{locations?.map(filter => (
+					<AccordionFilterItem
+						key={filter.id}
+						filter={filter}
+						setDefaultValue={setDefaultValue}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
+					/>
+				))}
+				{showMap && <FilterCommute className="hc-mt-6" />}
+				{showMap && (
+					<FilterPointsOfInterest
+						className="hc-mt-4"
+						pointsOfInterest={pointsOfInterest}
+						setDefaultValue={setDefaultValue}
+						defaultValue={defaultValue}
+					/>
+				)}
+			</Accordion>
+			}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;

package/src/components/modules/filter/radio-item.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Icon from '~/components/modules/icon';
 
 import { useMap } from "~/contexts/mapContext";
+import { useTrackEvent } from '~/contexts/trackEventContext';
 
 const RadioItem = ({
 	className,
@@ -10,11 +11,14 @@ const RadioItem = ({
 	field,
 	...rest
 }) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
 	const { selectedPlaces, setSelectedPlaces } = useMap();
 	const chosenPlace = item.key.toLowerCase();
 	let isActive = selectedPlaces.includes(chosenPlace);
 
 	const changeHandler = () => {
+		if(!isActive)
+			trackEvent(eventTypes.POI_APPLIED, { chosenPlace });
 		setSelectedPlaces([isActive ? '' : chosenPlace]);
 	};
 

package/src/components/modules/jobListing/listing-details.js

@@ -8,8 +8,10 @@ import CommutePill from '~/components/modules/buttons/commute-pill';
 
 import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
 
 const ListingDetails = ({ item, recruiters }) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
 	const { travelTime } = useMap();
 	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
 	if (!item) {
@@ -78,6 +80,8 @@ const ListingDetails = ({ item, recruiters }) => {
 					applyUrl={item?.applyUrl}
 					itemId={item.id}
 					item={item}
+					trackEvent={trackEvent}
+					eventTypes={eventTypes}
 					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${siteConfig.jobsDomain}${item.id}`}
 					className={`
 						lg:hc-w-auto hc-order-first lg:hc-order-last md:hc-self-center hc-py-2 lg:hc-p-0 lg:hc-mb-0 hc-border-b lg:hc-border-none hc-border-uiAccent/20

package/src/components/modules/maps/info-window-content.js

@@ -1,11 +1,13 @@
 import React from 'react';
 
 import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
 
 const InfoWindowContent = ({
 	item,
 	filterListingsByLocation
 }) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
 	const { setSelectedFilters, setMobileTab, selectedFilters, siteConfig } = useMapList();
 	const fieldsShown = siteConfig.fieldsShown;
 	let items = item && item.items ? Object.values(item.items) : null;
@@ -35,27 +37,32 @@ const InfoWindowContent = ({
 						<button
 							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
 							onClick={() => {
+
 								setMobileTab("listTab");
 								const newFilters = { ...selectedFilters };
+								let filters = [];
 
 								if (fieldsShown.includes('cityState')) {
 									newFilters.cityState = {
 										[items[0].fields.cityState]: true
 									};
+									filters.push({ filterType: 'cityState', filterChecked: items[0].fields.cityState });
 								}
 
 								if (fieldsShown.includes('city')) {
 									newFilters.city = {
 										[items[0].fields.city]: true
 									};
+									filters.push({ filterType: 'city', filterChecked: items[0].fields.city });
 								}
 
 								if (fieldsShown.includes('state')) {
 									newFilters.state = {
 										[items[0].fields.state]: true
 									};
+									filters.push({ filterType: 'state', filterChecked: items[0].fields.state });
 								}
-
+								trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
 								setSelectedFilters(newFilters);
 								filterListingsByLocation();
 							}}