@abcagency/hc-ui-components 1.3.20 → 1.3.22

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

@@ -4,7 +4,7 @@ import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 import ListingDetails from '~/components/modules/jobListing/listing-details';
 
-const ListingDetailsContainer = ({ item, recruiters }) => {
+const ListingDetailsContainer = ({ item, recruiter }) => {
 	const { trackEvent, eventTypes } = useTrackEvent();
 	const { travelTime } = useMap();
 	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
@@ -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}
+			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;
+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,12 +23,12 @@ 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;
-	const itemExpandedContent = (item: any, recruiters: any) =>
-		item ? <ListingDetailsContainer item={item} recruiters={recruiters} /> : null;
+	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');
@@ -41,7 +41,6 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 		trackEvent(eventTypes.LIST_SORTED, sortSetting);
 		setSortSetting(sortSetting);
 	};
-
 	return (
 		<ItemsList
 			fieldNames={fieldNames}
@@ -56,7 +55,6 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 			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}>

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;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import List from '~/components/containers/list/item-list-container';
+import Map from '~/components/containers/maps/map-container';
+import Filter from '~/components/modules/filter';
+import MapList from '~/components/modules/maps/map-list';
+
+const MapListContainer = ({
+	loading = false,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings
+}) => {
+
+	const listProps = {
+		fieldsShown,
+		fieldNames,
+		itemExpandedContent,
+		loading,
+		showMap,
+		specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails,
+		markerConfigs,
+		placeMappings,
+		clusterGridSize: 60,
+		showMap
+	};
+
+	return (
+		<MapList
+			showMap={showMap}
+			loading={loading}
+			list={<List {...listProps} />}
+			map={<Map {...mapProps} />}
+			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
+		/>
+	);
+};
+
+export default MapListContainer;

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

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react';
+import MapMarker from '~/components/modules/maps/map-marker';
+import { InfoWindow } from '@react-google-maps/api';
+import InfoWindowCard from '~/components/modules/maps/info-window-card';
+import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
+
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const MapMarkerContainer = ({
+	item,
+	markerRefs,
+	infoWindowClasses,
+	markerClickHandler,
+	clusterer,
+	markerIconSelected,
+	markerIcon,
+	selectedLocation,
+	setMapInteracted
+}) => {
+	const { setLocation, commuteLocation } = useMap();
+	const isSelected = item.id === selectedLocation?.id;
+	const markerRef = useRef(null);
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { handleFilterListingsByLocation } = useMapList();
+
+	useEffect(() => {
+		markerRefs.current[item.id] = markerRef.current;
+	}, []);
+
+	const onMarkerClick = () => {
+		trackEvent(eventTypes.MAP_MARKER_CLICKED, {
+			entityDisplayName: item.entityDisplayName,
+			lat: item.latitude,
+			lng: item.longitude,
+			travelTime: item.travelTime
+		});
+		setMapInteracted(true);
+		markerClickHandler(item);
+	};
+
+	return (
+		<MapMarker
+			position={{ lat: item.latitude, lng: item.longitude }}
+			title={item.name}
+			icon={isSelected ? markerIconSelected : markerIcon}
+			zIndex={isSelected ? 9999 : 1}
+			onLoad={marker => (markerRef.current = marker)}
+			onClick={onMarkerClick}
+			clusterer={clusterer}
+		>
+			{isSelected && (
+				<InfoWindow
+					position={{ lat: item.latitude, lng: item.longitude }}
+					anchor={markerRefs.current[item.id]}
+					onCloseClick={() => {
+						setMapInteracted(true);
+						setLocation(null);
+					}}
+					options={{ maxWidth: 400 }}
+				>
+					<InfoWindowCard
+						className={infoWindowClasses}
+						id={item.id}
+						content={<InfoWindowContent
+							item={item}
+							commuteLocation={commuteLocation}
+							filterListingsByLocation={() => handleFilterListingsByLocation(selectedLocation)}
+						/>}
+					/>
+				</InfoWindow>
+			)}
+		</MapMarker>
+	);
+};
+
+export default MapMarkerContainer;

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

@@ -1,32 +1,30 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import ItemExpandCard from '~/components/modules/list/item-expand-card';
-
-const MapAccordionItem = ({
-	item,
-	itemRefs,
-	itemExpandedContent,
-	isActive,
-	children
-}) => {
-	if(isActive){
-		console.log("accordion rerender ");
-	}
-	return (
-		<Accordion.Item key={item.id} id={item.id}>
-			<Accordion.Trigger.Blank>
-				<div ref={el => (itemRefs.current[item.id] = el)}>
-					{children}
-				</div>
-			</Accordion.Trigger.Blank>
-			{isActive &&
-
-        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
-        	{ <ItemExpandCard content={itemExpandedContent(item)} />}
-        </Accordion.Content>
-			}
-		</Accordion.Item>
-	);
-};
-
-export default MapAccordionItem;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import ItemExpandCard from '~/components/modules/list/item-expand-card';
+
+const MapAccordionItem = ({
+	item,
+	itemRefs,
+	itemExpandedContent,
+	isActive,
+	recruiter,
+	children
+}) => {
+	return (
+		<Accordion.Item key={item.id} id={item.id}>
+			<Accordion.Trigger.Blank>
+				<div ref={el => (itemRefs.current[item.id] = el)}>
+					{children}
+				</div>
+			</Accordion.Trigger.Blank>
+			{isActive &&
+
+        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
+        	{ <ItemExpandCard content={itemExpandedContent(item, recruiter)} />}
+        </Accordion.Content>
+			}
+		</Accordion.Item>
+	);
+};
+
+export default MapAccordionItem;

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

@@ -1,55 +1,27 @@
-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 from 'react';
+import Accordion from '~/components/modules/accordions/default';
+
+const AccordionFilterItem = ({
+	id,
+	setDefaultValue,
+	header,
+	body
+}) => {
+	return (
+		<Accordion.Item key={id} id={id}>
+			<Accordion.Trigger.HasHeader
+				onClick={() => setDefaultValue(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}
+			</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">
+				{body}
+			</Accordion.Content>
+		</Accordion.Item>
+	);
+};
+
+export default AccordionFilterItem;