@abcagency/hc-ui-components 1.3.69 → 1.3.71

package/src/components/HireControlMap.js

@@ -1,161 +1,167 @@
-import React, { useEffect, useState } from 'react';
-import { useLoadScript } from '@react-google-maps/api';
-import { twMerge } from 'tailwind-merge';
-
-import Grid from '~/components/modules/grid';
-import Filter from '~/components/containers/filter/filter-container';
-import MapList from '~/components/containers/maps/map-list-container';
-
-import { MapProvider } from '~/contexts/mapContext';
-import { PlacesProvider } from '~/contexts/placesContext';
-import { MapListProvider } from '~/contexts/mapListContext';
-import { TrackEventProvider } from '~/contexts/trackEventContext';
-
-import { getMapConfig } from '~/services/configService';
-import { setClientAuthKey } from '~/clientToken.js';
-
-import '../styles/index.css';
-import { ThemeProvider } from '~/contexts/themeContext';
-
-const libraries = ['places'];
-
-export const HireControlMap = ({
-	clientToken,
-	containerStyle = { height: '100vh' },
-	navigateToDetails = null,
-	navigateToEasyApply = null,
-	handleUrlUpdate = null,
-	Link = null,
-	linkFormat = '/jobs/[slug]',
-	easyApplyUrl = null,
-	easyApplyText = 'Easy Apply',
-	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);},
-	listings = [],
-	defaultFilters = null,
-	hiddenFilters = null,
-	setFiltersUrl = null,
-	ExpandListComponent = null
-}) => {
-	const [siteConfig, setSiteconfig] = useState(null);
-	useEffect(() => {
-		setClientAuthKey(clientToken);
-		const fetchSiteConfig = async () => {
-			try {
-				const configData = await getMapConfig(clientToken);
-				setSiteconfig(configData);
-			} catch (error) {
-				console.error('Failed to fetch site configuration:', error);
-			}
-		};
-
-		fetchSiteConfig();
-	}, [clientToken]);
-
-	const { isLoaded } = useLoadScript({
-		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
-		version: 'quarterly',
-		libraries: libraries
-	});
-
-	return (
-		<div>
-			{isLoaded && siteConfig && (
-				<HomeBody
-					siteConfig={siteConfig}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					easyApplyUrl={easyApplyUrl}
-					easyApplyText={easyApplyText}
-					trackEvent={trackEvent}
-					listings={listings}
-					setFiltersUrl={setFiltersUrl}
-					hiddenFilters={hiddenFilters}
-					handleUrlUpdate={handleUrlUpdate}
-					defaultFilters={defaultFilters}
-					containerStyle={containerStyle}
-					ExpandListComponent={ExpandListComponent}
-				/>
-			)}
-		</div>
-	);
-};
-
-const HomeBody = ({ containerStyle, hiddenFilters, defaultFilters, siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, easyApplyUrl, easyApplyText, trackEvent, listings, setFiltersUrl, handleUrlUpdate, ExpandListComponent }) => {
-	const resetFilters = false;
-
-	return (
-		<TrackEventProvider trackEvent={trackEvent}>
-			<ThemeProvider uiText={siteConfig.colors.uiText} uiAccent={siteConfig.colors.uiAccent} primary={siteConfig.colors.primary} primaryDark={siteConfig.colors.primaryDark} secondary={siteConfig.colors.secondary} secondaryDark={siteConfig.colors.secondaryDark}>
-				<MapListProvider
-					siteConfig={siteConfig}
-					resetFilters={resetFilters}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					easyApplyUrl={easyApplyUrl}
-					easyApplyText={easyApplyText}
-					listings={listings}
-					setFiltersUrl={setFiltersUrl}
-					hiddenFilters={hiddenFilters}
-					handleUrlUpdate={handleUrlUpdate}
-					defaultFilters={defaultFilters}
-					containerStyle={containerStyle}
-					ExpandListComponent={ExpandListComponent ?? null}
-				>
-					<MapProvider resetFilters={resetFilters}>
-						<PlacesProvider
-							placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-							markerColors={{
-								fillColor: siteConfig.colors.primary,
-								strokeColor: siteConfig.colors.primaryDark,
-								selectedFillColor: siteConfig.colors.secondary,
-								selectedStrokeColor: siteConfig.colors.secondaryDark,
-								placeMarkers: {
-									colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-									size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-								}
-							}}
-						>
-							<Grid
-								as='section'
-								id='job-search-interface'
-								columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
-								gap='hc-gap-0'
-								autoRows={false}
-								className={'hc-bundle hc-items-stretch hc-divide-x hc-divide-uiAccent/20'}
-							>
-								<Grid.Item className='hc-bg-gray-100'>
-									<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
-								</Grid.Item>
-								<MapList
-									containerStyle={containerStyle}
-									markerConfigs={{
-										fillColor: siteConfig.colors.primary,
-										strokeColor: siteConfig.colors.primaryDark,
-										selectedFillColor: siteConfig.colors.secondary,
-										selectedStrokeColor: siteConfig.colors.secondaryDark,
-										placeMarkers: {
-											colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-											size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-										}
-									}}
-									mapPosition={siteConfig.mapPosition}
-									showMap={siteConfig.showMap}
-									fieldsShown={siteConfig.fieldsShown}
-									specialFeatures={siteConfig.specialFeatures}
-									fieldNames={siteConfig.fieldNames}
-									placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-								/>
-							</Grid>
-						</PlacesProvider>
-					</MapProvider>
-				</MapListProvider>
-			</ThemeProvider>
-		</TrackEventProvider>
-	);
-};
-
-export default HireControlMap;
+import React, { useEffect, useState } from 'react';
+import { useLoadScript } from '@react-google-maps/api';
+import { twMerge } from 'tailwind-merge';
+
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/containers/maps/map-list-container';
+
+import { MapProvider } from '~/contexts/mapContext';
+import { PlacesProvider } from '~/contexts/placesContext';
+import { MapListProvider } from '~/contexts/mapListContext';
+import { TrackEventProvider } from '~/contexts/trackEventContext';
+
+import { getMapConfig } from '~/services/configService';
+import { setClientAuthKey } from '~/clientToken.js';
+
+import '../styles/index.css';
+import { ThemeProvider } from '~/contexts/themeContext';
+
+const libraries = ['places'];
+
+export const HireControlMap = ({
+	clientToken,
+	containerStyle = { height: '100vh' },
+	navigateToDetails = null,
+	navigateToEasyApply = null,
+	handleUrlUpdate = null,
+	Link = null,
+	linkFormat = '/jobs/[slug]',
+	easyApplyUrl = null,
+	easyApplyText = 'Easy Apply',
+	isIframe = false,
+	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);},
+	listings = [],
+	entities = [],
+	defaultFilters = null,
+	hiddenFilters = null,
+	setFiltersUrl = null,
+	ExpandListComponent = null
+}) => {
+	const [siteConfig, setSiteconfig] = useState(null);
+	useEffect(() => {
+		setClientAuthKey(clientToken);
+		const fetchSiteConfig = async () => {
+			try {
+				const configData = await getMapConfig(clientToken);
+				setSiteconfig(configData);
+			} catch (error) {
+				console.error('Failed to fetch site configuration:', error);
+			}
+		};
+
+		fetchSiteConfig();
+	}, [clientToken]);
+
+	const { isLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: libraries
+	});
+
+	return (
+		<div>
+			{isLoaded && siteConfig && (
+				<HomeBody
+					siteConfig={siteConfig}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					easyApplyUrl={easyApplyUrl}
+					easyApplyText={easyApplyText}
+					isIframe={isIframe}
+					trackEvent={trackEvent}
+					listings={listings}
+					entities={entities}
+					setFiltersUrl={setFiltersUrl}
+					hiddenFilters={hiddenFilters}
+					handleUrlUpdate={handleUrlUpdate}
+					defaultFilters={defaultFilters}
+					containerStyle={containerStyle}
+					ExpandListComponent={ExpandListComponent}
+				/>
+			)}
+		</div>
+	);
+};
+
+const HomeBody = ({ containerStyle, hiddenFilters, defaultFilters, siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, easyApplyUrl, easyApplyText, isIframe, trackEvent, listings, setFiltersUrl, handleUrlUpdate, ExpandListComponent }) => {
+	const resetFilters = false;
+
+	return (
+		<TrackEventProvider trackEvent={trackEvent}>
+			<ThemeProvider uiText={siteConfig.colors.uiText} uiAccent={siteConfig.colors.uiAccent} primary={siteConfig.colors.primary} primaryDark={siteConfig.colors.primaryDark} secondary={siteConfig.colors.secondary} secondaryDark={siteConfig.colors.secondaryDark}>
+				<MapListProvider
+					siteConfig={siteConfig}
+					resetFilters={resetFilters}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+
+					linkFormat={linkFormat}
+					easyApplyUrl={easyApplyUrl}
+					easyApplyText={easyApplyText}
+					isIframe={isIframe}
+					listings={listings}
+					setFiltersUrl={setFiltersUrl}
+					hiddenFilters={hiddenFilters}
+					handleUrlUpdate={handleUrlUpdate}
+					defaultFilters={defaultFilters}
+					containerStyle={containerStyle}
+					ExpandListComponent={ExpandListComponent ?? null}
+				>
+					<MapProvider resetFilters={resetFilters}>
+						<PlacesProvider
+							placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+							markerColors={{
+								fillColor: siteConfig.colors.primary,
+								strokeColor: siteConfig.colors.primaryDark,
+								selectedFillColor: siteConfig.colors.secondary,
+								selectedStrokeColor: siteConfig.colors.secondaryDark,
+								placeMarkers: {
+									colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+									size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+								}
+							}}
+						>
+							<Grid
+								as='section'
+								id='job-search-interface'
+								columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
+								gap='hc-gap-0'
+								autoRows={false}
+								className={'hc-bundle hc-items-stretch hc-divide-x hc-divide-uiAccent/20'}
+							>
+								<Grid.Item className='hc-bg-gray-100'>
+									<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
+								</Grid.Item>
+								<MapList
+									containerStyle={containerStyle}
+									markerConfigs={{
+										fillColor: siteConfig.colors.primary,
+										strokeColor: siteConfig.colors.primaryDark,
+										selectedFillColor: siteConfig.colors.secondary,
+										selectedStrokeColor: siteConfig.colors.secondaryDark,
+										placeMarkers: {
+											colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+											size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+										}
+									}}
+									mapPosition={siteConfig.mapPosition}
+									showMap={siteConfig.showMap}
+									fieldsShown={siteConfig.fieldsShown}
+									specialFeatures={siteConfig.specialFeatures}
+									fieldNames={siteConfig.fieldNames}
+									placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+								/>
+							</Grid>
+						</PlacesProvider>
+					</MapProvider>
+				</MapListProvider>
+			</ThemeProvider>
+		</TrackEventProvider>
+	);
+};
+
+export default HireControlMap;

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

@@ -1,52 +1,52 @@
-import React from 'react';
-import { useMapList } from '~/contexts/mapListContext';
-import AccordionFilters from '~/components/modules/accordions/filters';
-import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
-
-const AccordionFiltersContainer = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	setLocation,
-	setSelectedListItem,
-	SubcategoryRequireCategory
-}) => {
-	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig, hiddenFilters } = useMapList();
-
-	const handleSetSelectedFilters = prevFilters => {
-		setSelectedFilters(prevFilters);
-		setLocation(null);
-		setSelectedListItem(null);
-	};
-	let displayedFilters = filterOptions?.filters;
-	if (hiddenFilters) {
-		 displayedFilters = filterOptions?.filters.filter(filter => !hiddenFilters.includes(filter.id));
-	}
-	return (
-		<AccordionFilters
-			className={className}
-			defaultValue={defaultValue}
-			filterOptions={filterOptions}
-		>
-			{displayedFilters?.map(filter => {
-				if(filter.id === 'category' && SubcategoryRequireCategory === true && (!selectedFilters.categoryClass || Object.keys(selectedFilters.categoryClass).length < 1)){
-					return;
-				} else if (filter.id === 'category' && SubcategoryRequireCategory === true && filter.items.length > 0) {
-					filter.items = filter.items.filter(item => item.count > 0);
-				}
-				return (<AccordionFilterItem
-					key={filter.id}
-					filter={filter}
-					externalLinksInFilters={siteConfig.externalLinksInFilters}
-					setDefaultValue={setDefaultValue}
-					selectedFilters={selectedFilters}
-					setSelectedFilters={handleSetSelectedFilters}
-					subcategoryRequireCategory={siteConfig.subcategoryRequireCategory}
-				/>);
-			}
-			)}
-		</AccordionFilters>
-	);
-};
-
-export default AccordionFiltersContainer;
+import React from 'react';
+import { useMapList } from '~/contexts/mapListContext';
+import AccordionFilters from '~/components/modules/accordions/filters';
+import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
+
+const AccordionFiltersContainer = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem,
+	SubcategoryRequireCategory
+}) => {
+	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig, hiddenFilters } = useMapList();
+
+	const handleSetSelectedFilters = prevFilters => {
+		setSelectedFilters(prevFilters);
+		setLocation(null);
+		setSelectedListItem(null);
+	};
+	let displayedFilters = filterOptions?.filters;
+	if (hiddenFilters) {
+		 displayedFilters = filterOptions?.filters.filter(filter => !hiddenFilters.includes(filter.id));
+	}
+	return (
+		<AccordionFilters
+			className={className}
+			defaultValue={defaultValue}
+			filterOptions={filterOptions}
+		>
+			{displayedFilters?.map(filter => {
+				if(filter.id === 'category' && SubcategoryRequireCategory === true && (!selectedFilters.categoryClass || Object.keys(selectedFilters.categoryClass).length < 1)){
+					return;
+				} else if (filter.id === 'category' && SubcategoryRequireCategory === true && filter.items.length > 0) {
+					filter.items = filter.items.filter(item => item.count > 0);
+				}
+				return (<AccordionFilterItem
+					key={filter.id}
+					filter={filter}
+					externalLinksInFilters={siteConfig.externalLinksInFilters}
+					setDefaultValue={setDefaultValue}
+					selectedFilters={selectedFilters}
+					setSelectedFilters={handleSetSelectedFilters}
+					subcategoryRequireCategory={siteConfig.subcategoryRequireCategory}
+				/>);
+			}
+			)}
+		</AccordionFilters>
+	);
+};
+
+export default AccordionFiltersContainer;

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

@@ -1,83 +1,83 @@
-import React, { memo } from 'react';
-import AccordionFilterItem from '~/components/modules/accordions/filterItem';
-import FilterItem from '~/components/containers/filter/filter-item-container';
-import ItemsPill from '~/components/modules/buttons/items-pill';
-
-const FilterItemContainer = ({
-	filter,
-	setDefaultValue,
-	setSelectedFilters,
-	selectedFilters,
-	subcategoryRequireCategory = false,
-	externalLinksInFilters
-}) => {
-	const externalLinks = externalLinksInFilters?.filter(x => x.fieldName == filter.id);
-	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 };
-			if(subcategoryRequireCategory && fieldKey == 'categoryClass'){
-				delete updatedFilters['category'];
-			}
-			if(fieldKey == 'state' || fieldKey == 'city' || fieldKey == 'cityState'){
-				delete updatedFilters.entityId;
-				delete updatedFilters['entityName'];
-			}
-			delete updatedFilters[fieldKey];
-			return updatedFilters;
-		});
-	};
-
-	const header = (
-		<>
-			{filter.title}
-			{activeItemsCount > 0 && (
-				<ItemsPill
-					activeItemsCount={activeItemsCount}
-					onClick={handleClearFilters}
-				/>
-			)}
-		</>
-	);
-
-	const body = (
-		<>
-			{filter.items.sort().map(item => (
-				<FilterItem
-					key={item.name}
-					item={item}
-					field={filter.id}
-					selectedFilters={selectedFilters}
-					setSelectedFilters={setSelectedFilters}
-					subcategoryRequireCategory={subcategoryRequireCategory}
-				/>
-			))}
-			{externalLinks && externalLinks.map(link => (
-				<FilterItem
-					key={link.externalLink}
-					item={<a href={link.externalLinkUrl}>{link.externalLink}</a>}
-					isExternalLink={true}
-					externalLinkUrl={link.externalLinkUrl}
-					field={filter.id}
-					subcategoryRequireCategory={subcategoryRequireCategory}
-				/>
-			))}
-		</>
-	);
-
-	return (
-		<AccordionFilterItem
-			id={filter.id}
-			setDefaultValue={setDefaultValue}
-			header={header}
-			body={body}
-		/>
-	);
-};
-
-export default memo(FilterItemContainer);
+import React, { memo } from 'react';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+import FilterItem from '~/components/containers/filter/filter-item-container';
+import ItemsPill from '~/components/modules/buttons/items-pill';
+
+const FilterItemContainer = ({
+	filter,
+	setDefaultValue,
+	setSelectedFilters,
+	selectedFilters,
+	subcategoryRequireCategory = false,
+	externalLinksInFilters
+}) => {
+	const externalLinks = externalLinksInFilters?.filter(x => x.fieldName == filter.id);
+	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 };
+			if(subcategoryRequireCategory && fieldKey == 'categoryClass'){
+				delete updatedFilters['category'];
+			}
+			if(fieldKey == 'state' || fieldKey == 'city' || fieldKey == 'cityState'){
+				delete updatedFilters.entityId;
+				delete updatedFilters['entityName'];
+			}
+			delete updatedFilters[fieldKey];
+			return updatedFilters;
+		});
+	};
+
+	const header = (
+		<>
+			{filter.title}
+			{activeItemsCount > 0 && (
+				<ItemsPill
+					activeItemsCount={activeItemsCount}
+					onClick={handleClearFilters}
+				/>
+			)}
+		</>
+	);
+
+	const body = (
+		<>
+			{filter.items.sort().map(item => (
+				<FilterItem
+					key={item.name}
+					item={item}
+					field={filter.id}
+					selectedFilters={selectedFilters}
+					setSelectedFilters={setSelectedFilters}
+					subcategoryRequireCategory={subcategoryRequireCategory}
+				/>
+			))}
+			{externalLinks && externalLinks.map(link => (
+				<FilterItem
+					key={link.externalLink}
+					item={<a href={link.externalLinkUrl}>{link.externalLink}</a>}
+					isExternalLink={true}
+					externalLinkUrl={link.externalLinkUrl}
+					field={filter.id}
+					subcategoryRequireCategory={subcategoryRequireCategory}
+				/>
+			))}
+		</>
+	);
+
+	return (
+		<AccordionFilterItem
+			id={filter.id}
+			setDefaultValue={setDefaultValue}
+			header={header}
+			body={body}
+		/>
+	);
+};
+
+export default memo(FilterItemContainer);