@abcagency/hc-ui-components 1.3.23 → 1.3.25

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/containers/jobListing/listing-details-container.js

@@ -0,0 +1,40 @@
+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, recruiter }) => {
+	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}
+			recruiter={recruiter}
+			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

@@ -0,0 +1,81 @@
+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, recruiter: any) =>
+		item ? <ListingDetailsContainer item={item} recruiter={recruiter} /> : 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}
+			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

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

@@ -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;

package/src/components/containers/maps/map-container.js

@@ -0,0 +1,204 @@
+/* eslint-disable no-undef */
+import React, { useEffect, useRef } from 'react';
+
+import MapMarker from "~/components/containers/maps/map-marker-container";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+
+import Map from "~/components/modules/maps/map";
+
+const MapContainer = ({
+	markerConfigs,
+	infoWindowClasses,
+	clusterGridSize = 60
+}) => {
+	const {
+		location,
+		zoom,
+		center,
+		commuteLocation,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted
+	} = useMap();
+
+	const {
+		mapItems, filteredListings, setSelectedFilters,
+		setQuery
+	} = useMapList();
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const {
+		poiMarkers,
+		setCurrentCenter,
+		currentCenter,
+		setCurrentZoom,
+		currentZoom,
+		selectedPlaceMarker,
+		setSelectedPlaceMarker,
+		placesWindow,
+		setPlacesWindow } = usePlaces();
+
+	const onIdle = () => {
+		if (!currentCenter || !mapRef.current) return;
+		const newCenter = mapRef.current.getCenter().toJSON();
+		const newZoom = mapRef.current.zoom;
+
+		setCurrentCenter(newCenter);
+
+		if (newZoom !== currentZoom) {
+			setCurrentZoom(newZoom);
+		}
+	};
+
+	useEffect(() => {
+		if (mapContainerRef.current) {
+			const handleScroll = () => {
+				setMapInteracted(true);
+			};
+			var mapContainerRefCurrent = mapContainerRef.current;
+			mapContainerRef.current.addEventListener('wheel', handleScroll);
+			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
+		}
+	}, [mapContainerRef.current]);
+
+	useEffect(() => {
+		if (mapRef.current) {
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
+			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
+			return () => {
+				google.maps.event.removeListener(dragStartListener);
+				google.maps.event.removeListener(mouseDownListener);
+			};
+		}
+	}, [mapRef.current, mapContainerRef.current]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
+			fitBounds(mapRef.current);
+		}
+	}, [mapItems, mapRef.current, location]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
+			fitBounds(mapRef.current, true);
+		}
+		if (mapRef.current) {
+			let currZoom = mapRef.current.zoom;
+			let setZoomVal = currZoom < 13 ? currZoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [filteredListings]);
+
+	useEffect(() => {
+		if (!mapRef.current || !location || mapInteracted) return;
+		mapRef.current.panTo(
+			new google.maps.LatLng(location.latitude, location.longitude)
+		);
+		if (mapRef.current) {
+			let setZoomVal = zoom < 13 ? zoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [location, zoom, mapRef.current]);
+
+	const fitBounds = (map, overload = false) => {
+		if ((mapInteracted === false || overload) && mapItems != null) {
+			const bounds = new window.google.maps.LatLngBounds();
+			mapItems.forEach(item => {
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+			});
+			if (!map) return;
+			map.fitBounds(bounds);
+		}
+		if (mapRef.current.zoom > 17) {
+			mapRef.current.setZoom(16);
+		}
+	};
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		selectLocationEntity(mapLocation);
+	};
+
+	const onLoad = map => {
+		if (!location || location === null) {
+			mapRef.current = map;
+			fitBounds(map, true);
+			return;
+		}
+		mapRef.current = map;
+
+		if (mapInteracted === false) {
+			mapRef.current.panTo(
+				new google.maps.LatLng(location.latitude, location.longitude)
+			);
+
+			mapRef.current.setZoom(zoom);
+		}
+	};
+
+	const pinIconUrl = pinIcon({
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	});
+
+	const mapMarkers = mapItems.map(item => (
+		<MapMarker
+			key={item.id}
+			item={item}
+			selectedLocation={location}
+			markerRefs={markerRefs}
+			infoWindowClasses={infoWindowClasses}
+			setSelectedLocation={setLocation}
+			markerClickHandler={markerClickHandler}
+			markerIcon={markerIcon(markerConfigs)}
+			markerIconSelected={markerIconSelected(markerConfigs)}
+			setMapInteracted={setMapInteracted}
+		/>
+	));
+
+	const placeMarkers = poiMarkers.markers.map((marker, index) => (
+		<PlaceMarker
+			key={`marker-${marker.title}-${index}`}
+			marker={marker}
+			index={index}
+			selectedPlaceMarker={selectedPlaceMarker}
+			placesWindow={placesWindow}
+			setPlacesWindow={setPlacesWindow}
+			setSelectedPlaceMarker={setSelectedPlaceMarker}
+		/>
+	));
+
+	return (
+		<Map
+			zoom={zoom}
+			center={center}
+			mapContainerRef={mapContainerRef}
+			onLoad={onLoad}
+			onIdle={onIdle}
+			clusterGridSize={clusterGridSize}
+			markerConfigs={markerConfigs}
+			mapMarkers={mapMarkers}
+			placeMarkers={placeMarkers}
+			mapInteracted={mapInteracted}
+			pinIconUrl={pinIconUrl}
+			setMapInteracted={setMapInteracted}
+			fitBounds={fitBounds}
+			mapRef={mapRef}
+			setQuery={setQuery}
+			filteredListingsLength={filteredListings.length}
+			setSelectedFilters={setSelectedFilters}
+		/>
+	);
+};
+
+export default MapContainer;