@abcagency/hc-ui-components 1.3.23 → 1.3.25

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@abcagency/hc-ui-components",
-	"version": "1.3.23",
+	"version": "1.3.25",
 	"description": "UI Components for HireControl",
 	"main": "dist/index.js",
 	"files": [
-		"dist"
+		"dist",
+		"src"
 	  ],
 	"scripts": {
 		"build": "cross-env NODE_ENV=production rollup -c",
@@ -30,9 +31,7 @@
 		"ajv-keywords": "^5.1.0",
 		"framer-motion": "^10.18.0",
 		"fuse.js": "^7.0.0",
-		"npm": "^10.8.1",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1",
+		"npm": "^10.8.1",	
 		"react-router-dom": "^6.23.1",
 		"react-scripts": "5.0.1",
 		"react-wrap-balancer": "^1.1.1",

package/src/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: http://EditorConfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/src/apis/hcApi.ts

@@ -0,0 +1,109 @@
+import { getClientAuthKey } from '~/clientToken';
+const baseURL = process.env.HC_API_BASE_URL as string;
+
+interface MemoryStorage {
+	authToken: string | null;
+	tokenExpiration: string | null;
+}
+
+const memoryStorage: MemoryStorage = {
+	authToken: null,
+	tokenExpiration: null
+};
+
+function setStorage(key: keyof MemoryStorage, value: string): void {
+	try {
+		sessionStorage.setItem(key, value);
+	} catch (error) {
+		memoryStorage[key] = value;
+	}
+}
+
+function getStorage(key: keyof MemoryStorage): string | null {
+	try {
+		return sessionStorage.getItem(key) || memoryStorage[key];
+	} catch (error) {
+		return memoryStorage[key];
+	}
+}
+
+interface AuthResponse {
+	token: string;
+	expiration: string;
+}
+
+const login = async (): Promise<AuthResponse> => {
+	const clientAuthKey = getClientAuthKey();
+
+	try {
+		const response = await fetch(`${baseURL}/auth/login`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				clientAuthKey: clientAuthKey
+			})
+		});
+
+		if (!response.ok) {
+			throw new Error('Login failed');
+		}
+
+		const data = await response.json();
+
+		if (data.token && data.expiration) {
+			setStorage('authToken', data.token);
+			setStorage('tokenExpiration', data.expiration);
+			return { token: data.token, expiration: data.expiration };
+		} else {
+			throw new Error('Invalid login response');
+		}
+	} catch (error) {
+		console.error('Login failed:', error);
+		throw error;
+	}
+};
+
+const fetchWithAuth = async (url: string, options: RequestInit = {}): Promise<Response> => {
+	let token = getStorage('authToken');
+
+	const expirationDateTime = getStorage('tokenExpiration');
+	const currentTime = new Date();
+
+	if (!token || !expirationDateTime || new Date(expirationDateTime) <= currentTime) {
+		const authResponse = await login();
+		token = authResponse.token;
+	}
+
+	const headers = new Headers(options.headers || {});
+	headers.append('Authorization', `Bearer ${token}`);
+
+	const finalOptions = {
+		...options,
+		headers
+	};
+
+	const response = await fetch(`${baseURL}${url}`, finalOptions);
+
+	if (!response.ok) throw new Error('Network response was not ok.');
+
+	return response;
+};
+
+export default {
+	get: async <T>(url: string): Promise<T> => {
+		const response = await fetchWithAuth(url);
+		return await response.json() as T;
+	},
+	post: async <T>(url: string, data: any): Promise<T> => {
+		const response = await fetchWithAuth(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(data)
+		});
+		return await response.json() as T;
+	}
+};

package/src/bundleIndex.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import HireControlMap from '~/components/HireControlMap';
+
+const initializeComponent = (elementId, props) => {
+	const element = document.getElementById(elementId);
+	if (element) {
+		ReactDOM.render(<div className='hc-bundle'><HireControlMap {...props} /></div>, element);
+	} else {
+		console.error(`Element with id ${elementId} not found`);
+	}
+};
+
+export { HireControlMap, initializeComponent };

package/src/clientToken.js

@@ -0,0 +1,9 @@
+let clientAuthKey = null;
+
+export const setClientAuthKey = key => {
+	clientAuthKey = key;
+};
+
+export const getClientAuthKey = () => {
+	return clientAuthKey;
+};

package/src/components/HireControlMap.js

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+import { useLoadScript } from '@react-google-maps/api';
+
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/containers/maps/map-list-container';
+
+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';
+
+import '../styles/index.css';
+
+const libraries = ['places'];
+
+export const HireControlMap = ({
+	clientToken,
+	navigateToDetails = null,
+	navigateToEasyApply = null,
+	Link = null,
+	linkFormat = '/jobs/[slug]',
+	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);},
+	listings = [],
+	setFiltersUrl = null
+}) => {
+	const [siteConfig, setSiteconfig] = useState(null);
+
+	useEffect(() => {
+		setClientAuthKey(clientToken);
+		const fetchSiteConfig = async () => {
+			try {
+				const configData = await getMapConfig(clientToken);
+				setSiteconfig(configData);
+			} catch (error) {
+				console.error('Failed to fetch site configuration:', error);
+			}
+		};
+
+		fetchSiteConfig();
+	}, [clientToken]);
+
+	const { isLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: libraries
+	});
+
+	return (
+		<div>
+			{isLoaded && siteConfig && (
+				<HomeBody
+					siteConfig={siteConfig}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					trackEvent={trackEvent}
+					listings={listings}
+					setFiltersUrl={setFiltersUrl}
+				/>
+			)}
+		</div>
+	);
+};
+
+const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, trackEvent, listings, setFiltersUrl }) => {
+	const resetFilters = false;
+
+	return (
+		<TrackEventProvider trackEvent={trackEvent}>
+			<MapListProvider
+				siteConfig={siteConfig}
+				resetFilters={resetFilters}
+				avigateToDetails={navigateToDetails}
+				navigateToEasyApply={navigateToEasyApply}
+				Link={Link}
+				linkFormat={linkFormat}
+				listings={listings}
+				setFiltersUrl={setFiltersUrl}
+			>
+				<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-bundle 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>
+	);
+};
+
+export default HireControlMap;

package/src/components/containers/accordions/filter-container.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useMapList } from '~/contexts/mapListContext';
+import AccordionFilters from '~/components/modules/accordions/filters';
+import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
+
+const AccordionFiltersContainer = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem,
+	SubcategoryRequireCategory
+}) => {
+	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig } = useMapList();
+
+	const handleSetSelectedFilters = prevFilters => {
+		setSelectedFilters(prevFilters);
+		setLocation(null);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<AccordionFilters
+			className={className}
+			defaultValue={defaultValue}
+			filterOptions={filterOptions}
+		>
+			{filterOptions?.filters?.map(filter => {
+				if(filter.id === 'category' && SubcategoryRequireCategory === true && (!selectedFilters.categoryClass || Object.keys(selectedFilters.categoryClass).length < 1)){
+					return;
+				} else if (filter.id === 'category' && SubcategoryRequireCategory === true && filter.items.length > 0) {
+					filter.items = filter.items.filter(item => item.count > 0);
+				}
+				return (<AccordionFilterItem
+					key={filter.id}
+					filter={filter}
+					setDefaultValue={setDefaultValue}
+					selectedFilters={selectedFilters}
+					setSelectedFilters={handleSetSelectedFilters}
+					subcategoryRequireCategory={siteConfig.subcategoryRequireCategory}
+				/>);
+			}
+			)}
+		</AccordionFilters>
+	);
+};
+
+export default AccordionFiltersContainer;

package/src/components/containers/accordions/filter-item-container.js

@@ -0,0 +1,66 @@
+import React, { memo } from 'react';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+import FilterItem from '~/components/containers/filter/filter-item-container';
+import ItemsPill from '~/components/modules/buttons/items-pill';
+
+const FilterItemContainer = ({
+	filter,
+	setDefaultValue,
+	setSelectedFilters,
+	selectedFilters,
+	subcategoryRequireCategory = false
+}) => {
+	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 };
+			if(subcategoryRequireCategory && fieldKey == 'categoryClass'){
+				delete updatedFilters['category'];
+			}
+			delete updatedFilters[fieldKey];
+			return updatedFilters;
+		});
+	};
+
+	const header = (
+		<>
+			{filter.title}
+			{activeItemsCount > 0 && (
+				<ItemsPill
+					activeItemsCount={activeItemsCount}
+					onClick={handleClearFilters}
+				/>
+			)}
+		</>
+	);
+
+	const body = (
+		<>
+			{filter.items.sort().map(item => (
+				<FilterItem
+					key={item.name}
+					item={item}
+					field={filter.id}
+					selectedFilters={selectedFilters}
+					setSelectedFilters={setSelectedFilters}
+				/>
+			))}
+		</>
+	);
+
+	return (
+		<AccordionFilterItem
+			id={filter.id}
+			setDefaultValue={setDefaultValue}
+			header={header}
+			body={body}
+		/>
+	);
+};
+
+export default memo(FilterItemContainer);

package/src/components/containers/accordions/map-accordion-item-container.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import { setStorageObject } from '~/util/localStorageUtil';
+import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
+import ListItemContainer from '~/components/containers/list/list-item/list-item-container';
+
+const MapAccordionItemContainer = ({
+	showMap,
+	item,
+	itemRefs,
+	fieldsShown,
+	itemExpandedContent,
+	specialFeatures,
+	isActive,
+	hasListItemSelected
+}) => {
+	const { mapItems, recruiters } = useMapList();
+	const { selectItem } = useMap();
+	const { trackEvent, eventTypes } = useTrackEvent();
+
+	const setSelectedItemAndZoomMap = (item, isActive) => {
+		if (isActive) {
+			localStorage.removeItem("selectedListItem");
+			const location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
+			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
+		} else {
+			setStorageObject("selectedListItem", item);
+			const location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
+			selectItem(item, location, 12, {
+				lat: location?.latitude,
+				lng: location?.longitude
+			});
+		}
+	};
+
+	const handleItemClick = item => {
+		trackEvent(eventTypes.JOB_LISTING_SELECTED, {
+			jobTitle: item.fields.position,
+			jobCategory: item.fields.category,
+			entityDisplayName: item?.mapDetails?.entityDisplayName
+		});
+
+		setSelectedItemAndZoomMap(item, isActive);
+	};
+
+	return (
+		<MapAccordionItem
+			item={item}
+			itemRefs={itemRefs}
+			itemExpandedContent={itemExpandedContent}
+			isActive={isActive}
+			recruiter={recruiters[item.recruiterId]}
+		>
+			<ListItemContainer
+				showMap={showMap}
+				item={item}
+				itemRefs={itemRefs}
+				fieldsShown={fieldsShown}
+				specialFeatures={specialFeatures}
+				isActive={isActive}
+				hasListItemSelected={hasListItemSelected}
+				onClick={() => handleItemClick(item)}
+			/>
+		</MapAccordionItem>
+	);
+};
+
+export default MapAccordionItemContainer;

package/src/components/containers/filter/commute-container.js

@@ -0,0 +1,89 @@
+import React, { useRef, useState, useEffect } from 'react';
+import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocomplete';
+
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import { getStorageItem } from '~/util/localStorageUtil';
+import FilterCommute from '~/components/modules/filter/commute';
+
+const FilterCommuteContainer = ({ className }) => {
+	const {
+		ready,
+		suggestions: { status, data },
+		setValue,
+		clearSuggestions
+	} = usePlacesAutocomplete();
+
+	const [selected, setSelected] = useState(getStorageItem('selectedCommute', ''));
+	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;
+		setIsCurrentLocation(false);
+		localStorage.removeItem('isCurrentLocation');
+		localStorage.removeItem('selectedCommute');
+		setSelected("");
+	}, [commuteLocation]);
+
+	const handleSelect = async (val, isCurrLocation = false) => {
+		setValue(val, false);
+		setSelected(val);
+		localStorage.setItem('selectedCommute', val);
+		clearSuggestions();
+		if (isCurrLocation) return;
+		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
+		}
+	};
+
+	const fetchLocation = () => {
+		if (!navigator.geolocation) {
+			console.error("Geolocation is not supported by this browser.");
+			return;
+		}
+		navigator.geolocation.getCurrentPosition(
+			position => {
+				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 => {
+				console.error("Error fetching location", error);
+			}
+		);
+	};
+
+	return (
+		<FilterCommute
+			className={className}
+			ready={ready}
+			status={status}
+			data={data}
+			selected={selected}
+			isCurrentLocation={isCurrentLocation}
+			inputRef={inputRef}
+			handleSelect={handleSelect}
+			setValue={setValue}
+			setSelected={setSelected}
+			clearSuggestions={clearSuggestions}
+			commuteLocation={commuteLocation}
+			setIsCurrentLocation={setIsCurrentLocation}
+			fetchLocation={fetchLocation}
+			setCommuteLocation={setCommuteLocation}
+		/>
+	);
+};
+
+export default FilterCommuteContainer;

package/src/components/containers/filter/filter-container.js

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import Filter from '~/components/modules/filter/index';
+import FilterSearch from '~/components/containers/filter/search-container';
+import FiltersAccordion from '~/components/containers/accordions/filter-container';
+import FilterLocations from '~/components/containers/filter/location-container';
+
+const FilterContainer = ({
+	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();
+
+	const handleReset = () => {
+		trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters });
+		filterReset();
+		setSelectedFilters({});
+		setQuery(null);
+		handleSettingFavorites(null);
+	};
+
+	return (
+		<Filter
+			className={className}
+			showMap={showMap}
+			hasActiveFilters={hasActiveFilters}
+			setHasActiveFilters={setHasActiveFilters}
+			defaultValue={defaultValue}
+			setDefaultValue={setDefaultValue}
+			setSelectedListItem={setSelectedListItem}
+			setLocation={setLocation}
+			filteredListings={filteredListings}
+			selectedFilters={selectedFilters}
+			setSelectedFilters={setSelectedFilters}
+			setMobileTab={setMobileTab}
+			handleReset={handleReset}
+			siteConfig={siteConfig}
+		>
+			<FiltersAccordion
+				setHasActiveFilters={setHasActiveFilters}
+				defaultValue={defaultValue}
+				setDefaultValue={value => { setDefaultValue(value === defaultValue ? "" : value); }}
+				setLocation={setLocation}
+				setSelectedListItem={setSelectedListItem}
+				SubcategoryRequireCategory={siteConfig.subcategoryRequireCategory}
+			/>
+			<FilterSearch />
+			{siteConfig.hideLocations !== true &&
+			<FilterLocations
+				setHasActiveFilters={setHasActiveFilters}
+				defaultValue={defaultValue}
+				showMap={showMap}
+				setDefaultValue={value => { setDefaultValue(value === defaultValue ? "" : value); }}
+				setLocation={setLocation}
+				setSelectedListItem={setSelectedListItem}
+			/>
+			}
+		</Filter>
+	);
+};
+
+export default FilterContainer;