@abcagency/hc-ui-components 1.3.26 → 1.3.28

package/src/components/HireControlMap.js

@@ -14,6 +14,7 @@ import { getMapConfig } from '~/services/configService';
 import { setClientAuthKey } from '~/clientToken.js';
 
 import '../styles/index.css';
+import { ThemeProvider } from '~/contexts/themeContext';
 
 const libraries = ['places'];
 
@@ -72,62 +73,64 @@ const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, li
 
 	return (
 		<TrackEventProvider trackEvent={trackEvent}>
-			<MapListProvider
-				siteConfig={siteConfig}
-				resetFilters={resetFilters}
-				avigateToDetails={navigateToDetails}
-				navigateToEasyApply={navigateToEasyApply}
-				Link={Link}
-				linkFormat={linkFormat}
-				listings={listings}
-				setFiltersUrl={setFiltersUrl}
-			>
-				<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-h-screen hc-min-h-[30rem] hc-divide-x hc-divide-uiAccent/20'
+			<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}
+					avigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					listings={listings}
+					setFiltersUrl={setFiltersUrl}
+				>
+					<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.Item className='hc-bg-gray-100'>
-								<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
-							</Grid.Item>
-							<MapList
-								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
-									}
-								}}
-								showMap={siteConfig.showMap}
-								fieldsShown={siteConfig.fieldsShown}
-								specialFeatures={siteConfig.specialFeatures}
-								fieldNames={siteConfig.fieldNames}
-								placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-							/>
-						</Grid>
-					</PlacesProvider>
-				</MapProvider>
-			</MapListProvider>
+							<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-h-screen hc-min-h-[30rem] 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
+									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
+										}
+									}}
+									showMap={siteConfig.showMap}
+									fieldsShown={siteConfig.fieldsShown}
+									specialFeatures={siteConfig.specialFeatures}
+									fieldNames={siteConfig.fieldNames}
+									placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+								/>
+							</Grid>
+						</PlacesProvider>
+					</MapProvider>
+				</MapListProvider>
+			</ThemeProvider>
 		</TrackEventProvider>
 	);
 };

package/src/components/containers/jobListing/listing-details-container.js

@@ -1,40 +1,40 @@
-import React from 'react';
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-import ListingDetails from '~/components/modules/jobListing/listing-details';
-
-const ListingDetailsContainer = ({ item, recruiter }) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { travelTime } = useMap();
-	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
-
-	const {
-	  useDetailsPostMessage,
-	  useApplyDialog,
-	  internalApplyLink,
-	  companyName,
-	  jobsDomain
-	} = siteConfig;
-
-	return (
-	  <ListingDetails
-			item={item}
-			recruiter={recruiter}
-			travelTime={travelTime}
-			useDetailsPostMessage={useDetailsPostMessage}
-			navigateToDetails={navigateToDetails}
-			navigateToEasyApply={navigateToEasyApply}
-			Link={Link}
-			linkFormat={linkFormat}
-			useApplyDialog={useApplyDialog}
-			internalApplyLink={internalApplyLink}
-			companyName={companyName}
-			jobsDomain={jobsDomain}
-			trackEvent={trackEvent}
-			eventTypes={eventTypes}
-	  />
-	);
-};
-
-export default ListingDetailsContainer;
+import React from 'react';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import ListingDetails from '~/components/modules/jobListing/listing-details';
+
+const ListingDetailsContainer = ({ item, recruiter }) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { travelTime } = useMap();
+	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
+
+	const {
+	  useDetailsPostMessage,
+	  useApplyDialog,
+	  internalApplyLink,
+	  companyName,
+	  jobsDomain
+	} = siteConfig;
+
+	return (
+	  <ListingDetails
+			item={item}
+			recruiter={recruiter}
+			travelTime={travelTime}
+			useDetailsPostMessage={useDetailsPostMessage}
+			navigateToDetails={navigateToDetails}
+			navigateToEasyApply={navigateToEasyApply}
+			Link={Link}
+			linkFormat={linkFormat}
+			useApplyDialog={useApplyDialog}
+			internalApplyLink={internalApplyLink}
+			companyName={companyName}
+			jobsDomain={jobsDomain}
+			trackEvent={trackEvent}
+			eventTypes={eventTypes}
+	  />
+	);
+};
+
+export default ListingDetailsContainer;

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

@@ -1,43 +1,43 @@
-import React, { useState } from 'react';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-import ListItem from '~/components/modules/list/list-item/list-item';
-
-const ListItemContainer = ({
-	isActive,
-	showMap,
-	item,
-	itemRefs,
-	fieldsShown,
-	specialFeatures,
-	className,
-	bodyClassName,
-	onItemSelected,
-	...props
-}) => {
-	const { siteConfig, favorites, handleSettingFavorites, setMobileTab } = useMapList();
-	const { trackEvent, eventTypes } = useTrackEvent();
-
-	return (
-		<ListItem
-			isActive={isActive}
-			showMap={showMap}
-			item={item}
-			itemRefs={itemRefs}
-			fieldsShown={fieldsShown}
-			specialFeatures={specialFeatures}
-			className={isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85"}
-			bodyClassName={bodyClassName}
-			onItemSelected={onItemSelected}
-			setMobileTab={setMobileTab}
-			siteConfig={siteConfig}
-			trackEvent={trackEvent}
-			eventTypes={eventTypes}
-			favorites={favorites}
-			handleSettingFavorites={handleSettingFavorites}
-			{...props}
-		/>
-	);
-};
-
-export default ListItemContainer;
+import React, { useState } from 'react';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import ListItem from '~/components/modules/list/list-item/list-item';
+
+const ListItemContainer = ({
+	isActive,
+	showMap,
+	item,
+	itemRefs,
+	fieldsShown,
+	specialFeatures,
+	className,
+	bodyClassName,
+	onItemSelected,
+	...props
+}) => {
+	const { siteConfig, favorites, handleSettingFavorites, setMobileTab } = useMapList();
+	const { trackEvent, eventTypes } = useTrackEvent();
+
+	return (
+		<ListItem
+			isActive={isActive}
+			showMap={showMap}
+			item={item}
+			itemRefs={itemRefs}
+			fieldsShown={fieldsShown}
+			specialFeatures={specialFeatures}
+			className={isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85"}
+			bodyClassName={bodyClassName}
+			onItemSelected={onItemSelected}
+			setMobileTab={setMobileTab}
+			siteConfig={siteConfig}
+			trackEvent={trackEvent}
+			eventTypes={eventTypes}
+			favorites={favorites}
+			handleSettingFavorites={handleSettingFavorites}
+			{...props}
+		/>
+	);
+};
+
+export default ListItemContainer;

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import React, { useEffect, useRef } from 'react';
 
 import MapMarker from "~/components/containers/maps/map-marker-container";
@@ -11,17 +10,18 @@ import { useMapList } from "~/contexts/mapListContext";
 import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
 
 import Map from "~/components/modules/maps/map";
+import { MarkerClustererF } from "@react-google-maps/api";
+import { clusterOptions } from "~/util/mapUtil";
 
 const MapContainer = ({
 	markerConfigs,
 	infoWindowClasses,
-	clusterGridSize = 60
+	clusterGridSize = 10
 }) => {
 	const {
 		location,
 		zoom,
 		center,
-		commuteLocation,
 		selectLocationEntity,
 		setLocation,
 		mapInteracted,
@@ -151,33 +151,6 @@ const MapContainer = ({
 		strokeColor: markerConfigs.strokeColor
 	});
 
-	const mapMarkers = mapItems.map(item => (
-		<MapMarker
-			key={item.id}
-			item={item}
-			selectedLocation={location}
-			markerRefs={markerRefs}
-			infoWindowClasses={infoWindowClasses}
-			setSelectedLocation={setLocation}
-			markerClickHandler={markerClickHandler}
-			markerIcon={markerIcon(markerConfigs)}
-			markerIconSelected={markerIconSelected(markerConfigs)}
-			setMapInteracted={setMapInteracted}
-		/>
-	));
-
-	const placeMarkers = poiMarkers.markers.map((marker, index) => (
-		<PlaceMarker
-			key={`marker-${marker.title}-${index}`}
-			marker={marker}
-			index={index}
-			selectedPlaceMarker={selectedPlaceMarker}
-			placesWindow={placesWindow}
-			setPlacesWindow={setPlacesWindow}
-			setSelectedPlaceMarker={setSelectedPlaceMarker}
-		/>
-	));
-
 	return (
 		<Map
 			zoom={zoom}
@@ -185,10 +158,6 @@ const MapContainer = ({
 			mapContainerRef={mapContainerRef}
 			onLoad={onLoad}
 			onIdle={onIdle}
-			clusterGridSize={clusterGridSize}
-			markerConfigs={markerConfigs}
-			mapMarkers={mapMarkers}
-			placeMarkers={placeMarkers}
 			mapInteracted={mapInteracted}
 			pinIconUrl={pinIconUrl}
 			setMapInteracted={setMapInteracted}
@@ -197,7 +166,40 @@ const MapContainer = ({
 			setQuery={setQuery}
 			filteredListingsLength={filteredListings.length}
 			setSelectedFilters={setSelectedFilters}
-		/>
+		>
+			<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
+				{clusterer => (
+					<>
+						{mapItems.map(item => (
+							<MapMarker
+								key={item.id}
+								item={item}
+								selectedLocation={location}
+								markerRefs={markerRefs}
+								infoWindowClasses={infoWindowClasses}
+								setSelectedLocation={setLocation}
+								markerClickHandler={markerClickHandler}
+								clusterer={clusterer}
+								markerIcon={markerIcon(markerConfigs)}
+								markerIconSelected={markerIconSelected(markerConfigs)}
+								setMapInteracted={setMapInteracted}
+							/>
+						))}
+						{poiMarkers && poiMarkers.markers.map((marker, index) => (
+							<PlaceMarker
+								key={`marker-${marker.title}-${index}`}
+								marker={marker}
+								index={index}
+								selectedPlaceMarker={selectedPlaceMarker}
+								placesWindow={placesWindow}
+								setPlacesWindow={setPlacesWindow}
+								setSelectedPlaceMarker={setSelectedPlaceMarker}
+							  />
+						))}
+					</>
+				)}
+			</MarkerClustererF>
+		</Map>
 	);
 };
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import List from '~/components/containers/list/item-list-container';
 import Map from '~/components/containers/maps/map-container';
-import Filter from '~/components/modules/filter';
+import Filter from '~/components/containers/filter/filter-container';
 import MapList from '~/components/modules/maps/map-list';
 
 const MapListContainer = ({

package/src/components/modules/filter/search.js

@@ -52,6 +52,7 @@ const Search = ({
 				/>
 
 				<button
+				   id="SearchButton"
 					ref={buttonRef}
 					type="button"
 					className="hidden hc-invisible"

package/src/components/modules/jobListing/listing-details.js

@@ -1,109 +1,109 @@
-import React from 'react';
-import RecruiterHeadshot from '~/components/modules/list/item-expand-card/recruiter-headshot';
-import RecruiterDetails from '~/components/modules/list/item-expand-card/recruiter-details';
-import RecruiterContactNav from '~/components/modules/list/item-expand-card/recruiter-contact-nav';
-import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
-import CommutePill from '~/components/modules/buttons/commute-pill';
-
-const ListingDetails = ({
-	item,
-	recruiter,
-	travelTime,
-	useDetailsPostMessage,
-	navigateToDetails,
-	navigateToEasyApply,
-	Link,
-	linkFormat,
-	useApplyDialog,
-	internalApplyLink,
-	companyName,
-	jobsDomain,
-	trackEvent,
-	eventTypes
-}) => {
-	if (!item) {
-		return null;
-	}
-
-	let matchingRecruiter = recruiter;
-	console.log(matchingRecruiter);
-	return (
-		<div className="hc-w-full">
-			<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
-				{matchingRecruiter?.headshot && (
-					<RecruiterHeadshot
-						image={`${matchingRecruiter.headshot.includes("http") ? '' :'https:'}${matchingRecruiter.headshot}`}
-						alt={matchingRecruiter?.firstName}
-						className="hc-bg-gray-300"
-					/>
-				)}
-				{matchingRecruiter && (
-					<RecruiterDetails
-						contactNav={
-							<RecruiterContactNav>
-								{matchingRecruiter?.mobilePhone && (
-									<RecruiterContactNav.Button
-										href={`tel:${matchingRecruiter.mobilePhone}`}
-										title={`Call ${matchingRecruiter.mobilePhone}`}
-										icon="fluent:phone-32-regular"
-									/>
-								)}
-								{matchingRecruiter?.email && (
-									<RecruiterContactNav.Button
-										href={`mailto:${matchingRecruiter.email}`}
-										title={`email ${matchingRecruiter.email}`}
-										icon="bi:envelope-at"
-									/>
-								)}
-								{matchingRecruiter?.linkedIn && (
-									<RecruiterContactNav.Button
-										href={matchingRecruiter.linkedIn}
-										title="LinkedIn"
-										icon="ant-design:linkedin-outlined"
-									/>
-								)}
-							</RecruiterContactNav>
-						}
-					>
-						{matchingRecruiter?.firstName || matchingRecruiter?.lastName && (
-							<RecruiterDetails.Title>
-								{`${matchingRecruiter?.firstName} ${matchingRecruiter?.lastName}`}
-							</RecruiterDetails.Title>
-						)}
-						{item.details?.recruiter?.title && (
-							<RecruiterDetails.Text>
-								{item.details.recruiter.title}
-							</RecruiterDetails.Text>
-						)}
-					</RecruiterDetails>
-				)}
-				<ApplyButtonGroup
-					useDetailsPostMessage={useDetailsPostMessage}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					includeDialog={useApplyDialog}
-					internalApplyLink={internalApplyLink}
-					companyName={companyName}
-					applyUrl={item?.applyUrl}
-					itemId={item.id}
-					item={item}
-					trackEvent={trackEvent}
-					eventTypes={eventTypes}
-					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${jobsDomain}${item.id}`}
-					className={`
-            lg:hc-w-auto hc-order-first lg:hc-order-last md:hc-self-center hc-py-2 lg:hc-p-0 lg:hc-mb-0 hc-border-b lg:hc-border-none hc-border-uiAccent/20
-            ${matchingRecruiter ? "lg:hc-flex-col lg:hc-w-auto" : "lg:hc-flex-row"}
-          `}
-				/>
-			</div>
-			<div className="hc-w-full">
-				<CommutePill travelTime={travelTime} className="hc-ml-0" />
-			</div>
-		</div>
-	);
-};
-
-export default ListingDetails;
-
+import React from 'react';
+import RecruiterHeadshot from '~/components/modules/list/item-expand-card/recruiter-headshot';
+import RecruiterDetails from '~/components/modules/list/item-expand-card/recruiter-details';
+import RecruiterContactNav from '~/components/modules/list/item-expand-card/recruiter-contact-nav';
+import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
+import CommutePill from '~/components/modules/buttons/commute-pill';
+
+const ListingDetails = ({
+	item,
+	recruiter,
+	travelTime,
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	useApplyDialog,
+	internalApplyLink,
+	companyName,
+	jobsDomain,
+	trackEvent,
+	eventTypes,
+}) => {
+	if (!item) {
+		return null;
+	}
+
+	let matchingRecruiter = recruiter;
+	console.log(matchingRecruiter);
+	return (
+		<div className="hc-w-full">
+			<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
+				{/* {matchingRecruiter?.headshot && (
+					<RecruiterHeadshot
+						image={`${matchingRecruiter.headshot.includes("http") ? '' :'https:'}${matchingRecruiter.headshot}`}
+						alt={matchingRecruiter?.firstName}
+						className="hc-bg-gray-300"
+					/>
+				)}
+				{matchingRecruiter && (
+					<RecruiterDetails
+						contactNav={
+							<RecruiterContactNav>
+								{matchingRecruiter?.mobilePhone && (
+									<RecruiterContactNav.Button
+										href={`tel:${matchingRecruiter.mobilePhone}`}
+										title={`Call ${matchingRecruiter.mobilePhone}`}
+										icon="fluent:phone-32-regular"
+									/>
+								)}
+								{matchingRecruiter?.email && (
+									<RecruiterContactNav.Button
+										href={`mailto:${matchingRecruiter.email}`}
+										title={`email ${matchingRecruiter.email}`}
+										icon="bi:envelope-at"
+									/>
+								)}
+								{matchingRecruiter?.linkedIn && (
+									<RecruiterContactNav.Button
+										href={matchingRecruiter.linkedIn}
+										title="LinkedIn"
+										icon="ant-design:linkedin-outlined"
+									/>
+								)}
+							</RecruiterContactNav>
+						}
+					>
+						{matchingRecruiter?.firstName || matchingRecruiter?.lastName && (
+							<RecruiterDetails.Title>
+								{`${matchingRecruiter?.firstName} ${matchingRecruiter?.lastName}`}
+							</RecruiterDetails.Title>
+						)}
+						{item.details?.recruiter?.title && (
+							<RecruiterDetails.Text>
+								{item.details.recruiter.title}
+							</RecruiterDetails.Text>
+						)}
+					</RecruiterDetails>
+				)} */}
+				<ApplyButtonGroup
+					useDetailsPostMessage={useDetailsPostMessage}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					includeDialog={useApplyDialog}
+					internalApplyLink={internalApplyLink}
+					companyName={companyName}
+					applyUrl={item?.applyUrl}
+					itemId={item.id}
+					item={item}
+					trackEvent={trackEvent}
+					eventTypes={eventTypes}
+					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${jobsDomain}${item.id}`}
+					className={`
+            lg:hc-w-auto hc-order-first lg:hc-order-last md:hc-self-center hc-py-2 lg:hc-p-0 lg:hc-mb-0 hc-border-b lg:hc-border-none hc-border-uiAccent/20
+            ${matchingRecruiter ? "lg:hc-flex-col lg:hc-w-auto" : "lg:hc-flex-row"}
+          `}
+				/>
+			</div>
+			<div className="hc-w-full">
+				<CommutePill travelTime={travelTime} className="hc-ml-0" />
+			</div>
+		</div>
+	);
+};
+
+export default ListingDetails;
+