@abcagency/hc-ui-components 1.3.27 → 1.3.29

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

@@ -23,7 +23,7 @@ const MapMarkerContainer = ({
 	const isSelected = item.id === selectedLocation?.id;
 	const markerRef = useRef(null);
 	const { trackEvent, eventTypes } = useTrackEvent();
-	const { handleFilterListingsByLocation } = useMapList();
+	const { resetEntityFilter } = useMapList();
 
 	useEffect(() => {
 		markerRefs.current[item.id] = markerRef.current;
@@ -57,6 +57,7 @@ const MapMarkerContainer = ({
 					onCloseClick={() => {
 						setMapInteracted(true);
 						setLocation(null);
+						resetEntityFilter();
 					}}
 					options={{ maxWidth: 400 }}
 				>
@@ -66,7 +67,6 @@ const MapMarkerContainer = ({
 						content={<InfoWindowContent
 							item={item}
 							commuteLocation={commuteLocation}
-							filterListingsByLocation={() => handleFilterListingsByLocation(selectedLocation)}
 						/>}
 					/>
 				</InfoWindow>

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;
+

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

@@ -1,130 +1,130 @@
-import React, { forwardRef, useState } from 'react';
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import FieldMapper from '~/components/modules/list/field-mapper';
-
-const ListItem = forwardRef(
-	(
-		{
-			isActive,
-			bodyClassName,
-			className,
-			item,
-			fieldsShown,
-			specialFeatures,
-			onItemSelected,
-			showMap,
-			setMobileTab,
-			handleSettingFavorites,
-			favorites,
-			includeFavorite = true,
-			siteConfig,
-			trackEvent,
-			eventTypes,
-			...props
-		},
-		ref
-	) => {
-		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
-
-		const handleClick = () => {
-			if (onItemSelected) {
-				onItemSelected(item);
-			}
-		};
-		let isFavorite = favorites.includes(item.id);
-
-		const handleFavouriteClick = (event, item) => {
-			if(!includeFavorite)return;
-			event.stopPropagation();
-			let updatedFavorites;
-			if (isFavorite) {
-				updatedFavorites = favorites.filter(fav => fav !== item.id);
-			} else {
-				updatedFavorites = [...favorites, item.id];
-			}
-			isFavorite = !isFavorite;
-			handleSettingFavorites(updatedFavorites);
-		};
-		return (
-			<button
-				ref={ref}
-				onClick={() => { handleClick(); }}
-				className={`
-          hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
-          ${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
-          ${className ?? ""}
-        `}
-				{...props}
-			>
-				<Grid
-					columns="hc-grid-flow-col hc-auto-cols-fr"
-					gap="hc-gap-2"
-					isAnimated={false}
-					className={`
-            hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
-            ${bodyClassName ?? ""}
-          `}
-				>
-					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
-						<span className="hc-sr-only">Expand row</span>
-						<Icon
-							icon="fluent-emoji-high-contrast:plus"
-							size="hc-size-2.5"
-							className={`
-                hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
-                ${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
-              `}
-						/>
-					</Grid.Item>
-					<FieldMapper
-						item={item}
-						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}
-						isFavorite={isFavorite}
-						includeFavorite={includeFavorite}
-						handleFavouriteClick={handleFavouriteClick}
-					/>
-					{includeFavorite &&
-					<Grid.Item
-						key={"favorites"}
-						className="hc-hidden md:hc-block hc-col-span-1"
-					>
-						<Icon
-							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-							size="hc-size-3.5"
-							iconClasses={isFavorite ? "hc-text-primary" : ""}
-							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
-							className="hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
-							onClick={e => {handleFavouriteClick(e, item);}}
-						/>
-					</Grid.Item>
-					}
-				</Grid>
-				{showMap && (
-					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
-						<img
-							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
-							alt={`Map of location for ${item.fields.position}`}
-							className="hc-w-full hc-h-full hc-object-cover"
-						/>
-					</div>
-				)}
-			</button>
-		);
-	}
-);
-
-ListItem.displayName = "ListItem";
-
-export default React.memo(ListItem, (prevProps, nextProps) => {
-	return (
-		prevProps.isActive === nextProps.isActive &&
-		prevProps.favorites === nextProps.favorites &&
-    prevProps.item.id === nextProps.item.id &&
-	prevProps.item.fields.travelTime === nextProps.item.fields.travelTime &&
-    prevProps.fieldsShown === nextProps.fieldsShown &&
-    prevProps.bodyClassName === nextProps.bodyClassName &&
-    prevProps.className === nextProps.className
-	);
-});
+import React, { forwardRef, useState } from 'react';
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/list/field-mapper';
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			handleSettingFavorites,
+			favorites,
+			includeFavorite = true,
+			siteConfig,
+			trackEvent,
+			eventTypes,
+			...props
+		},
+		ref
+	) => {
+		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = (event, item) => {
+			if(!includeFavorite)return;
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			handleSettingFavorites(updatedFavorites);
+		};
+		return (
+			<button
+				ref={ref}
+				onClick={() => { handleClick(); }}
+				className={`
+          hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
+          ${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
+          ${className ?? ""}
+        `}
+				{...props}
+			>
+				<Grid
+					columns="hc-grid-flow-col hc-auto-cols-fr"
+					gap="hc-gap-2"
+					isAnimated={false}
+					className={`
+            hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
+            ${bodyClassName ?? ""}
+          `}
+				>
+					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
+						<span className="hc-sr-only">Expand row</span>
+						<Icon
+							icon="fluent-emoji-high-contrast:plus"
+							size="hc-size-2.5"
+							className={`
+                hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
+                ${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
+              `}
+						/>
+					</Grid.Item>
+					<FieldMapper
+						item={item}
+						fieldsShown={fieldsShown}
+						specialFeatures={specialFeatures}
+						isFavorite={isFavorite}
+						includeFavorite={includeFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					{includeFavorite &&
+					<Grid.Item
+						key={"favorites"}
+						className="hc-hidden md:hc-block hc-col-span-1"
+					>
+						<Icon
+							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+							size="hc-size-3.5"
+							iconClasses={isFavorite ? "hc-text-primary" : ""}
+							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
+							className="hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
+							onClick={e => {handleFavouriteClick(e, item);}}
+						/>
+					</Grid.Item>
+					}
+				</Grid>
+				{showMap && (
+					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
+						<img
+							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
+							alt={`Map of location for ${item.fields.position}`}
+							className="hc-w-full hc-h-full hc-object-cover"
+						/>
+					</div>
+				)}
+			</button>
+		);
+	}
+);
+
+ListItem.displayName = "ListItem";
+
+export default React.memo(ListItem, (prevProps, nextProps) => {
+	return (
+		prevProps.isActive === nextProps.isActive &&
+		prevProps.favorites === nextProps.favorites &&
+    prevProps.item.id === nextProps.item.id &&
+	prevProps.item.fields.travelTime === nextProps.item.fields.travelTime &&
+    prevProps.fieldsShown === nextProps.fieldsShown &&
+    prevProps.bodyClassName === nextProps.bodyClassName &&
+    prevProps.className === nextProps.className
+	);
+});

package/src/components/modules/maps/info-window-content.js

@@ -1,35 +1,36 @@
-import React from 'react';
-
-const InfoWindowContent = ({
-	items,
-	fullAddress,
-	applyFilters
-}) => {
-	if (!items || items.length < 0) {
-		return null;
-	}
-	return (
-		<div className="hc-flex-auto hc-p-2">
-			<div>
-				<div>
-					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
-						{items[0].mapDetails?.entityDisplayName}
-					</h4>
-					<p>{fullAddress}</p>
-					<div className="hc-pt-2">
-						<button
-							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
-							onClick={applyFilters}
-						>
-							{items.length > 1
-								? `View All ${items.length} jobs at this location`
-								: `View job at this location`}
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default InfoWindowContent;
+import React from 'react';
+
+const InfoWindowContent = ({
+	items,
+	fullAddress,
+	applyFilters
+}) => {
+	if (!items || items.length < 0) {
+		return null;
+	}
+	let entityDisplayName = items[0].mapDetails?.entityDisplayName;
+	return (
+		<div className="hc-flex-auto hc-p-2">
+			<div>
+				<div>
+					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
+						{entityDisplayName}
+					</h4>
+					<p>{!entityDisplayName.includes(items[0].mapDetails?.address?.street) && !entityDisplayName.includes(items[0].mapDetails?.address?.zip) && fullAddress}</p>
+					<div className="hc-pt-2">
+						<button
+							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
+							onClick={applyFilters}
+						>
+							{items.length > 1
+								? `View All ${items.length} jobs at this location`
+								: `View job at this location`}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default InfoWindowContent;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
+import { GoogleMap } from "@react-google-maps/api";
 import ShowAllButton from "~/components/modules/buttons/show-all-button";
-import { clusterOptions } from "~/util/mapUtil";
 
 const Map = ({
 	zoom,
@@ -9,10 +8,6 @@ const Map = ({
 	mapContainerRef,
 	onLoad,
 	onIdle,
-	clusterGridSize,
-	markerConfigs,
-	mapMarkers,
-	placeMarkers,
 	mapInteracted,
 	pinIconUrl,
 	setMapInteracted,
@@ -20,7 +15,8 @@ const Map = ({
 	mapRef,
 	setQuery,
 	filteredListingsLength,
-	setSelectedFilters
+	setSelectedFilters,
+	children
 }) => {
 	return (
 		<>
@@ -45,19 +41,11 @@ const Map = ({
 							]
 						}}
 					>
-						<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
-							{clusterer => (
-								<>
-									{mapMarkers}
-									{placeMarkers}
-								</>
-							)}
-						</MarkerClustererF>
+						{children}
 					</GoogleMap>
-					{mapInteracted && markerConfigs && (
+					{mapInteracted && (
 						<ShowAllButton
 							mapInteracted={mapInteracted}
-							markerConfigs={markerConfigs}
 							setMapInteracted={setMapInteracted}
 							fitBounds={fitBounds}
 							mapRef={mapRef}