@abcagency/hc-ui-components 1.9.9 → 1.9.12

package/src/contexts/mapListContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useState, useEffect, useContext, useRef, ReactNode } from 'react';
 
-import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~/util/filterUtil';
+import { generateFilterOptions, applyFilters, filterListingsByLocation, getFieldValue } from '~/util/filterUtil';
 import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
 import { updateURLWithFilters, filtersFromURL } from '~/util/urlFilterUtil';
 
@@ -223,13 +223,13 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		if (setFiltersUrl === true && urlData?.query) {
 			return urlData.query;
 		}
-		
+
 		// Only fall back to localStorage if there's NO query param in URL
 		// This prevents localStorage from overriding empty query params
 		if (setFiltersUrl === true && typeof urlData?.query !== 'undefined') {
 			return null; // URL has query param but it's empty/null
 		}
-		
+
 		// Fall back to localStorage only if URL has no query param at all
 		return getQuery(localStorageKey);
 	}
@@ -252,17 +252,17 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			const storedMapItems = getStorageObject(localStorageKey + 'mapItems', []) || [];
 			const storedSortSetting = getStorageObject(localStorageKey + 'sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' };
 			const storedCommuteLocation = getStorageObject(localStorageKey + 'commuteLocation');
-			
+
 			setMapItems(storedMapItems);
 			setSortSetting(storedSortSetting);
 			if (storedCommuteLocation) setCommuteLocation(storedCommuteLocation);
-			
+
 			// Load filters and query
 			if (!resetFilters) {
 				setSelectedFilters(firstLoadFilters());
 				setQuery(firstLoadQuery());
 			}
-			
+
 			setHasMounted(true);
 		}
 	}, [localStorageKey]);
@@ -305,11 +305,11 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 				if (!getListingEntitiesCallback) {
 					return;
 				}
-				
+
 				const fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
 				console.log('Fetched entities with travel times:', fetchedEntities);
 				setListingEntities(fetchedEntities);
-				
+
 				// Update travelTime on ALL listings (both allListings and filteredListings)
 				const updatedAllListings = allListings.map(listing => {
 					if (
@@ -333,7 +333,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 					}
 					return listing;
 				});
-				
+
 				console.log('Updated listings with travel times:', updatedAllListings.slice(0, 2));
 				setAllListings(updatedAllListings);
 			} catch (error) {
@@ -349,9 +349,9 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	// Note: Commute location changes will fetch updated entities with travel times via separate useEffect
 	useEffect(() => {
 		if (!entities || entitiesInitialized.current) return;
-		
+
 		entitiesInitialized.current = true;
-		
+
 		// Handle both object (production format) and array (for backwards compatibility)
 		if (Array.isArray(entities)) {
 			// Convert array to object
@@ -389,44 +389,42 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			let processedListings = listings;
 			if (defaultFilters) {
 				processedListings = listings.filter(listing => {
-					if (!listing.fields) return false;
-
-					return Object.keys(defaultFilters).every(filterKey => {
-						const filterValues = defaultFilters[filterKey as keyof typeof defaultFilters];
-						const listingValue = listing.fields ? listing.fields[filterKey as keyof typeof listing.fields] : null;
-						return filterValues.includes(listingValue);
-					});
+				return Object.keys(defaultFilters).every(filterKey => {
+					const filterValues = defaultFilters[filterKey as keyof typeof defaultFilters];
+					const listingValue = getFieldValue(listing, filterKey);
+					return filterValues.includes(listingValue);
 				});
-			}
-
-			setAllListings(processedListings);
-			console.log('Set allListings to', processedListings.length, 'items');
-			
-			// Map items will be set when entities are processed
-			// For now, just set empty object - will be populated when entities arrive
-			setMapItems({});
-		} catch (error) {
-			console.error('Error processing listings:', error);
+			});
 		}
-		
-		setLoading(false);
-	}, [listings]);
 
-	useEffect(() => {
-		const processListings = async () => {
-			// Don't process if allListings hasn't been loaded yet
-			if (allListings.length === 0) {
-				console.log('processListings: Skipping - allListings is empty');
-				return;
-			}
+		setAllListings(processedListings);
+		console.log('Set allListings to', processedListings.length, 'items');
+		
+		// Map items will be set when entities are processed
+		// For now, just set empty object - will be populated when entities arrive
+		setMapItems({});
+	} catch (error) {
+		console.error('Error processing listings:', error);
+	}
+	
+	setLoading(false);
+}, [listings]);
+
+useEffect(() => {
+	const processListings = async () => {
+		// Don't process if allListings hasn't been loaded yet
+		if (allListings.length === 0) {
+			console.log('processListings: Skipping - allListings is empty');
+			return;
+		}
 
-			let filteredListings: Listing[];
-			let tempSelectedFilters = selectedFilters;
-			let tempQuery = query;
+		let filteredListings: Listing[];
+		let tempSelectedFilters = selectedFilters;
+		let tempQuery = query;
 
-			console.log('processListings: Running with query:', tempQuery, 'and', allListings.length, 'listings');
+		console.log('processListings: Running with query:', tempQuery, 'and', allListings.length, 'listings');
 
-			const { mapItems, filteredListings: tempFilteredListings } = await applyFilters(
+		const { mapItems, filteredListings: tempFilteredListings } = await applyFilters(
 				allListings,
 				tempSelectedFilters,
 				tempQuery,

package/src/util/fieldMapper.js

@@ -3,12 +3,16 @@ import React from 'react';
 import Grid from '~/components/modules/grid';
 
 import { capitalize } from '~/util/stringUtils';
+import { getFieldValue } from '~/util/filterUtil';
 
 const mapFieldsToGridItems = (item, fieldsShown) => {
-	const orderedFields = fieldsShown.filter(field => field in item.fields);
+	const orderedFields = fieldsShown.filter(field => {
+		const value = getFieldValue(item, field);
+		return value !== undefined && value !== null;
+	});
 
 	return orderedFields.map(field => {
-		let value = item.fields[field];
+		let value = getFieldValue(item, field);
 
 		return (
 			<Grid.Item key={field}>

package/src/util/filterUtil.js

@@ -4,11 +4,32 @@ import { isAlgoliaAvailable, isAlgoliaInitializing, filterListingsByAlgoliaSearc
 
 import Fuse from 'fuse.js';
 
+// Helper function to get field value from either fields or customFields
+export const getFieldValue = (listing, fieldKey) => {
+	// First check in fields
+	if (listing.fields && listing.fields[fieldKey] !== undefined && listing.fields[fieldKey] !== null) {
+		return listing.fields[fieldKey];
+	}
+	
+	// Then check in customFields array
+	if (listing.customFields && Array.isArray(listing.customFields)) {
+		const customField = listing.customFields.find(
+			cf => cf.id === fieldKey || cf.name === fieldKey
+		);
+		if (customField) {
+			return customField.value;
+		}
+	}
+	
+	return undefined;
+};
+
 export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = false) => {
 	const options = new Set();
 	listings.forEach(listing => {
-		if (listing.fields && listing.fields[field]) {
-			options.add(listing.fields[field]);
+		const value = getFieldValue(listing, field);
+		if (value) {
+			options.add(value);
 		}
 	});
 
@@ -18,8 +39,7 @@ export const getFilterOptions = (listings, filteredListings, field, excludeZeroC
 	});
 
 	filteredListings.forEach(listing => {
-		if (!listing.fields) return;
-		const value = listing.fields[field];
+		const value = getFieldValue(listing, field);
 		if (value && Object.prototype.hasOwnProperty.call(optionCounts, value)) {
 			optionCounts[value] += 1;
 		}
@@ -48,7 +68,9 @@ export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig,
 
 	filteredListings.forEach(listing => {
 		Object.entries(specialFeatures).forEach(([featureKey, featureName]) => {
-			if (listing.fields[featureKey] == 1) {
+			const value = getFieldValue(listing, featureKey);
+			// Support both numeric (1/0) and string ("true"/"false") boolean values
+			if (value == 1 || value === 1 || value === '1' || value === 'true' || value === true) {
 				featureCounts[featureName] += 1;
 			}
 		});
@@ -79,6 +101,75 @@ export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig,
 	return specialFeatureOptions;
 };
 
+// Helper to detect if a custom field should be treated as boolean or multi-value
+const isCustomFieldBoolean = (listings, fieldKey) => {
+	const distinctValues = new Set();
+	
+	for (const listing of listings) {
+		const value = getFieldValue(listing, fieldKey);
+		if (value != null && value !== '' && value !== undefined) {
+			distinctValues.add(String(value).toLowerCase());
+		}
+		// If we find more than 2 non-empty distinct values, it's not boolean
+		if (distinctValues.size > 2) {
+			return false;
+		}
+	}
+	
+	// Check if all values are boolean-like
+	const booleanValues = new Set(['true', 'false', '1', '0', 'yes', 'no']);
+	for (const val of distinctValues) {
+		if (!booleanValues.has(val)) {
+			return false;
+		}
+	}
+	
+	return distinctValues.size > 0 && distinctValues.size <= 2;
+};
+
+// Get dynamic custom field filters (for non-boolean multi-value fields)
+export const getDynamicCustomFieldFilters = (listings, filteredListings, siteConfig, filterConfig = {}) => {
+	if (!siteConfig.specialFeatures) return [];
+	
+	const dynamicFilters = [];
+	const specialFeaturesKeys = Object.keys(siteConfig.specialFeatures);
+	
+	// Find all custom fields used across listings
+	const allCustomFields = new Set();
+	listings.forEach(listing => {
+		if (listing.customFields && Array.isArray(listing.customFields)) {
+			listing.customFields.forEach(cf => {
+				if (cf.id || cf.name) {
+					allCustomFields.add(cf.id || cf.name);
+				}
+			});
+		}
+	});
+	
+	// For each custom field, check if it's NOT in specialFeatures and NOT boolean
+	allCustomFields.forEach(fieldKey => {
+		// Skip if already in specialFeatures
+		if (specialFeaturesKeys.includes(fieldKey)) return;
+		
+		// Check if this field has multiple non-boolean values
+		if (!isCustomFieldBoolean(listings, fieldKey)) {
+			const options = getFilterOptions(listings, filteredListings, fieldKey, filterConfig.hideZeroResults);
+			
+			// Only add if there are meaningful options
+			if (options.length > 1) {
+				dynamicFilters.push({
+					id: fieldKey,
+					title: fieldKey.charAt(0).toUpperCase() + fieldKey.slice(1).replace(/([A-Z])/g, ' $1').trim(),
+					items: options,
+					isDynamic: true
+				});
+			}
+		}
+	});
+	
+	return dynamicFilters;
+};
+
 const getPointsOfInterestOptions = pointsOfInterestNames => {
 	return Object.entries(pointsOfInterestNames).sort().map(([key, name]) => ({
 		key,
@@ -111,10 +202,25 @@ export const generateFilterOptions = (
 				return filterOptions.filters.find(filter => filter.id === fieldName);
 			}
 			if(fieldName == 'category'){
+				// For category counts, exclude specialFeatures from the filter calculation
+				// so that toggling specialFeatures updates category counts
+				let categoryCountListings = countListings;
+				if (filterConfig.dynamicCounts && selectedFilters.specialFeatures) {
+					categoryCountListings = allListings.filter(listing => {
+						return Object.entries(selectedFilters).every(([key, value]) => {
+							if (key === 'specialFeatures') return true; // Exclude specialFeatures
+							const fieldValue = getFieldValue(listing, key);
+							if (value && typeof value === 'object' && value[fieldValue] === true) {
+								return true;
+							}
+							return false;
+						});
+					});
+				}
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getFilterOptions(allListings, countListings, fieldName, filterConfig.hideZeroResults)
+					items: getFilterOptions(allListings, categoryCountListings, fieldName, filterConfig.hideZeroResults)
 				};
 			}
 			if(fieldName == 'subCategory' && selectedFilters.category){
@@ -146,7 +252,8 @@ export const generateFilterOptions = (
 				locationFilteredListings = allListings.filter(listing => {
 					return Object.entries(selectedFilters).every(([key, value]) => {
 						if (siteConfig.locationFiltersShown.includes(key)) return true;
-						if (value && typeof value === 'object' && value[listing.fields[key]] === true) {
+						const fieldValue = getFieldValue(listing, key);
+						if (value && typeof value === 'object' && value[fieldValue] === true) {
 							return true;
 						}
 						return false;
@@ -211,6 +318,9 @@ export const generateFilterOptions = (
 			)
 		};
 
+		// Get dynamic custom field filters (multi-value fields not in specialFeatures)
+		const dynamicCustomFilters = getDynamicCustomFieldFilters(allListings, countListings, siteConfig, filterConfig);
+
 		// Filter out null filters and ensure items arrays don't contain undefined values
 		const cleanFilters = dynamicFilters
 			.filter(f => f != null && f.items != null)
@@ -226,8 +336,11 @@ export const generateFilterOptions = (
 				items: l.items.filter(item => item != null && item.name != null)
 			}));
 
+		// Add dynamic custom field filters to the main filters array
+		const allCleanFilters = [...cleanFilters, ...dynamicCustomFilters];
+
 		return {
-			filters: cleanFilters,
+			filters: allCleanFilters,
 			locations: cleanLocations,
 			pointsOfInterest: pointsOfInterest
 		};
@@ -271,13 +384,16 @@ export const applyFilters = async (
 			results = results.filter(listing => {
 				return Object.entries(filterItems).some(([filterName, filterValue]) => {
 					const listingFieldName = invertedSpecialFeaturesMap[filterName];
-					return filterValue && listing.fields[listingFieldName] == 1;
+					const value = getFieldValue(listing, listingFieldName);
+					// Support both numeric (1/0) and string ("true"/"false") boolean values
+					return filterValue && (value == 1 || value === 1 || value === '1' || value === 'true' || value === true);
 				});
 			});
 		} else if (Object.keys(filterItems).length > 0) {
-			results = results.filter(listing =>
-				Object.prototype.hasOwnProperty.call(filterItems, listing.fields[formattedField])
-			);
+			results = results.filter(listing => {
+				const value = getFieldValue(listing, formattedField);
+				return Object.prototype.hasOwnProperty.call(filterItems, value);
+			});
 		}
 	}
 	if (query) {