@abcagency/hc-ui-components 1.3.94 → 1.3.96

package/src/components/HireControlMap.js

@@ -1,195 +1,195 @@
-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, siteConfiguration = null) {
-	const [siteConfig, setSiteConfig] = useState(siteConfiguration);
-	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);
-			}
-		};
-		if(!siteConfig){
-			fetchSiteConfig();
-		}
-	}, [clientToken]);
-
-	return { siteConfig, isLoading, error };
-}
-
-// Component to handle all context providers
-const ContextProviders = ({ children, siteConfig, trackEvent, ...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',
-	isIframe = false,
-	trackEvent = (eventType, eventObj) => {
-		console.log(eventType);
-		console.log(eventObj);
-	},
-	listings = [],
-	entities = [],
-	defaultFilters = null,
-	hiddenFilters = null,
-	setFiltersUrl = null,
-	ExpandListComponent = null,
-	additionalMapMarkers = [],
-	defaultZoomOverride = null,
-	siteConfiguration = null
-}) => {
-	// Load site configuration
-	const { siteConfig, error } = useSiteConfig(clientToken, siteConfiguration);
-
-	// Load Google Maps
-	const { isLoaded: isMapsLoaded } = useLoadScript({
-		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
-		version: 'quarterly',
-		libraries: LIBRARIES
-	});
-
-	if (error || !siteConfig) {
-		return <div className="hc-p-4"></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,
-		isIframe
-	};
-
-	// 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
-		}
-	};
-	//Desktop view of filter used below
-	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 isDesktop={true} 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;
+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, siteConfiguration = null) {
+	const [siteConfig, setSiteConfig] = useState(siteConfiguration);
+	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);
+			}
+		};
+		if(!siteConfig){
+			fetchSiteConfig();
+		}
+	}, [clientToken]);
+
+	return { siteConfig, isLoading, error };
+}
+
+// Component to handle all context providers
+const ContextProviders = ({ children, siteConfig, trackEvent, ...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',
+	isIframe = false,
+	trackEvent = (eventType, eventObj) => {
+		console.log(eventType);
+		console.log(eventObj);
+	},
+	listings = [],
+	entities = [],
+	defaultFilters = null,
+	hiddenFilters = null,
+	setFiltersUrl = null,
+	ExpandListComponent = null,
+	additionalMapMarkers = [],
+	defaultZoomOverride = null,
+	siteConfiguration = null,
+	localStorageKey = 'defaultKey.'
+}) => {
+	// Load site configuration
+	const { siteConfig, error } = useSiteConfig(clientToken, siteConfiguration);
+
+	// Load Google Maps
+	const { isLoaded: isMapsLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: LIBRARIES
+	});
+
+	if (error || !siteConfig) {
+		return <div className="hc-p-4"></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,
+		isIframe,
+		localStorageKey
+	};
+
+	// 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
+		}
+	};
+	//Desktop view of filter used below
+	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 isDesktop={true} 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,69 +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';
-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;
-
-	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);
-				}
-
-				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;
+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;
+
+	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);
+				}
+
+				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;