@abcagency/hc-ui-components 1.3.57 → 1.3.58-uvm.0

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

@@ -1,33 +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;
+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 +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;
+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,61 +1,61 @@
-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 handleSubmitInput = value => {
-		setInputValue(value);
-		if (debounceTimer.current) {
-			clearTimeout(debounceTimer.current);
-		}
-		debounceTimer.current = setTimeout(() => {
-			setQuery(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}
-			handleSubmitInput={handleSubmitInput}
-		/>
-	);
-};
-
-export default SearchContainer;
+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 handleSubmitInput = value => {
+		setInputValue(value);
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current);
+		}
+		debounceTimer.current = setTimeout(() => {
+			setQuery(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}
+			handleSubmitInput={handleSubmitInput}
+		/>
+	);
+};
+
+export default SearchContainer;

package/src/components/containers/jobListing/listing-details-container.js

@@ -1,40 +1,42 @@
-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;
+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, easyApplyUrl, easyApplyText } = 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}
+			easyApplyUrl={easyApplyUrl}
+			easyApplyText={easyApplyText}
+			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,81 +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;
+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/maps/info-window-content-container.js

@@ -1,53 +1,53 @@
-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, filteredListings } = useMapList();
-	const fieldsShown = siteConfig.locationFiltersShown;
-	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 });
-		}
-
-		newFilters.entityName = { [items[0].fields.entityName]: true };
-		filters.push({ filterType: 'entityName', filterChecked: items[0].fields.entityName });
-
-		trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
-		setSelectedFilters(newFilters);
-	};
-
-	return <InfoWindowContent items={items} fullAddress={fullAddress} applyFilters={applyFilters} mapInfoWindowConfig={siteConfig.mapInfoWindowConfig}/>;
-};
-
-export default InfoWindowContentContainer;
+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, filteredListings } = useMapList();
+	const fieldsShown = siteConfig.locationFiltersShown;
+	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 });
+		}
+
+		newFilters.entityName = { [items[0].fields.entityName]: true };
+		filters.push({ filterType: 'entityName', filterChecked: items[0].fields.entityName });
+
+		trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
+		setSelectedFilters(newFilters);
+	};
+
+	return <InfoWindowContent items={items} fullAddress={fullAddress} applyFilters={applyFilters} mapInfoWindowConfig={siteConfig.mapInfoWindowConfig}/>;
+};
+
+export default InfoWindowContentContainer;