@abcagency/hc-ui-components 1.3.72 → 1.3.73

package/src/components/HireControlMap.js

@@ -1,167 +1,194 @@
-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;
+import React, { useEffect, useState } from 'react';
+import { useLoadScript } from '@react-google-maps/api';
+
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/containers/maps/map-list-container';
+
+// Context imports
+import { MapProvider } from '~/contexts/mapContext';
+import { PlacesProvider } from '~/contexts/placesContext';
+import { MapListProvider } from '~/contexts/mapListContext';
+import { TrackEventProvider } from '~/contexts/trackEventContext';
+import { ThemeProvider } from '~/contexts/themeContext';
+
+import { getMapConfig } from '~/services/configService';
+import { setClientAuthKey } from '~/clientToken.js';
+
+import '../styles/index.css';
+
+// Libraries for Google Maps
+const LIBRARIES = ['places'];
+
+// Custom hook to fetch site configuration
+function useSiteConfig(clientToken) {
+	const [siteConfig, setSiteConfig] = useState(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(null);
+
+	useEffect(() => {
+		const fetchSiteConfig = async () => {
+			try {
+				setClientAuthKey(clientToken);
+				const configData = await getMapConfig(clientToken);
+				setSiteConfig(configData);
+			} catch (err) {
+				console.error('Failed to fetch site configuration:', err);
+				setError(err);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchSiteConfig();
+	}, [clientToken]);
+
+	return { siteConfig, isLoading, error };
+}
+
+// Component to handle all context providers
+const ContextProviders = ({ children, siteConfig, trackEvent, ...mapListProps }) => {console.log(mapListProps); 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} {...mapListProps}>
+				<MapProvider resetFilters={mapListProps.resetFilters} defaultZoomOverride={mapListProps.defaultZoomOverride}>
+					<PlacesProvider
+						placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+						additionalMapMarkers={mapListProps.additionalMapMarkers}
+						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
+							}
+
+						}}
+					>
+						{children}
+					</PlacesProvider>
+				</MapProvider>
+			</MapListProvider>
+		</ThemeProvider>
+	</TrackEventProvider>
+);};
+
+// Main component
+//
+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 = [],
+	entities = [],
+	defaultFilters = null,
+	hiddenFilters = null,
+	setFiltersUrl = null,
+	ExpandListComponent = null,
+	additionalMapMarkers = [],
+	defaultZoomOverride = null
+}) => {
+	// Load site configuration
+	const { siteConfig, isLoading, error } = useSiteConfig(clientToken);
+
+	// Load Google Maps
+	const { isLoaded: isMapsLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: LIBRARIES
+	});
+
+	// Handle loading and error states
+	if (isLoading || !isMapsLoaded) {
+		return <div className="hc-p-4">Loading map interface...</div>;
+	}
+
+	if (error || !siteConfig) {
+		return <div className="hc-p-4">Error loading map configuration.</div>;
+	}
+
+	// Prepare props for MapListProvider
+	const mapListProps = {
+		resetFilters: false,
+		navigateToDetails,
+		navigateToEasyApply,
+		Link,
+		linkFormat,
+		easyApplyUrl,
+		easyApplyText,
+		listings,
+		entities,
+		setFiltersUrl,
+		hiddenFilters,
+		handleUrlUpdate,
+		defaultFilters,
+		defaultZoomOverride, // will usually fit bounds
+		containerStyle,
+		ExpandListComponent: ExpandListComponent ?? null,
+		additionalMapMarkers
+	};
+
+	// Prepare marker configuration
+	const 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
+		}
+	};
+
+	return (
+		<ContextProviders
+			siteConfig={siteConfig}
+			trackEvent={trackEvent}
+			{...mapListProps}
+		>
+			<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}
+					mapPosition={siteConfig.mapPosition}
+					showMap={siteConfig.showMap}
+					fieldsShown={siteConfig.fieldsShown}
+					specialFeatures={siteConfig.specialFeatures}
+					fieldNames={siteConfig.fieldNames}
+					placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+					markerConfigs={markerConfigs}
+				/>
+			</Grid>
+		</ContextProviders>
+	);
+};
+
+export default HireControlMap;

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

@@ -1,52 +1,69 @@
-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';
+import FilterItem from '~/components/containers/filter/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;
+	console.log(filterOptions?.filters);
+	if (hiddenFilters) {
+		 displayedFilters = filterOptions?.filters.filter(filter => !hiddenFilters.includes(filter.id));
+	}
+	console.log(displayedFilters);
+	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);
+				}
+
+				else if(filter.id === 'specialFeatures' && !filter.items.some(item => item.name !== "Favorite" && item.count > 1)){
+					const favorite = filter.items.find(item => item.name === "Favorite");
+					return 	<FilterItem
+						key={"Favorite"}
+						item={favorite}
+						field={filter.id}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={setSelectedFilters}
+						subcategoryRequireCategory={false}
+					/>;
+
+				}
+
+				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);