@abcagency/hc-ui-components 1.4.23 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@abcagency/hc-ui-components",
-	"version": "1.4.23",
+	"version": "1.5.1",
 	"description": "UI Components for HireControl",
 	"main": "dist/index.js",
 	"files": [
@@ -24,12 +24,6 @@
 	"author": "Aloysius Butler & Clark",
 	"license": "ISC",
 	"dependencies": {
-		"ajv": "^8.16.0",
-		"ajv-keywords": "^5.1.0",
-		"fuse.js": "^7.0.0",
-		"tailwind-merge": "^2.2.0"
-	},
-	"peerDependencies": {
 		"@headlessui/react": "^1.7.19",
 		"@iconify/react": "^4.1.1",
 		"@radix-ui/react-accordion": "^1.1.2",
@@ -38,56 +32,25 @@
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@react-google-maps/api": "^2.19.3",
+		"@testing-library/react": "^13.4.0",
+		"ajv": "^8.16.0",
+		"ajv-keywords": "^5.1.0",
 		"framer-motion": "^10.18.0",
-		"react": ">=18.0.0",
-		"react-dom": ">=18.0.0",
+		"fuse.js": "^7.0.0",
+		"npm": "^10.8.1",
 		"react-router-dom": "^6.23.1",
+		"react-scripts": "5.0.1",
 		"react-wrap-balancer": "^1.1.1",
-		"use-places-autocomplete": "^4.0.1"
+		"rollup-plugin-filesize": "^10.0.0",
+		"rollup-plugin-progress": "^1.1.2",
+		"rollup-plugin-visualizer": "^5.12.0",
+		"tailwind-merge": "^2.2.0",
+		"use-places-autocomplete": "^4.0.1",
+		"web-vitals": "^2.1.4"
 	},
-	"peerDependenciesMeta": {
-		"@headlessui/react": {
-			"optional": false
-		},
-		"@iconify/react": {
-			"optional": false
-		},
-		"@radix-ui/react-accordion": {
-			"optional": false
-		},
-		"@radix-ui/react-dialog": {
-			"optional": false
-		},
-		"@radix-ui/react-popover": {
-			"optional": false
-		},
-		"@radix-ui/react-select": {
-			"optional": false
-		},
-		"@radix-ui/react-tabs": {
-			"optional": false
-		},
-		"@react-google-maps/api": {
-			"optional": false
-		},
-		"framer-motion": {
-			"optional": false
-		},
-		"react": {
-			"optional": false
-		},
-		"react-dom": {
-			"optional": false
-		},
-		"react-router-dom": {
-			"optional": false
-		},
-		"react-wrap-balancer": {
-			"optional": false
-		},
-		"use-places-autocomplete": {
-			"optional": false
-		}
+	"resolutions": {
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.24.6",
@@ -105,9 +68,8 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.13",
-		"@testing-library/react": "^16.0.0",
 		"@types/node": "^20.14.2",
-		"@types/react": "^19.0.0",
+		"@types/react": "^18.3.3",
 		"@typescript-eslint/eslint-plugin": "^7.13.0",
 		"@typescript-eslint/parser": "^7.13.0",
 		"autoprefixer": "^10.4.19",
@@ -124,14 +86,9 @@
 		"postcss": "^8.4.38",
 		"postcss-prefixer": "^3.0.0",
 		"postcss-preset-env": "^9.5.14",
-		"react": "19.1.1",
-		"react-dom": "19.1.1",
 		"rollup": "^4.18.0",
-		"rollup-plugin-filesize": "^10.0.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-progress": "^1.1.2",
-		"rollup-plugin-visualizer": "^5.12.0",
 		"tailwindcss": "^3.4.3",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^4.9.5"

package/src/components/HireControlMap.js

@@ -15,7 +15,7 @@ import { ThemeProvider } from '~/contexts/themeContext';
 import { getMapConfig } from '~/services/configService';
 import { setClientAuthKey } from '~/clientToken.js';
 
-import '../styles/components.css';
+import '../styles/index.css';
 
 // Libraries for Google Maps
 const LIBRARIES = ['places'];
@@ -59,7 +59,7 @@ const ContextProviders = ({ children, siteConfig, trackEvent, googleMapsApiKey,
 			secondaryDark={siteConfig.colors.secondaryDark}
 		>
 			<MapListProvider siteConfig={siteConfig} {...mapListProps}>
-				<MapProvider resetFilters={mapListProps.resetFilters} defaultZoomOverride={mapListProps.defaultZoomOverride} localStorageKey={mapListProps.localStorageKey}>
+				<MapProvider resetFilters={mapListProps.resetFilters} defaultZoomOverride={mapListProps.defaultZoomOverride}>
 					<PlacesProvider
 						placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
 						additionalMapMarkers={mapListProps.additionalMapMarkers}
@@ -98,9 +98,6 @@ export const HireControlMap = ({
 	easyApplyUrl = null,
 	easyApplyText = 'Easy Apply',
 	isIframe = false,
-	hideMap = false, // Override to hide map even if siteConfig.showMap is true
-	hideFilters = false, // Hide the entire filter section
-	noEntities = false, // Skip entity fetching and hide entity-related filters
 	trackEvent = (eventType, eventObj) => {
 		console.log(eventType);
 		console.log(eventObj);
@@ -170,15 +167,9 @@ export const HireControlMap = ({
 		ExpandListComponent: ExpandListComponent ?? null,
 		additionalMapMarkers,
 		isIframe,
-		localStorageKey,
-		hideMap,
-		hideFilters,
-		noEntities
+		localStorageKey
 	};
 
-	// Calculate effective showMap value (hideMap overrides siteConfig.showMap)
-	const effectiveShowMap = hideMap ? false : siteConfig.showMap;
-
 	// Prepare marker configuration
 	const markerConfigs = {
 		fillColor: siteConfig.colors.primary,
@@ -201,20 +192,18 @@ export const HireControlMap = ({
 			<Grid
 				as='section'
 				id='job-search-interface'
-				columns={hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'}
+				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'}
 			>
-				{!hideFilters && (
-					<Grid.Item className='hc-bg-gray-100'>
-						<Filter isDesktop={true} showMap={effectiveShowMap} className='hc-hidden md:hc-block' />
-					</Grid.Item>
-				)}
+				<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={effectiveShowMap}
+					showMap={siteConfig.showMap}
 					fieldsShown={siteConfig.fieldsShown}
 					specialFeatures={siteConfig.specialFeatures}
 					fieldNames={siteConfig.fieldNames}

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

@@ -12,7 +12,7 @@ const AccordionFiltersContainer = ({
 	setSelectedListItem,
 	SubcategoryRequireCategory
 }) => {
-	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig, hiddenFilters, noEntities } = useMapList();
+	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig, hiddenFilters } = useMapList();
 
 	const handleSetSelectedFilters = prevFilters => {
 		setSelectedFilters(prevFilters);
@@ -25,11 +25,6 @@ const AccordionFiltersContainer = ({
 		 displayedFilters = filterOptions?.filters.filter(filter => !hiddenFilters.includes(filter.id));
 	}
 
-	// Hide entity-dependent filters when noEntities is true
-	if (noEntities && displayedFilters) {
-		displayedFilters = displayedFilters.filter(filter => filter.id !== 'entityName');
-	}
-
 	return (
 		<AccordionFilters
 			className={className}

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

@@ -21,8 +21,8 @@ const FilterItemContainer = ({
 		event.stopPropagation();
 		setSelectedFilters(prevFilters => {
 			const updatedFilters = { ...prevFilters };
-			if(subcategoryRequireCategory && fieldKey == 'category'){
-				delete updatedFilters['subCategory'];
+			if(subcategoryRequireCategory && fieldKey == 'categoryClass'){
+				delete updatedFilters['category'];
 			}
 			if(fieldKey == 'state' || fieldKey == 'city' || fieldKey == 'cityState'){
 				delete updatedFilters.entityId;

package/src/components/containers/accordions/map-accordion-item-container.js

@@ -25,11 +25,7 @@ const MapAccordionItemContainer = ({
 			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
 		} else {
 			setStorageObject("selectedListItem", item);
-			console.log('mapItems here', mapItems);
-			//edited here for new structure of entity key
-			console.log('the item in questions is',item);
-			const location = mapItems.find(x => x.entityKey?.toLowerCase() === item.fields.entityKey?.toLowerCase()) || null;
-			console.log('location is', location);
+			const location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
 			selectItem(item, location, 12, {
 				lat: location?.latitude,
 				lng: location?.longitude
@@ -39,7 +35,7 @@ const MapAccordionItemContainer = ({
 
 	const handleItemClick = item => {
 		trackEvent(eventTypes.JOB_LISTING_SELECTED, {
-			jobTitle: item.fields.title,
+			jobTitle: item.fields.position,
 			jobCategory: item.fields.category,
 			entityDisplayName: item?.mapDetails?.entityDisplayName
 		});

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

@@ -24,8 +24,7 @@ const FilterContainer = ({
 		handleSettingFavorites,
 		setQuery,
 		siteConfig,
-		containerStyle,
-		noEntities
+		containerStyle
 	} = useMapList();
 	const [defaultValue, setDefaultValue] = useState(siteConfig?.defaultFilterOpen ? siteConfig?.defaultFilterOpen : null);
 	const handleReset = () => {
@@ -65,7 +64,7 @@ const FilterContainer = ({
 				SubcategoryRequireCategory={siteConfig.subcategoryRequireCategory}
 			/>
 			<FilterSearch />
-			{siteConfig.hideLocations !== true && !noEntities &&
+			{siteConfig.hideLocations !== true &&
 			<FilterLocations
 				setHasActiveFilters={setHasActiveFilters}
 				defaultValue={defaultValue}

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

@@ -55,30 +55,30 @@ const FilterItemContainer = ({
 				delete updatedFilters[field];
 			}
 
-			if (field === 'category' && subcategoryRequireCategory) {
+			if (field === 'categoryClass' && subcategoryRequireCategory) {
 				const activeCategoryClass = itemKey;
 				const categoriesToConsiderForRemoval = new Set(
 					filteredListings
-						.filter(listing => listing.fields.category === activeCategoryClass)
-						.flatMap(listing => listing.fields.subCategory || [])
+						.filter(listing => listing.fields.categoryClass === activeCategoryClass)
+						.flatMap(listing => listing.fields.category || [])
 				);
 
 				const categoriesToRetain = new Set(
 					filteredListings
-						.filter(listing => listing.fields.category !== activeCategoryClass)
-						.flatMap(listing => listing.fields.subCategory || [])
+						.filter(listing => listing.fields.categoryClass !== activeCategoryClass)
+						.flatMap(listing => listing.fields.category || [])
 						.filter(category => categoriesToConsiderForRemoval.has(category))
 				);
 
-				if (updatedFilters['subCategory']) {
-					Object.keys(updatedFilters['subCategory']).forEach(categoryKey => {
+				if (updatedFilters['category']) {
+					Object.keys(updatedFilters['category']).forEach(categoryKey => {
 						if (categoriesToConsiderForRemoval.has(categoryKey) && !categoriesToRetain.has(categoryKey)) {
-							delete updatedFilters['subCategory'][categoryKey];
+							delete updatedFilters['category'][categoryKey];
 						}
 					});
 
-					if (Object.keys(updatedFilters['subCategory']).length === 0) {
-						delete updatedFilters['subCategory'];
+					if (Object.keys(updatedFilters['category']).length === 0) {
+						delete updatedFilters['category'];
 					}
 				}
 			}

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

@@ -12,7 +12,7 @@ const FilterLocationContainer = ({
 	setLocation,
 	setSelectedListItem
 }) => {
-	const { setSelectedFilters, selectedFilters, filterOptions, noEntities } = useMapList();
+	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
 
 	const locations = filterOptions?.locations;
 	const pointsOfInterest = filterOptions?.pointsOfInterest;
@@ -29,8 +29,8 @@ const FilterLocationContainer = ({
 			setSelectedFilters={setSelectedFilters}
 			selectedFilters={selectedFilters}
 		>
-			{showMap && !noEntities && <FilterCommute className="hc-mt-6" />}
-			{showMap && !noEntities && (
+			{showMap && <FilterCommute className="hc-mt-6" />}
+			{showMap && (
 				<FilterPointsOfInterest
 					className="hc-mt-4"
 					pointsOfInterest={pointsOfInterest}

package/src/components/containers/list/item-list-container.tsx

@@ -23,17 +23,17 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 	fieldsShown,
 	specialFeatures
 }) => {
-	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting, ExpandListComponent, favorites, noEntities } = useMapList();
+	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting, ExpandListComponent, favorites } = 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 ? (ExpandListComponent  ? <ExpandListComponent listing={item} /> : <ListingDetailsContainer item={item} recruiter={recruiter} />) : null;
 
-	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0 && !noEntities) {
+	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
 		fieldsShown.push('travelTime');
 		fieldNames['travelTime'] = 'Commute';
-	} else if (fieldsShown.includes('travelTime') && (!commuteLocation || noEntities)) {
+	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
 		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
 	}
 

package/src/components/containers/maps/info-window-content-container.js

@@ -57,7 +57,7 @@ const InfoWindowContentContainer = ({
 			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 });
 

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

@@ -256,10 +256,9 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 	if (!mapItems) {
 		return null;
 	}
-
 	const mapItemsKey = mapItems.map(item => item.id).join("-");
 
-
+	console.log(location);
 	return (
 		<Map
 			zoom={zoom}

package/src/components/modules/buttons/button-group-apply.js

@@ -31,19 +31,19 @@ const ButtonGroupApply = ({
 
 	const trackApplyNow = () => {
 		//console.log('calling trackApplyNow');
-		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackApplyOpen = () => {
 		//console.log('calling trackApplyOpen');
-		trackEvent(eventTypes.APPLY_OPEN_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_OPEN_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackEasyApply = () => {
 		//console.log('calling trackEasyApply');
-		trackEvent(eventTypes.EASY_APPLY_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.EASY_APPLY_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackViewDetails = () => {
 		//console.log('calling trackViewDetails');
-		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 
 	return (
@@ -78,9 +78,9 @@ const ButtonGroupApply = ({
 				</Button.Anchor>
 			) : null}
 
-			{item.fields.applyOnline == true && item.fields.applyUrl && !includeDialog &&
+			{item.applyOnline == 1 && item.applyUrl && !includeDialog &&
 				<Button.Anchor
-					href={item.fields.applyUrl}
+					href={item.applyUrl}
 					variant={applyButtonVariant}
 					size={buttonSize}
 					className={"map-apply-now-button"}
@@ -91,8 +91,8 @@ const ButtonGroupApply = ({
 					{applyNowText}
 				</Button.Anchor>
 			}
-			{item.fields.applyOnline == true && item.fields.applyUrl && includeDialog &&
-				<ApplyDialog applyUrl={item.fields.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName} item={item} trackEvent={trackEvent} eventTypes={eventTypes} isIframe={isIframe}>
+			{item.applyOnline == 1 && item.applyUrl && includeDialog &&
+				<ApplyDialog applyUrl={item.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName} item={item} trackEvent={trackEvent} eventTypes={eventTypes} isIframe={isIframe}>
 					<Button.Anchor
 						variant={applyButtonVariant}
 						size={buttonSize}

package/src/components/modules/dialogs/apply-dialog.js

@@ -7,11 +7,11 @@ import Icon from '~/components/modules/icon';
 const ApplyDialog = ({ children, applyUrl, internalApplyLink, companyName, item, trackEvent, eventTypes, isIframe }) => {
 	const trackApplyOption1 = () => {
 		//console.log('calling trackApplyOption1');
-		trackEvent(eventTypes.APPLY_OPTION_1_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_OPTION_1_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackApplyOption2 = () => {
 		//console.log('calling trackApplyOption2');
-		trackEvent(eventTypes.APPLY_OPTION_2_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_OPTION_2_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 
 	return (

package/src/components/modules/list/field-mapper-desktop.jsx

@@ -11,7 +11,7 @@ const FieldMapperDesktop = ({
 	const orderedFields = fieldsShown.filter(field => field in item.fields);
 
 	const specialFeaturePills = field => {
-		return field === 'title' && specialFeatures &&
+		return field === 'position' && specialFeatures &&
       Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
       	return item.fields[featureKey] == 1 && (
       		<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
@@ -29,7 +29,7 @@ const FieldMapperDesktop = ({
 						className={`
               hc-hidden md:hc-block hc-px-2
               ${index === 0 ? "hc-pl-7" : ""}
-              ${field.toLowerCase() === "title" ? "hc-col-span-4 hc-text-balance hc-font-semibold" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+              ${field.toLowerCase() === "position" ? "hc-col-span-4 hc-text-balance hc-font-semibold" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
             `}
 					>
 						<span className="hc-sr-only">{capitalize(field)}</span>

package/src/components/modules/list/field-mapper-mobile.jsx

@@ -12,7 +12,7 @@ const FieldMapperMobile = ({
 	includeFavorite = true
 }) => {
 	const specialFeaturePills = field => {
-		return field === 'title' && specialFeatures &&
+		return field === 'position' && specialFeatures &&
       Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
       	return item.fields[featureKey] == 1 && (
       		<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
@@ -22,11 +22,11 @@ const FieldMapperMobile = ({
 
 	return (
 		<Grid.Item className="md:hc-hidden">
-			{fieldsShown.includes("title") &&
+			{fieldsShown.includes("position") &&
         <>
         	<div className="hc-flex hc-items-start">
         		<div className="hc-flex hc-justify-between hc-items-center hc-min-w-[100%]">
-        			<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.title}</h3>
+        			<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.position}</h3>
         			{includeFavorite && <div className="hc-flex hc-justify-end hc-pb-2">
         				<Icon
         					icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
@@ -41,20 +41,20 @@ const FieldMapperMobile = ({
         			}
         		</div>
         	</div>
-        	{specialFeatures && <div className='hc-pb-4'>{specialFeaturePills("title", true)} </div>}
+        	{specialFeatures && <div className='hc-pb-4'>{specialFeaturePills("position", true)} </div>}
         </>
 			}
 
 			<ul className="hc-space-y-2 hc-text-xs">
 				{[
 					{
-						field: "category",
-						name: "category",
+						field: "categoryClass",
+						name: "categoryClass",
 						icon: "icon-park-solid:tree-list"
 					},
 					{
-						field: "subCategory",
-						name: "subCategory",
+						field: "category",
+						name: "Category",
 						icon: "icon-park-solid:tree-list"
 					},
 					{

package/src/components/modules/list/header-item.js

@@ -57,7 +57,7 @@ const HeaderItem = ({
 			size="none"
 			className={`
 				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
-				${field.toLowerCase() === "title" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+				${field.toLowerCase() === "position" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
 				${className ?? ""}
 			`}
 			{...rest}

package/src/components/modules/maps/map-list.js

@@ -8,7 +8,7 @@ const MapList = ({ showMap, loading, list, map, filter, mapPosition, containerSt
 				style={containerStyle}
 				className={`
 					${showMap === false ? "md:hc-grid-rows-[100%]" : "md:hc-grid-rows-[50%_50%]"}
-					hc-hidden md:hc-grid hc-overflow-hidden hc-relative bg-gray-100
+					hc-hidden md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
 				`}
 			>
 				{mapPosition && mapPosition === 'top' && showMap ? (

package/src/contexts/mapContext.tsx

@@ -37,38 +37,37 @@ interface MapProviderProps {
   children: ReactNode;
   resetFilters: boolean;
 	defaultZoomOverride?: number | null;
-	localStorageKey?: string;
 }
 
-export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters, defaultZoomOverride, localStorageKey = '' }) => {
-	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject(localStorageKey + 'selectedListItem'));
-	const [location, setLocation] = useState<any>(getStorageObject(localStorageKey + 'location'));
-	const [center, setCenter] = useState<LatLng>(getStorageObject(localStorageKey + "center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
-	const [zoom, setZoom] = useState<number>(getStorageObject(localStorageKey + "zoom", 9) || 9);
+export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters, defaultZoomOverride }) => {
+	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject('selectedListItem'));
+	const [location, setLocation] = useState<any>(getStorageObject('location'));
+	const [center, setCenter] = useState<LatLng>(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
+	const [zoom, setZoom] = useState<number>(getStorageObject("zoom", 9) || 9);
 	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
 	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
-	const [firstLoadListItem] = useState<any>(getStorageObject(localStorageKey + 'selectedListItem', { id: "defaultId" }));
+	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
 	const userSetZoom = useRef<boolean>(true);
 
 	useEffect(() => {
-		setStorageObject(localStorageKey + "selectedListItem", selectedListItem);
-	}, [selectedListItem, localStorageKey]);
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
 
 	useEffect(() => {
-		localStorage.setItem(localStorageKey + "zoom", zoom.toString());
-	}, [zoom, localStorageKey]);
+		localStorage.setItem("zoom", zoom.toString());
+	}, [zoom]);
 
 	useEffect(() => {
 		if (location == null) {
-			localStorage.removeItem(localStorageKey + "location");
+			localStorage.removeItem("location");
 		} else {
-			setStorageObject(localStorageKey + "location", location);
+			setStorageObject("location", location);
 		}
-	}, [location, localStorageKey]);
+	}, [location]);
 
 	useEffect(() => {
-		setStorageObject(localStorageKey + "center", center);
-	}, [center, localStorageKey]);
+		setStorageObject("center", center);
+	}, [center]);
 
 	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
 		setSelectedListItem(item);
@@ -99,7 +98,7 @@ export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters
 	}, [resetFilters]);
 
 	const selectLocationEntity = (location: LatLng) => {
-		localStorage.removeItem(localStorageKey + "selectedListItem");
+		localStorage.removeItem("selectedListItem");
 		setTimeout(() => setLocation(location), 200);
 		setSelectedListItem(null);
 	};