@abcagency/hc-ui-components 1.3.20 → 1.3.21

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;

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

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import FilterItem from '~/components/modules/filter/item';
+
+const FilterItemContainer = ({
+	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;
+	const isActive = selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
+	const [activeItem, setActiveItem] = useState(isActive);
+
+	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;
+		});
+	};
+
+	useEffect(() => {
+		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
+		else if (activeItem === true) {
+			setActiveItem(false);
+		}
+	}, [selectedFilters]);
+
+	return (
+		<FilterItem
+			className={className}
+			item={item}
+			type={type}
+			itemKey={itemKey}
+			hasCount={hasCount}
+			field={field}
+			activeItem={activeItem}
+			setActiveItem={setActiveItem}
+			changeHandler={changeHandler}
+			{...rest}
+		/>
+	);
+};
+
+export default FilterItemContainer;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import FilterLocation from '~/components/modules/filter/location';
+import FilterCommute from '~/components/containers/filter/commute-container';
+import FilterPointsOfInterest from '~/components/containers/filter/points-of-interest-container';
+import { useMapList } from '~/contexts/mapListContext';
+
+const FilterLocationContainer = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	showMap = false,
+	setLocation,
+	setSelectedListItem
+}) => {
+	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
+
+	const locations = filterOptions?.locations;
+	const pointsOfInterest = filterOptions?.pointsOfInterest;
+
+	return (
+		<FilterLocation
+			className={className}
+			defaultValue={defaultValue}
+			setDefaultValue={setDefaultValue}
+			showMap={showMap}
+			setLocation={setLocation}
+			setSelectedListItem={setSelectedListItem}
+			locations={locations}
+			setSelectedFilters={setSelectedFilters}
+			selectedFilters={selectedFilters}
+		>
+			{showMap && <FilterCommute className="hc-mt-6" />}
+			{showMap && (
+				<FilterPointsOfInterest
+					className="hc-mt-4"
+					pointsOfInterest={pointsOfInterest}
+					setDefaultValue={setDefaultValue}
+					defaultValue={defaultValue}
+				/>
+			)}
+		</FilterLocation>
+	);
+};
+
+export default FilterLocationContainer;

package/src/components/containers/filter/points-of-interest-container.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+import RadioItemContainer from '~/components/containers/filter/points-of-interest-radio-item-container';
+
+const FilterPointsOfInterestContainer = ({
+	title = "Points of interest",
+	pointsOfInterest,
+	setDefaultValue,
+	className,
+	defaultValue
+}) => {
+	const renderRadioItem = (item, index) => (
+		<RadioItemContainer key={item.key + index} item={item} field={item.id} />
+	);
+
+	const body = pointsOfInterest.items.map((item, index) => renderRadioItem(item, index));
+
+	return (
+		<div className={`hc-relative ${className ?? ""}`}>
+			<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+				<AccordionFilterItem
+					id="points-of-interest"
+					setDefaultValue={setDefaultValue}
+					header={title}
+					body={body}
+				/>
+			</Accordion>
+		</div>
+	);
+};
+
+export default FilterPointsOfInterestContainer;

package/src/components/containers/filter/points-of-interest-radio-item-container.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import RadioItem from '~/components/modules/filter/radio-item';
+import { useMap } from '~/contexts/mapContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const RadioItemContainer = ({
+	className,
+	item,
+	field,
+	...rest
+}) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { selectedPlaces, setSelectedPlaces } = useMap();
+	const chosenPlace = item.key.toLowerCase();
+	const isActive = selectedPlaces.includes(chosenPlace);
+
+	const changeHandler = () => {
+		if (!isActive)
+			trackEvent(eventTypes.POI_APPLIED, { chosenPlace });
+		setSelectedPlaces([isActive ? '' : chosenPlace]);
+	};
+
+	return (
+		<RadioItem
+			className={className}
+			item={item}
+			field={field}
+			isActive={isActive}
+			changeHandler={changeHandler}
+			{...rest}
+		/>
+	);
+};
+
+export default RadioItemContainer;

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

@@ -0,0 +1,50 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useMapList } from '~/contexts/mapListContext';
+import Search from '~/components/modules/filter/search';
+
+const SearchContainer = ({
+	inputPlaceholder = "Keywords",
+	showSearchIcon = false,
+	className,
+	labelClassName
+}) => {
+	const { query, setQuery, siteConfig } = useMapList();
+	const [inputValue, setInputValue] = useState(query != null ? query : "");
+	const debounceTimer = useRef(null);
+
+	const handleInputChange = e => {
+		setInputValue(e.target.value);
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current);
+		}
+		debounceTimer.current = setTimeout(() => {
+			setQuery(e.target.value);
+		}, 500);
+	};
+
+	const handleReset = () => {
+		setInputValue("");
+		setQuery("");
+	};
+
+	useEffect(() => {
+		if (query == null) {
+			setInputValue("");
+		}
+	}, [query]);
+
+	return (
+		<Search
+			inputPlaceholder={siteConfig.searchConfig.placeholder || inputPlaceholder}
+			showSearchIcon={showSearchIcon}
+			className={className}
+			labelClassName={labelClassName}
+			inputValue={inputValue}
+			handleInputChange={handleInputChange}
+			handleReset={handleReset}
+			label={siteConfig.searchConfig.label}
+		/>
+	);
+};
+
+export default SearchContainer;

package/src/components/{modules → containers}/jobListing/listing-details-container.js

@@ -19,22 +19,22 @@ const ListingDetailsContainer = ({ item, recruiters }) => {
 
 	return (
 	  <ListingDetails
-		item={item}
-		recruiters={recruiters}
-		travelTime={travelTime}
-		useDetailsPostMessage={useDetailsPostMessage}
-		navigateToDetails={navigateToDetails}
-		navigateToEasyApply={navigateToEasyApply}
-		Link={Link}
-		linkFormat={linkFormat}
-		useApplyDialog={useApplyDialog}
-		internalApplyLink={internalApplyLink}
-		companyName={companyName}
-		jobsDomain={jobsDomain}
-		trackEvent={trackEvent}
-		eventTypes={eventTypes}
+			item={item}
+			recruiters={recruiters}
+			travelTime={travelTime}
+			useDetailsPostMessage={useDetailsPostMessage}
+			navigateToDetails={navigateToDetails}
+			navigateToEasyApply={navigateToEasyApply}
+			Link={Link}
+			linkFormat={linkFormat}
+			useApplyDialog={useApplyDialog}
+			internalApplyLink={internalApplyLink}
+			companyName={companyName}
+			jobsDomain={jobsDomain}
+			trackEvent={trackEvent}
+			eventTypes={eventTypes}
 	  />
 	);
-  };
+};
 
-  export default ListingDetailsContainer;
+export default ListingDetailsContainer;

package/src/components/{modules/list/index.tsx → containers/list/item-list-container.tsx}

@@ -5,7 +5,7 @@ import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 import ItemsList from '~/components/modules/list/item-list';
 import Accordion from '~/components/modules/accordions/default';
-import MapAccordionItemContainer from '~/components/modules/list/list-item';
+import MapAccordionItemContainer from '~/components/containers/accordions/map-accordion-item-container';
 import { dynamicSort } from '~/util/sortUtil';
 import { Listing } from '~/types/Listings';
 import ListingDetailsContainer from '../jobListing/listing-details-container';
@@ -23,7 +23,7 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 	fieldsShown,
 	specialFeatures
 }) => {
-	const { mapItems, filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
+	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
 	const { itemLimit, loader, scrollContainerRef, itemRefs } = useListLogic(filteredListings as any);
 	const { selectedListItem } = useMap();
 	const { trackEvent, eventTypes } = useTrackEvent() as any;
@@ -41,7 +41,6 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 		trackEvent(eventTypes.LIST_SORTED, sortSetting);
 		setSortSetting(sortSetting);
 	};
-
 	return (
 		<ItemsList
 			fieldNames={fieldNames}

package/src/components/containers/maps/info-window-content-container.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import InfoWindowContent from '~/components/modules/maps/info-window-content';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const InfoWindowContentContainer = ({
+	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;
+
+	const addressParts = [
+		items[0].mapDetails?.address?.street,
+		items[0].mapDetails?.address?.city,
+		items[0].mapDetails?.address?.state,
+		items[0].mapDetails?.address?.zip
+	];
+	const fullAddress = addressParts.filter(Boolean).join(', ');
+
+	const applyFilters = () => {
+		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();
+	};
+
+	return <InfoWindowContent items={items} fullAddress={fullAddress} applyFilters={applyFilters} />;
+};
+
+export default InfoWindowContentContainer;