@abcagency/hc-ui-components 1.3.15 → 1.3.16

package/src/components/HireControlMap.js

@@ -8,6 +8,7 @@ import MapList from '~/components/modules/maps/map-list';
 import { MapProvider } from '~/contexts/mapContext';
 import { PlacesProvider } from '~/contexts/placesContext';
 import { MapListProvider } from '~/contexts/mapListContext';
+import { TrackEventProvider } from '~/contexts/trackEventContext';
 
 import { getMapConfig } from '~/services/configService';
 import { setClientAuthKey } from '~/clientToken.js';
@@ -21,7 +22,8 @@ export const HireControlMap = ({
 	navigateToDetails = null,
 	navigateToEasyApply = null,
 	Link = null,
-	linkFormat = '/jobs/[slug]'
+	linkFormat = '/jobs/[slug]',
+	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);}
 }) => {
 	const [siteConfig, setSiteconfig] = useState(null);
 
@@ -54,70 +56,73 @@ export const HireControlMap = ({
 					navigateToEasyApply={navigateToEasyApply}
 					Link={Link}
 					linkFormat={linkFormat}
+					trackEvent={trackEvent}
 				/>
 			)}
 		</div>
 	);
 };
 
-const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat }) => {
+const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, trackEvent }) => {
 	const resetFilters = false;
 
 	return (
-		<MapListProvider
-			siteConfig={siteConfig}
-			resetFilters={resetFilters}
-			avigateToDetails={navigateToDetails}
-			navigateToEasyApply={navigateToEasyApply}
-			Link={Link}
-			linkFormat={linkFormat}
-		>
-			<MapProvider resetFilters={resetFilters}>
-				<PlacesProvider
-					placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-					markerColors={{
-						fillColor: siteConfig.colors.primary,
-						strokeColor: siteConfig.colors.primaryDark,
-						selectedFillColor: siteConfig.colors.secondary,
-						selectedStrokeColor: siteConfig.colors.secondaryDark,
-						placeMarkers: {
-							colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-							size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-						}
-					}}
-				>
-					<Grid
-						as='section'
-						id='job-search-interface'
-						columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
-						gap='hc-gap-0'
-						autoRows={false}
-						className='hc-items-stretch hc-h-screen hc-min-h-[30rem] hc-divide-x hc-divide-uiAccent/20'
+		<TrackEventProvider trackEvent={trackEvent}>
+			<MapListProvider
+				siteConfig={siteConfig}
+				resetFilters={resetFilters}
+				avigateToDetails={navigateToDetails}
+				navigateToEasyApply={navigateToEasyApply}
+				Link={Link}
+				linkFormat={linkFormat}
+			>
+				<MapProvider resetFilters={resetFilters}>
+					<PlacesProvider
+						placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+						markerColors={{
+							fillColor: siteConfig.colors.primary,
+							strokeColor: siteConfig.colors.primaryDark,
+							selectedFillColor: siteConfig.colors.secondary,
+							selectedStrokeColor: siteConfig.colors.secondaryDark,
+							placeMarkers: {
+								colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+								size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+							}
+						}}
 					>
-						<Grid.Item className='hc-bg-gray-100'>
-							<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
-						</Grid.Item>
-						<MapList
-							markerConfigs={{
-								fillColor: siteConfig.colors.primary,
-								strokeColor: siteConfig.colors.primaryDark,
-								selectedFillColor: siteConfig.colors.secondary,
-								selectedStrokeColor: siteConfig.colors.secondaryDark,
-								placeMarkers: {
-									colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-									size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-								}
-							}}
-							showMap={siteConfig.showMap}
-							fieldsShown={siteConfig.fieldsShown}
-							specialFeatures={siteConfig.specialFeatures}
-							fieldNames={siteConfig.fieldNames}
-							placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-						/>
-					</Grid>
-				</PlacesProvider>
-			</MapProvider>
-		</MapListProvider>
+						<Grid
+							as='section'
+							id='job-search-interface'
+							columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
+							gap='hc-gap-0'
+							autoRows={false}
+							className='hc-items-stretch hc-h-screen hc-min-h-[30rem] hc-divide-x hc-divide-uiAccent/20'
+						>
+							<Grid.Item className='hc-bg-gray-100'>
+								<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
+							</Grid.Item>
+							<MapList
+								markerConfigs={{
+									fillColor: siteConfig.colors.primary,
+									strokeColor: siteConfig.colors.primaryDark,
+									selectedFillColor: siteConfig.colors.secondary,
+									selectedStrokeColor: siteConfig.colors.secondaryDark,
+									placeMarkers: {
+										colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+										size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+									}
+								}}
+								showMap={siteConfig.showMap}
+								fieldsShown={siteConfig.fieldsShown}
+								specialFeatures={siteConfig.specialFeatures}
+								fieldNames={siteConfig.fieldNames}
+								placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+							/>
+						</Grid>
+					</PlacesProvider>
+				</MapProvider>
+			</MapListProvider>
+		</TrackEventProvider>
 	);
 };
 

package/src/components/modules/accordions/MapAccordionItem.js

@@ -6,6 +6,7 @@ import ItemExpandCard from '~/components/modules/maps/list/item-expand-card';
 
 import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
 
 import { setStorageObject } from '~/util/localStorageUtil';
 
@@ -27,6 +28,7 @@ const MapAccordionItem = ({
 		handleSettingFavorites
 	} = useMapList();
 	const { selectItem } = useMap();
+	const { trackEvent, eventTypes } = useTrackEvent();
 	const setSelectedItemAndZoomMap = item => {
 		if (isActive) {
 			localStorage.removeItem("selectedListItem");
@@ -50,7 +52,7 @@ const MapAccordionItem = ({
 					key={item.id}
 					item={item}
 					fieldsShown={fieldsShown}
-					onClick={() => setSelectedItemAndZoomMap(item)}
+					onClick={() => 	{ trackEvent(eventTypes.JOB_LISTING_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });setSelectedItemAndZoomMap(item);}}
 					showMap={showMap}
 					isActive={isActive}
 					setMobileTab={setMobileTab}

package/src/components/modules/accordions/filterItem.js

@@ -1,55 +1,55 @@
-import React, { memo } from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import FilterItem from '~/components/modules/filter/item';
-import ItemsPill from '~/components/modules/buttons/items-pill';
-
-const AccordionFilterItem = memo(({ filter, setDefaultValue, setSelectedFilters, selectedFilters }) => {
-	const fieldKey = filter.id;
-	const activeItemsCount = selectedFilters != null && selectedFilters[fieldKey]
-		? Object.keys(selectedFilters[fieldKey]).length
-		: 0;
-
-	const handleClearFilters = event => {
-		event.stopPropagation();
-
-		setSelectedFilters(prevFilters => {
-			const updatedFilters = { ...prevFilters };
-			delete updatedFilters[fieldKey];
-			return updatedFilters;
-		});
-	};
-	return (
-		<Accordion.Item key={filter.id} id={filter.id}>
-			<Accordion.Trigger.HasHeader
-				onClick={() => setDefaultValue(filter.id)}
-				className="hc-stretched-link hc-text-left"
-				iconClassName="hc-order-last"
-				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
-				header={
-					activeItemsCount > 0 && (
-						<ItemsPill
-							activeItemsCount={activeItemsCount}
-							onClick={handleClearFilters}
-						/>
-					)
-				}
-			>
-				{filter.title}
-			</Accordion.Trigger.HasHeader>
-			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
-				{filter.items.sort().map(item => (
-					<FilterItem
-						key={item.name}
-						item={item}
-						field={filter.id}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={setSelectedFilters}
-					/>
-				))}
-			</Accordion.Content>
-		</Accordion.Item>
-	);
-});
-AccordionFilterItem.displayName = 'AccordionItem';
-export default AccordionFilterItem;
+import React, { memo } from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import FilterItem from '~/components/modules/filter/item';
+import ItemsPill from '~/components/modules/buttons/items-pill';
+
+const AccordionFilterItem = memo(({ filter, setDefaultValue, setSelectedFilters, selectedFilters }) => {
+	const fieldKey = filter.id;
+	const activeItemsCount = selectedFilters != null && selectedFilters[fieldKey]
+		? Object.keys(selectedFilters[fieldKey]).length
+		: 0;
+
+	const handleClearFilters = event => {
+		event.stopPropagation();
+
+		setSelectedFilters(prevFilters => {
+			const updatedFilters = { ...prevFilters };
+			delete updatedFilters[fieldKey];
+			return updatedFilters;
+		});
+	};
+	return (
+		<Accordion.Item key={filter.id} id={filter.id}>
+			<Accordion.Trigger.HasHeader
+				onClick={() => setDefaultValue(filter.id)}
+				className="hc-stretched-link hc-text-left"
+				iconClassName="hc-order-last"
+				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
+				header={
+					activeItemsCount > 0 && (
+						<ItemsPill
+							activeItemsCount={activeItemsCount}
+							onClick={handleClearFilters}
+						/>
+					)
+				}
+			>
+				{filter.title}
+			</Accordion.Trigger.HasHeader>
+			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
+				{filter.items.sort().map(item => (
+					<FilterItem
+						key={item.name}
+						item={item}
+						field={filter.id}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={setSelectedFilters}
+					/>
+				))}
+			</Accordion.Content>
+		</Accordion.Item>
+	);
+});
+AccordionFilterItem.displayName = 'AccordionItem';
+export default AccordionFilterItem;

package/src/components/modules/accordions/filters.js

@@ -1,47 +1,47 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import AccordionFilterItem from '~/components/modules/accordions/filterItem';
-import FilterCard from '~/components/modules/cards/filter';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-import Loading from '~/util/loading';
-
-const AccordionFilters = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	setLocation,
-	setSelectedListItem
-}) => {
-	const { filterOptions, selectedFilters, setSelectedFilters } = useMapList();
-
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fa-solid:sliders-h">
-				<span>
-					Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
-				</span>
-			</FilterCard.Title>
-
-			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
-				{!filterOptions?.filters && (
-					<Accordion.Item>
-						<Loading />
-					</Accordion.Item>
-				)}
-				{filterOptions?.filters && filterOptions?.filters.map(filter => (
-					<AccordionFilterItem
-						key={filter.id}
-						filter={filter}
-						setDefaultValue={setDefaultValue}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
-					/>
-				))}
-			</Accordion>
-		</FilterCard>
-	);
-};
-
-export default AccordionFilters;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+import FilterCard from '~/components/modules/cards/filter';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+import Loading from '~/util/loading';
+
+const AccordionFilters = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem
+}) => {
+	const { filterOptions, selectedFilters, setSelectedFilters } = useMapList();
+
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fa-solid:sliders-h">
+				<span>
+					Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
+				</span>
+			</FilterCard.Title>
+
+			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
+				{!filterOptions?.filters && (
+					<Accordion.Item>
+						<Loading />
+					</Accordion.Item>
+				)}
+				{filterOptions?.filters && filterOptions?.filters.map(filter => (
+					<AccordionFilterItem
+						key={filter.id}
+						filter={filter}
+						setDefaultValue={setDefaultValue}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
+					/>
+				))}
+			</Accordion>
+		</FilterCard>
+	);
+};
+
+export default AccordionFilters;

package/src/components/modules/buttons/button-group-apply.js

@@ -22,92 +22,99 @@ const ButtonGroupApply = ({
 	internalApplyLink,
 	itemId,
 	item,
-	companyName
+	companyName,
+	trackEvent,
+	eventTypes
 }) => {
-	const applyButton = () => {
-		return <Button.Anchor
-			variant={applyButtonVariant}
-			size={buttonSize}
-		>
-			{applyText}
-		</Button.Anchor>;;
+	const href = linkFormat.replace('[slug]', item.slug ?? item.id);
+
+	const trackApply = () => {
+		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
 	};
 
-	const href = linkFormat.replace('[slug]', item.slug ?? item.id);
+	const trackViewDetails = () => {
+		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
+	};
 
 	return (
 		<nav
 			className={twMerge`
-				hc-flex hc-flex-row hc-justify-between hc-gap-2 hc-w-full
-				${className ?? ''}
-			`}
+        hc-flex hc-flex-row hc-justify-between hc-gap-2 hc-w-full
+        ${className ?? ''}
+      `}
 		>
 			{Link &&
-				<Button.Link
-					Link={Link}
-					href={href}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Link>
+        <Button.Link
+        	Link={Link}
+        	href={href}
+        	variant={detailsButtonVariant}
+        	size={buttonSize}
+        	onClick={trackViewDetails}
+        >
+        	{detailsText}
+        </Button.Link>
 			}
 			{navigateToDetails &&
-				<Button.Anchor
-					href={href}
-					onClick={e => {
-						e.preventDefault();
-						navigateToDetails(item);
-					}}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Anchor>
+        <Button.Anchor
+        	href={href}
+        	onClick={e => {
+        		e.preventDefault();
+        		navigateToDetails(item);
+        		trackViewDetails();
+        	}}
+        	variant={detailsButtonVariant}
+        	size={buttonSize}
+        >
+        	{detailsText}
+        </Button.Anchor>
 			}
 			{detailsUrl && useDetailsPostMessage !== true && navigateToDetails === null &&
-				<Button.Anchor
-					href={detailsUrl}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Anchor>
+        <Button.Anchor
+        	href={detailsUrl}
+        	variant={detailsButtonVariant}
+        	size={buttonSize}
+        	onClick={trackViewDetails}
+        >
+        	{detailsText}
+        </Button.Anchor>
 			}
 			{useDetailsPostMessage === true && navigateToDetails === null &&
-				<Button.Btn
-					onClick={() => { window.parent.postMessage({ itemId: itemId, type: 'LISTING_ID' }, '*'); }}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Btn>}
+        <Button.Btn
+        	onClick={() => {trackViewDetails; window.parent.postMessage({ itemId: itemId, type: 'LISTING_ID' }, '*'); }}
+        	variant={detailsButtonVariant}
+        	size={buttonSize}
+        >
+        	{detailsText}
+        </Button.Btn>}
 			{applyUrl && !includeDialog && navigateToEasyApply == null &&
-				<>
-					<Button.Anchor
-						href={applyUrl}
-						variant={applyButtonVariant}
-						size={buttonSize}
-					>
-						{applyText}
-					</Button.Anchor>
-				</>
+        <Button.Anchor
+        	href={applyUrl}
+        	variant={applyButtonVariant}
+        	size={buttonSize}
+        	onClick={trackApply}
+        >
+        	{applyText}
+        </Button.Anchor>
 			}
 			{applyUrl && !includeDialog && navigateToEasyApply != null &&
-				<>
-					<Button.Btn
-						onClick={() => { navigateToEasyApply(item); }}
-						variant={applyButtonVariant}
-						size={buttonSize}
-					>
-						{applyText}
-					</Button.Btn>
-				</>
+        <Button.Btn
+        	onClick={() => { navigateToEasyApply(item); trackApply(); }}
+        	variant={applyButtonVariant}
+        	size={buttonSize}
+        >
+        	{applyText}
+        </Button.Btn>
 			}
 			{applyUrl && includeDialog &&
-				<ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
-					{applyButton()}
-				</ApplyDialog>
+        <ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
+        	<Button.Anchor
+        		variant={applyButtonVariant}
+        		size={buttonSize}
+        		onClick={trackApply}
+        	>
+        		{applyText}
+        	</Button.Anchor>
+        </ApplyDialog>
 			}
 		</nav>
 	);

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

@@ -6,6 +6,7 @@ import Button from '~/components/modules/buttons/default';
 import Icon from "~/components/modules/icon";
 
 import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
 import { getStorageItem } from '~/util/localStorageUtil';
 
 const FilterCommute = ({ className }) => {
@@ -20,6 +21,7 @@ const FilterCommute = ({ className }) => {
 	const inputRef = useRef(null);
 	const { setCommuteLocation, commuteLocation } = useMapList();
 	const [isCurrentLocation, setIsCurrentLocation] = useState(getStorageItem('isCurrentLocation', false));
+	const { trackEvent, eventTypes } = useTrackEvent();
 
 	useEffect(() => {
 		if (commuteLocation !== null && commuteLocation != '') return;
@@ -38,6 +40,7 @@ const FilterCommute = ({ className }) => {
 		try {
 			const results = await getGeocode({ address: val });
 			const { lat, lng } = await getLatLng(results[0]);
+			trackEvent(eventTypes.COMMUTE_ORIGIN_ADDED, { commuteLocation: { lat, lng }, isCurrentLocation: false });
 			setCommuteLocation({ lat, lng });
 		} catch (error) {
 			// no-op
@@ -51,10 +54,12 @@ const FilterCommute = ({ className }) => {
 		}
 		navigator.geolocation.getCurrentPosition(
 			position => {
-				setCommuteLocation({
+				const location = {
 					lat: position.coords.latitude,
 					lng: position.coords.longitude
-				});
+				};
+				setCommuteLocation(location);
+				trackEvent(eventTypes.COMMUTE_ORIGIN_ADDED, { commuteLocation: location, isCurrentLocation: true });
 				handleSelect("Current Location");
 			},
 			error => {