@abcagency/hc-ui-components 1.3.23 → 1.3.24

package/src/components/modules/maps/tabs.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+
+import Button from '~/components/modules/buttons/default';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const MapTabs = ({
+	map,
+	list,
+	filter,
+	className,
+	showMap
+}) => {
+	const tabButtonClasses =
+		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
+	const { mobileTab, setMobileTab } = useMapList();
+	return (
+		<div
+			className={`
+				hc-relative hc-overflow-hidden
+				${className ?? ""}
+			`}
+		>
+			<Tabs.Root
+				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
+				//defaultValue="listTab"
+				value={mobileTab}
+			>
+				<Tabs.List
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
+					aria-label="Review positions"
+				>
+					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
+								List
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+					{showMap && (
+						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
+							<Button.Btn
+								variant="outline"
+								isBlock
+								className={tabButtonClasses}
+							>
+								<Button.Body className="hc-justify-center">
+									<Button.Icon icon="mdi:map" size="hc-size-5" />
+									Map
+								</Button.Body>
+							</Button.Btn>
+						</Tabs.Trigger>
+					)}
+					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
+								Filter
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
+					{list}
+				</Tabs.Content>
+				{showMap && (
+					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
+						{map}
+					</Tabs.Content>
+				)}
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
+					{filter}
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+	);
+};
+
+export default MapTabs;

package/src/constants/eventTypes.js

@@ -0,0 +1,13 @@
+export const eventTypes = {
+	FILTER_APPLIED: "filter_applied",
+	MAP_MARKER_CLICKED: "map_marker_clicked",
+	JOB_LISTING_SELECTED: "job_listing_selected",
+	APPLY_NOW_CLICKED: "apply_now_clicked",
+	VIEW_DETAILS_CLICKED: "view_details_clicked",
+	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
+	POI_APPLIED: "point_of_interest_applied",
+	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
+	FAVORITE_SELECTED: "favorite_job_selected",
+	LIST_SORTED: "jobs_list_sorted",
+	FILTERS_RESET: "filter_reset_button_clicked"
+};

package/src/constants/placeTypes.js

@@ -0,0 +1,8 @@
+export const placeTypes = {
+	FOOD: "food",
+	STORE: "shopping",
+	TOURIST_ATTRACTION: "attractions",
+	TRANSIT_STATION: "transit",
+	SCHOOL: "schools",
+	PLACE_OF_WORSHIP: "worship"
+};

package/src/contexts/mapContext.tsx

@@ -0,0 +1,129 @@
+import React, { createContext, useState, useContext, useEffect, useRef, ReactNode } from 'react';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+import { Listing } from '~/types/Listings';
+import { LatLng } from '~/types/LatLng';
+interface IMapContext {
+  selectedListItem: Listing | null;
+  setSelectedListItem: (item: Listing | null) => void;
+  location: any | null;
+  setLocation: (location: LatLng | null) => void;
+  center: LatLng;
+  setCenter: (center: LatLng) => void;
+  zoom: number;
+  setZoom: (zoom: number) => void;
+  selectedPlaces: string[];
+  setSelectedPlaces: (places: string[]) => void;
+  mapInteracted: boolean;
+  setMapInteracted: (interacted: boolean) => void;
+  userSetZoom: React.MutableRefObject<boolean>;
+  firstLoadListItem: any;
+  selectItem: (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => void;
+  filterReset: () => void;
+  selectLocationEntity: (location: LatLng) => void;
+}
+
+const MapContext = createContext<IMapContext | undefined>(undefined);
+
+export const useMap = () => {
+	const context = useContext(MapContext);
+	if (!context) {
+		throw new Error("useMap must be used within a MapProvider");
+	}
+	return context;
+};
+
+interface MapProviderProps {
+  children: ReactNode;
+  resetFilters: boolean;
+}
+
+export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters }) => {
+	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", 10) || 10);
+	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
+	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
+	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
+	const userSetZoom = useRef<boolean>(true);
+
+	useEffect(() => {
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
+
+	useEffect(() => {
+		localStorage.setItem("zoom", zoom.toString());
+	}, [zoom]);
+
+	useEffect(() => {
+		if (location == null) {
+			localStorage.removeItem("location");
+		} else {
+			setStorageObject("location", location);
+		}
+	}, [location]);
+
+	useEffect(() => {
+		setStorageObject("center", center);
+	}, [center]);
+
+	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
+		setSelectedListItem(item);
+		if (mapInteracted === false && itemLocation != null) {
+			setLocation(itemLocation);
+		}
+		if (mapInteracted === false || itemLocation != null) {
+			setLocation(itemLocation);
+			setCenter(center);
+		}
+		if (mapInteracted === false) {
+			setZoom(zoom);
+		}
+	};
+
+	const filterReset = () => {
+		setSelectedPlaces([]);
+		setSelectedListItem(null);
+		setLocation(null);
+		setZoom(8);
+		setMapInteracted(false);
+	};
+
+	useEffect(() => {
+		if (resetFilters === true) {
+			filterReset();
+		}
+	}, [resetFilters]);
+
+	const selectLocationEntity = (location: LatLng) => {
+		localStorage.removeItem("selectedListItem");
+		setTimeout(() => setLocation(location), 200);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<MapContext.Provider
+			value={{
+				selectedListItem,
+				setSelectedListItem,
+				location,
+				center,
+				setCenter,
+				zoom,
+				setZoom,
+				selectItem,
+				setSelectedPlaces,
+				selectedPlaces,
+				selectLocationEntity,
+				setLocation,
+				setMapInteracted,
+				mapInteracted,
+				userSetZoom,
+				firstLoadListItem,
+				filterReset
+			}}
+		>
+			{children}
+		</MapContext.Provider>
+	);
+};

package/src/contexts/mapListContext.tsx

@@ -0,0 +1,311 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+
+import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~/util/filterUtil';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+import { updateURLWithFilters, filtersFromURL } from '~/util/urlFilterUtil';
+
+import { getListingEntities } from "~/services/listingEntityService";
+import fetchListings from '~/services/listingAggregatorService';
+
+import { Listing } from '~/types/Listings';
+import { ListingEntity } from '~/types/ListingEntity';
+import { Recruiter } from '~/types/Recruiter';
+import { MapConfig, MapConfig as SiteConfig } from '~/types/config/MapConfig';
+
+interface MapListContextProps {
+  loading: boolean;
+  allListings: Listing[];
+  filteredListings: Listing[];
+  mapItems: any;
+  query: string | null;
+  setNewFilteredListings: (filteredListings: Listing[]) => void;
+  setQuery: (query: string | null) => void;
+  listingEntities: Record<number, ListingEntity> | null;
+  selectedFilters: Record<string, any>;
+  setSelectedFilters: (filters: Record<string, any>) => void;
+  filterOptions: any;
+  recruiters: Record<number, Recruiter>;
+  handleFilterListingsByLocation: (selectedLocation: any) => void;
+  filterDialogIsOpen: boolean;
+  setFilterDialogIsOpen: (isOpen: boolean) => void;
+  setMobileTab: (tab: string) => void;
+  mobileTab: string;
+  siteConfig: SiteConfig;
+  favorites: number[];
+  handleSettingFavorites: (favorites: number[] | null) => void;
+  setFilterByFavorites: (filter: boolean) => void;
+  filterByFavorites: boolean;
+  commuteLocation: any | null;
+  setCommuteLocation: (location: any | null) => void;
+  navigateToDetails: (id: number) => void;
+  navigateToEasyApply: (id: number) => void;
+  Link: React.ComponentType<any>;
+  linkFormat: string;
+  sortSetting: { field: string; type: string };
+  setSortSetting: (setting: { field: string; type: string }) => void;
+  trackEvent: (event: string) => void;
+}
+
+const MapListContext = createContext<MapListContextProps | undefined>(undefined);
+
+export const useMapList = () => {
+	const context = useContext(MapListContext);
+	if (!context) {
+		throw new Error('useMapList must be used within a MapListProvider');
+	}
+	return context;
+};
+
+const getQuery = (): string | null => {
+	let query: string | null = null;
+	if (typeof window !== 'undefined') {
+		query = localStorage.getItem('query');
+	}
+	return query;
+};
+
+interface MapListProviderProps {
+  children: ReactNode;
+  siteConfig: MapConfig;
+  resetFilters: boolean;
+  navigateToDetails: (id: number) => void;
+  navigateToEasyApply: (id: number) => void;
+  Link: React.ComponentType<any>;
+  linkFormat: string;
+  trackEvent: (event: string) => void;
+  listings?: Listing[];
+  setFiltersUrl?:boolean;
+}
+
+export const MapListProvider: React.FC<MapListProviderProps> = ({
+	children,
+	siteConfig,
+	resetFilters,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	trackEvent,
+	listings = [],
+	setFiltersUrl
+}) => {
+	const firstLoadFilters = () =>{
+		let urlFilters = filtersFromURL(window.location)?.filters;
+		return  (setFiltersUrl === true && urlFilters && Object.keys(urlFilters).length > 0) ? urlFilters  : getStorageObject('selectedFilters', {}) || {}
+	}
+	const [allListings, setAllListings] = useState<Listing[]>(getStorageObject("listings", listings) || []);
+	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
+	const [loading, setLoading] = useState<boolean>(false);
+	const [mapItems, setMapItems] = useState<any>(getStorageObject('mapItems', []) || []);
+	const [query, setQuery] = useState<string | null>(() => resetFilters ? null : getQuery());
+	const [sortSetting, setSortSetting] = useState<{ field: string; type: string }>(getStorageObject('sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' });
+	const [listingEntities, setListingEntities] = useState<Record<number, ListingEntity> | null>(getStorageObject("listingEntities", null));
+	const [firstLoad, setFirstLoad] = useState<boolean>(true);
+	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject('commuteLocation'));
+	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : firstLoadFilters());
+	const [filterOptions, setFilterOptions] = useState<any>();
+	const [recruiters, setRecruiters] = useState<Record<number, Recruiter>>(getStorageObject("recruiters", {}) || {});
+	const [filterDialogIsOpen, setFilterDialogIsOpen] = useState<boolean>(false);
+	const [mobileTab, setMobileTab] = useState<string>("listTab");
+	const [favorites, setFavorites] = useState<number[]>([]);
+	const [filterByFavorites, setFilterByFavorites] = useState<boolean>(false);
+
+	const setNewFilteredListings = (filteredListings: Listing[]) => {
+		setFilteredListings(filteredListings);
+	};
+
+
+
+	useEffect(() => {
+		if (!sortSetting) return;
+		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
+		setNewFilteredListings(filteredListings);
+	}, [sortSetting]);
+
+	useEffect(() => {
+		const loadedFavorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+		setFavorites(loadedFavorites);
+	}, []);
+
+	useEffect(() => {
+		setStorageObject("commuteLocation", commuteLocation);
+	}, [commuteLocation]);
+
+	useEffect(() => {
+		if (!commuteLocation) return;
+
+		async function fetchEntities() {
+			const distinctEntityIds = [
+				...new Set(allListings.map(listing => listing.entityId ?? -1))
+			];
+			try {
+				const fetchedEntities = await getListingEntities(
+					distinctEntityIds,
+					`${commuteLocation.lat}, ${commuteLocation.lng}`
+				);
+				setListingEntities(fetchedEntities);
+				const newFilteredListings: Listing[] = [...filteredListings] ?? [];
+				for (let i = 0; i < allListings.length; i++) {
+					const listing = newFilteredListings[i];
+					if (
+						listing &&
+						listing.fields &&
+						listing.entityId !== undefined &&
+						listing.entityId !== -1
+					) {
+						const entityId = listing.entityId;
+						const travelTime = fetchedEntities[entityId]?.travelTime;
+
+						if (travelTime !== undefined && listing.fields) {
+							listing.fields.travelTime = travelTime;
+						}
+					}
+				}
+			} catch (error) {
+				console.error("Failed to fetch listing entities:", error);
+			}
+		}
+
+		fetchEntities();
+	}, [commuteLocation, allListings, siteConfig.companyId]);
+
+	useEffect(() => {
+		const handleFetchListings = async () => {
+			if (!getStorageObject('listings') ?? [].length) {
+				setLoading(true);
+			}
+
+			try {
+				const {
+					listingsResult,
+					fetchedRecruiters,
+					fetchedEntities,
+					distinctItems
+				} = await fetchListings(query ?? '', siteConfig, commuteLocation);
+				setAllListings(listingsResult);
+				setRecruiters(fetchedRecruiters);
+				setListingEntities(fetchedEntities);
+				setMapItems(distinctItems);
+				setStorageObject("mapItems", distinctItems);
+				setStorageObject("listingEntities", fetchedEntities);
+				setStorageObject("recruiters", fetchedRecruiters);
+				setStorageObject("listings", listingsResult);
+			} catch (error) {
+				console.log(error);
+			}
+			setLoading(false);
+		};
+		handleFetchListings();
+	}, [query, siteConfig]);
+
+	useEffect(() => {
+		const processListings = () => {
+			let filteredListings: Listing[];
+			let tempSelectedFilters = selectedFilters;
+			let tempQuery = query;
+
+			const { mapItems, filteredListings: tempFilteredListings } = applyFilters(
+				allListings,
+				tempSelectedFilters,
+				tempQuery,
+				listingEntities,
+				favorites,
+				siteConfig
+			);
+			filteredListings = tempFilteredListings;
+
+			if (filterByFavorites) {
+				filteredListings = filteredListings.filter((x: Listing) => favorites.includes(x.id));
+			}
+			setNewFilteredListings(filteredListings);
+			if (firstLoad && tempSelectedFilters) {
+				// Update URL with filters if needed
+			} else if (Object.keys(tempSelectedFilters).length === 0 && !firstLoad) {
+				localStorage.removeItem('selectedFilters');
+			} else if (!firstLoad) {
+				setStorageObject('selectedFilters', tempSelectedFilters);
+			}
+			if(setFiltersUrl === true)
+			{
+				updateURLWithFilters(tempSelectedFilters, window.location, tempQuery);
+			}
+			tempQuery != null ? localStorage.setItem('query', tempQuery) : localStorage.removeItem('query');
+			setMapItems(mapItems);
+
+			if (tempSelectedFilters) {
+				const keys = Object.keys(tempSelectedFilters);
+				const lastKey = keys[keys.length - 1];
+				const options = generateFilterOptions(
+					firstLoad ? allListings : filteredListings,
+					allListings,
+					siteConfig,
+					filterOptions,
+					lastKey,
+					favorites
+				);
+				if (options) {
+					setFilterOptions(options);
+					if (firstLoad) setFirstLoad(false);
+				}
+			}
+		};
+
+		processListings();
+	}, [selectedFilters, query, listingEntities, filterByFavorites, favorites]);
+
+	const handleFilterListingsByLocation = (selectedLocation: any) => {
+		const { filteredListings } = filterListingsByLocation(
+			allListings,
+			selectedLocation,
+			listingEntities
+		);
+		setNewFilteredListings(filteredListings);
+	};
+
+	const handleSettingFavorites = (newFavorites: number[] | null) => {
+		if (newFavorites == null) {
+			localStorage.removeItem('favorites');
+		} else {
+			setFavorites(newFavorites);
+			localStorage.setItem('favorites', JSON.stringify(newFavorites));
+		}
+	};
+
+	return (
+		<MapListContext.Provider value={{
+			loading,
+			allListings,
+			filteredListings,
+			mapItems,
+			query,
+			setNewFilteredListings,
+			setQuery,
+			listingEntities,
+			selectedFilters,
+			setSelectedFilters,
+			filterOptions,
+			recruiters,
+			handleFilterListingsByLocation,
+			filterDialogIsOpen,
+			setFilterDialogIsOpen,
+			setMobileTab,
+			mobileTab,
+			siteConfig,
+			favorites,
+			handleSettingFavorites,
+			setFilterByFavorites,
+			filterByFavorites,
+			commuteLocation,
+			setCommuteLocation,
+			navigateToDetails,
+			navigateToEasyApply,
+			Link,
+			linkFormat,
+			sortSetting,
+			setSortSetting,
+			trackEvent
+		}}>
+			{children}
+		</MapListContext.Provider>
+	);
+};

package/src/contexts/placesContext.js

@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { markerIconProps } from '~/util/mapIconUtil';
+
+import { useMap } from '~/contexts/mapContext';
+
+import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
+
+const PlacesContext = createContext();
+
+export const usePlaces = () => useContext(PlacesContext);
+
+export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
+	const { selectedPlaces, zoom, center } = useMap();
+	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
+	const [currentCenter, setCurrentCenter] = useState(center);
+	const [currentZoom, setCurrentZoom] = useState(zoom);
+	const [placesWindow, setPlacesWindow] = useState(false);
+	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
+
+	const getRadiusForZoom = () => {
+		if (currentZoom >= 18) return 1000;
+		if (currentZoom <= 10) return 0;
+
+		let tempZoom = Math.pow(19 - currentZoom, 4.85);
+		let radius = tempZoom;
+		let minRadius = 1500;
+		let maxRadius = 800000;
+
+		if (radius < minRadius) radius = minRadius;
+		else if (radius > maxRadius) radius = maxRadius;
+
+		return radius;
+	};
+
+	useEffect(() => {
+		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
+			setPoiMarkers({ markers: [], icon: null });
+			return;
+		}
+		const fetchPlaces = async () => {
+			let poiTypes = [];
+			const selectedPOICategories = selectedPlaces;
+			selectedPOICategories.forEach(pointOfInterest => {
+				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
+			});
+
+			const radius = getRadiusForZoom();
+			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
+
+			try {
+				const response = await searchNearbyPlaces(poiTypes, location, radius);
+				const newMarkers = response.places.map(place => {
+					const getParentCategory = types => {
+						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
+							return acc.concat(placeMappings[category]);
+						}, []);
+
+						for (const type of types) {
+							if (!selectedTypes.includes(type)) continue;
+							for (const category in placeMappings) {
+								if (placeMappings[category].includes(type)) {
+									return category;
+								}
+							}
+
+						}
+					};
+
+					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
+
+					return {
+						position: { lat: place.location.latitude, lng: place.location.longitude },
+						title: place.displayName.text,
+						icon: icon
+					};
+				});
+				setPoiMarkers({ markers: newMarkers, icon: null });
+			} catch (error) {
+				console.error('Failed to fetch places:', error);
+			}
+		};
+
+		fetchPlaces();
+	}, [selectedPlaces, currentZoom, currentCenter]);
+
+	return (
+		<PlacesContext.Provider value={{
+			poiMarkers,
+			setCurrentCenter,
+			currentCenter,
+			setCurrentZoom,
+			currentZoom,
+			placesWindow,
+			setPlacesWindow,
+			selectedPlaceMarker,
+			setSelectedPlaceMarker
+		}}>
+			{children}
+		</PlacesContext.Provider>
+	);
+};

package/src/contexts/trackEventContext.js

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+import { eventTypes } from '~/constants/eventTypes';
+
+const TrackEventContext = createContext();
+
+export const useTrackEvent = () => useContext(TrackEventContext);
+
+export const TrackEventProvider = ({ children, trackEvent }) => {
+	return (
+		<TrackEventContext.Provider value={{ trackEvent, eventTypes }}>
+			{children}
+		</TrackEventContext.Provider>
+	);
+};

package/src/enums/SectionType.ts

@@ -0,0 +1,9 @@
+export enum SectionType {
+	Default = -1,
+	Company = 1,
+	Category = 2,
+	CategoryClass = 3,
+	Entity = 4,
+	CustomVar = 5,
+	REGION = 7
+  }