@abcagency/hc-ui-components 1.3.21 → 1.3.23

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

@@ -1,89 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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/containers/jobListing/listing-details-container.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-import ListingDetails from '~/components/modules/jobListing/listing-details';
-
-const ListingDetailsContainer = ({ item, recruiters }) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { travelTime } = useMap();
-	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
-
-	const {
-	  useDetailsPostMessage,
-	  useApplyDialog,
-	  internalApplyLink,
-	  companyName,
-	  jobsDomain
-	} = siteConfig;
-
-	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}
-	  />
-	);
-};
-
-export default ListingDetailsContainer;

package/src/components/containers/list/item-list-container.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import useListLogic from '~/hooks/useList';
-import { useMap } from '~/contexts/mapContext';
-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/containers/accordions/map-accordion-item-container';
-import { dynamicSort } from '~/util/sortUtil';
-import { Listing } from '~/types/Listings';
-import ListingDetailsContainer from '../jobListing/listing-details-container';
-
-interface ItemsListContainerProps {
-  fieldNames: Record<string, string>;
-  showMap: boolean;
-  fieldsShown: string[];
-  specialFeatures: any;
-}
-
-const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
-	fieldNames,
-	showMap,
-	fieldsShown,
-	specialFeatures
-}) => {
-	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;
-	const itemExpandedContent = (item: any, recruiters: any) =>
-		item ? <ListingDetailsContainer 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: { field: string; type: string }) => {
-		trackEvent(eventTypes.LIST_SORTED, sortSetting);
-		setSortSetting(sortSetting);
-	};
-	return (
-		<ItemsList
-			fieldNames={fieldNames}
-			showMap={showMap}
-			fieldsShown={fieldsShown}
-			filteredListings={filteredListings}
-			loading={loading}
-			sortSetting={sortSetting}
-			setSortSetting={setTrackedSortSetting}
-			itemLimit={itemLimit}
-			loader={loader}
-			scrollContainerRef={scrollContainerRef}
-			itemRefs={itemRefs}
-			selectedListItem={selectedListItem}
-			itemExpandedContent={itemExpandedContent}
-			includeFavorite={true}
-		>
-			<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: Listing) => (
-						<MapAccordionItemContainer
-							key={item.id}
-							showMap={showMap}
-							item={item}
-							itemRefs={itemRefs}
-							fieldsShown={fieldsShown}
-							itemExpandedContent={itemExpandedContent}
-							specialFeatures={specialFeatures}
-							isActive={selectedListItem?.id === item.id}
-							hasListItemSelected={selectedListItem != null}
-						/>
-					))}
-			</Accordion>
-		</ItemsList>
-	);
-};
-
-export default ItemsListContainer;

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

@@ -1,43 +0,0 @@
-import React, { useState } from 'react';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-import ListItem from '~/components/modules/list/list-item/list-item';
-
-const ListItemContainer = ({
-	isActive,
-	showMap,
-	item,
-	itemRefs,
-	fieldsShown,
-	specialFeatures,
-	className,
-	bodyClassName,
-	onItemSelected,
-	...props
-}) => {
-	const { siteConfig, favorites, handleSettingFavorites, setMobileTab } = useMapList();
-	const { trackEvent, eventTypes } = useTrackEvent();
-
-	return (
-		<ListItem
-			isActive={isActive}
-			showMap={showMap}
-			item={item}
-			itemRefs={itemRefs}
-			fieldsShown={fieldsShown}
-			specialFeatures={specialFeatures}
-			className={isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85"}
-			bodyClassName={bodyClassName}
-			onItemSelected={onItemSelected}
-			setMobileTab={setMobileTab}
-			siteConfig={siteConfig}
-			trackEvent={trackEvent}
-			eventTypes={eventTypes}
-			favorites={favorites}
-			handleSettingFavorites={handleSettingFavorites}
-			{...props}
-		/>
-	);
-};
-
-export default ListItemContainer;

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

@@ -1,51 +0,0 @@
-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;