@abcagency/hc-ui-components 1.3.20 → 1.3.21

package/src/components/modules/filter/radio-item.js

@@ -1,56 +1,42 @@
-import React from 'react';
-
-import Icon from '~/components/modules/icon';
-
-import { useMap } from "~/contexts/mapContext";
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const RadioItem = ({
-	className,
-	item,
-	field,
-	...rest
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { selectedPlaces, setSelectedPlaces } = useMap();
-	const chosenPlace = item.key.toLowerCase();
-	let isActive = selectedPlaces.includes(chosenPlace);
-
-	const changeHandler = () => {
-		if(!isActive)
-			trackEvent(eventTypes.POI_APPLIED, { chosenPlace });
-		setSelectedPlaces([isActive ? '' : chosenPlace]);
-	};
-
-	return (
-		<label key={item.key}
-			className={`
-			hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
-				${item.count === 0 ? 'hc-text-uiDisabled hc-cursor-not-allowed' : 'hover:hc-bg-uiAccent/5'}
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<input
-				key={item.key}
-				id={item.Key}
-				name={field}
-				value={item.key}
-				type={"radio"}
-				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-full`}
-				checked={isActive}
-				onClick={() => {
-					changeHandler();
-				}}
-			/>
-			<span className="hc-font-medium">{item.key}</span>
-			{isActive &&
-				<div className="hc-w-full hc-unselect-div">
-					<Icon className="hc-float-right" icon="mdi:times"></Icon>
-				</div>
-			}
-		</label>
-	);
-};
-
-export default RadioItem;
+import React from 'react';
+import Icon from '~/components/modules/icon';
+
+const RadioItem = ({
+	className,
+	item,
+	field,
+	isActive,
+	changeHandler,
+	...rest
+}) => {
+	return (
+		<label
+			key={item.key}
+			className={`
+        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+        ${item.count === 0 ? 'hc-text-uiDisabled hc-cursor-not-allowed' : 'hover:hc-bg-uiAccent/5'}
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			<input
+				key={item.key}
+				id={item.key}
+				name={field}
+				value={item.key}
+				type="radio"
+				className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-full"
+				checked={isActive}
+				onClick={changeHandler}
+			/>
+			<span className="hc-font-medium">{item.key}</span>
+			{isActive &&
+        <div className="hc-w-full hc-unselect-div">
+        	<Icon className="hc-float-right" icon="mdi:times"></Icon>
+        </div>
+			}
+		</label>
+	);
+};
+
+export default RadioItem;

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

@@ -1,46 +1,18 @@
-import React, { useRef, useState, useEffect } from 'react';
-
+import React from 'react';
 import Button from '~/components/modules/buttons/default';
 import Icon from '~/components/modules/icon';
 import FilterCard from '~/components/modules/cards/filter';
 
-import { useMapList } from '~/contexts/mapListContext';
-
 const Search = ({
-	inputPlaceholder = "Keywords",
-	showSearchIcon = false,
+	inputPlaceholder,
+	showSearchIcon,
 	className,
-	labelClassName
+	labelClassName,
+	inputValue,
+	handleInputChange,
+	handleReset,
+	label
 }) => {
-	const {
-		query,
-		setQuery,
-		siteConfig
-	} = useMapList();
-	const [inputValue, setInputValue] = useState(query != null ? query : "");
-	const debounceTimer = useRef(null);
-
-	const handleInputChange = e => {
-		setInputValue(e.target.value);
-		if (debounceTimer.current) {
-			clearTimeout(debounceTimer.current);
-		}
-		debounceTimer.current = setTimeout(() => {
-			setQuery(e.target.value);
-		}, 500);
-	};
-
-	const handleReset = () => {
-		setInputValue("");
-		setQuery("");
-	};
-
-	useEffect(() => {
-		if (query == null) {
-			setInputValue("");
-		}
-	}, [query]);
-	inputPlaceholder = siteConfig.searchConfig.placeholder;
 	return (
 		<FilterCard as="form" className={className ?? ""}>
 			<FilterCard.Title
@@ -49,7 +21,7 @@ const Search = ({
 				className={labelClassName ?? ""}
 			>
 				<span>
-					{siteConfig.searchConfig.label}
+					{label}
 				</span>
 			</FilterCard.Title>
 

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

@@ -1,102 +1,3 @@
-// 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';
-
-// import { useMap } from '~/contexts/mapContext';
-// import { useMapList } from '~/contexts/mapListContext';
-// import { useTrackEvent } from '~/contexts/trackEventContext';
-
-// const ListingDetails = ({ item, recruiters }) => {
-// 	const { trackEvent, eventTypes } = useTrackEvent();
-// 	const { travelTime } = useMap();
-// 	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
-// 	if (!item) {
-// 		return null;
-// 	}
-// 	let matchingRecruiter = !recruiters ? null : recruiters[item?.recruiterId];
-// 	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={`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={siteConfig.useDetailsPostMessage}
-// 					navigateToDetails={navigateToDetails}
-// 					navigateToEasyApply={navigateToEasyApply}
-// 					Link={Link}
-// 					linkFormat={linkFormat}
-// 					includeDialog={siteConfig.useApplyDialog}
-// 					internalApplyLink={siteConfig.internalApplyLink}
-// 					companyName={siteConfig.companyName}
-// 					applyUrl={item?.applyUrl}
-// 					itemId={item.id}
-// 					item={item}
-// 					trackEvent={trackEvent}
-// 					eventTypes={eventTypes}
-// 					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${siteConfig.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';
@@ -120,7 +21,6 @@ const ListingDetails = ({
 	trackEvent,
 	eventTypes
 }) => {
-	console.log(item);
 	if (!item) {
 		return null;
 	}

package/src/components/modules/list/field-mapper.js

@@ -12,7 +12,7 @@ const FieldMapper = ({
 	specialFeatures,
 	handleFavouriteClick,
 	isFavorite,
-	includeFavorite
+	includeFavorite = true
 }) => {
 	const orderedFields = fieldsShown.filter(field => field in item.fields);
 
@@ -48,7 +48,7 @@ const FieldMapper = ({
 				{fieldsShown.includes("position") &&
 					<>
 						<div className="hc-flex hc-items-start">
-							<div className="hc-flex hc-justify-between hc-items-center hc-min-w-[100%]"> {/* Use percentage for minimum width */}
+							<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.position}</h3>
 								{includeFavorite && <div className="hc-flex hc-justify-end hc-pb-2">
 									<Icon
@@ -58,7 +58,7 @@ const FieldMapper = ({
 										className={`hc-transition-opacity hc-duration-300 hc-cursor-pointer
 									${isFavorite ? "hc-opacity-100" : "hc-text-uiText/60 group-hover:hc-opacity-100"}
 									`}
-										onClick={e => handleFavouriteClick(e)}
+										onClick={e => handleFavouriteClick(e, item)}
 									/>
 								</div>
 								}

package/src/components/modules/list/item-expand-card/index.js

@@ -6,8 +6,6 @@ const CardItemExpand = ({
 	content,
 	...props
 }) => {
-	console.log(content);
-	console.log("cardItem render");
 	return (
 		<div
 			className={twMerge(

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

@@ -1,117 +1,7 @@
-// import React, { RefObject } from 'react';
-// import Accordion from '~/components/modules/accordions/default';
-// import Header from '~/components/modules/list/header';
-// import MapAccordionItemContainer from '~/components/modules/list/list-item';
-// import Sort from '~/components/modules/filter/sort';
-// import ListingDetails from '~/components/modules/jobListing/listing-details';
-// import Loading from "~/util/loading";
-// import { dynamicSort } from '~/util/sortUtil';
-// import { IListing } from '~/interfaces/IListings';
-// import { IMapConfig } from '~/interfaces/config/IMapConfig';
-
-// interface ItemsListProps {
-//   fieldNames: Record<string, string>;
-//   showMap: boolean;
-//   fieldsShown: string[];
-//   specialFeatures: any;
-//   mapItems: any;
-//   filteredListings: IListing[];
-//   loading: boolean;
-//   sortSetting: any;
-//   setSortSetting: (setting: any) => void;
-//   itemLimit: number;
-//   loader: RefObject<HTMLDivElement>;
-//   scrollContainerRef: RefObject<HTMLDivElement>;
-//   itemRefs: any;
-//   selectedListItem: IListing | null;
-//   itemExpandedContent: (item: IListing, recruiters: any) => JSX.Element | null;
-// }
-
-// const ItemsList: React.FC<ItemsListProps> = ({
-// 	fieldNames,
-// 	showMap,
-// 	fieldsShown,
-// 	specialFeatures,
-// 	mapItems,
-// 	filteredListings,
-// 	loading,
-// 	sortSetting,
-// 	setSortSetting,
-// 	itemLimit,
-// 	loader,
-// 	scrollContainerRef,
-// 	itemRefs,
-// 	selectedListItem,
-// 	itemExpandedContent
-// }) => (
-// 	<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
-// 		<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
-// 			<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
-// 				{loading && <span>Loading...</span>}
-// 				{!loading && <span>{filteredListings.length} results</span>}
-// 			</h2>
-// 			<div className="hc-block md:hc-hidden">
-// 				<Sort
-// 					className={''}
-// 					fields={fieldsShown}
-// 					setSortSetting={setSortSetting}
-// 					fieldNames={fieldNames}
-// 				/>
-// 			</div>
-// 		</div>
-// 		<div>
-// 			<Header
-// 				className={''}
-// 				setSortSetting={setSortSetting}
-// 				sortSetting={sortSetting}
-// 				fieldsShown={fieldsShown}
-// 				fieldNames={fieldNames}
-// 			/>
-// 		</div>
-// 		<div
-// 			ref={scrollContainerRef}
-// 			className={`
-//         hc-flex-grow hc-overflow-y-auto
-//         ${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
-//       `}
-// 		>
-// 			{loading ? (
-// 				<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
-// 					<Loading />
-// 				</div>
-// 			) : (
-// 				<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
-// 					{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings).slice(0, itemLimit).map((item: IListing) => (
-// 						<MapAccordionItemContainer
-// 							key={item.id}
-// 							showMap={showMap}
-// 							item={item}
-// 							itemRefs={itemRefs}
-// 							fieldsShown={fieldsShown}
-// 							itemExpandedContent={itemExpandedContent}
-// 							specialFeatures={specialFeatures}
-// 							mapItems={mapItems}
-// 							isActive={selectedListItem?.id === item.id}
-// 							hasListItemSelected={selectedListItem != null}
-// 						/>
-// 					))}
-
-// 				</Accordion>
-// 			)}
-// 			<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
-// 				{filteredListings.length >= itemLimit && <Loading />}
-// 			</div>
-// 		</div>
-// 	</div>
-// );
-
-// export default ItemsList;
 import React, { RefObject, ReactNode } from 'react';
 import Header from '~/components/modules/list/header';
-import MapAccordionItemContainer from '~/components/modules/list/list-item';
 import Sort from '~/components/modules/filter/sort';
 import Loading from "~/util/loading";
-import { dynamicSort } from '~/util/sortUtil';
 import { Listing } from '~/types/Listings';
 
 interface ItemsListProps {
@@ -143,11 +33,8 @@ const ItemsList: React.FC<ItemsListProps> = ({
 	itemLimit,
 	loader,
 	scrollContainerRef,
-	itemRefs,
-	selectedListItem,
-	itemExpandedContent,
 	includeFavorite = false,
-	children // Destructure children
+	children
 }) => (
 	<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
 		<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">

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

@@ -17,7 +17,7 @@ const ListItem = forwardRef(
 			setMobileTab,
 			handleSettingFavorites,
 			favorites,
-			includeFavorite = false,
+			includeFavorite = true,
 			siteConfig,
 			trackEvent,
 			eventTypes,
@@ -122,6 +122,7 @@ export default React.memo(ListItem, (prevProps, nextProps) => {
 		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,81 +1,35 @@
-import React from 'react';
-
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const InfoWindowContent = ({
-	item,
-	filterListingsByLocation
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { setSelectedFilters, setMobileTab, selectedFilters, siteConfig } = useMapList();
-	const fieldsShown = siteConfig.fieldsShown;
-	let items = item && item.items ? Object.values(item.items) : null;
-
-	if (!items || items.length < 0) {
-		return;
-	}
-	const addressParts = [
-		items[0].mapDetails?.address?.street,
-		items[0].mapDetails?.address?.city,
-		items[0].mapDetails?.address?.state,
-		items[0].mapDetails?.address?.zip
-	];
-	const fullAddress = addressParts.filter(Boolean).join(', ');
-
-	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={() => {
-
-								setMobileTab("listTab");
-								const newFilters = { ...selectedFilters };
-								let filters = [];
-
-								if (fieldsShown.includes('cityState')) {
-									newFilters.cityState = {
-										[items[0].fields.cityState]: true
-									};
-									filters.push({ filterType: 'cityState', filterChecked: items[0].fields.cityState });
-								}
-
-								if (fieldsShown.includes('city')) {
-									newFilters.city = {
-										[items[0].fields.city]: true
-									};
-									filters.push({ filterType: 'city', filterChecked: items[0].fields.city });
-								}
-
-								if (fieldsShown.includes('state')) {
-									newFilters.state = {
-										[items[0].fields.state]: true
-									};
-									filters.push({ filterType: 'state', filterChecked: items[0].fields.state });
-								}
-								trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
-								setSelectedFilters(newFilters);
-								filterListingsByLocation();
-							}}
-						>
-							{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;
+	}
+	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;

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

@@ -1,70 +1,24 @@
 import React from 'react';
-
-import List from '~/components/modules/list';
-import Map from '~/components/modules/maps/map';
 import Tabs from '~/components/modules/maps/tabs';
-import Filter from '~/components/modules/filter';
-
-const MapList = ({
-	loading = false,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings
-}) => {
-
-	const listProps = {
-		fieldsShown: fieldsShown,
-		fieldNames: fieldNames,
-		itemExpandedContent: itemExpandedContent,
-		loading: loading,
-		showMap: showMap,
-		specialFeatures: specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails: mapDetails,
-		markerConfigs: markerConfigs,
-		placeMappings: placeMappings,
-		clusterGridSize: 60,
-		showMap: showMap
-	};
 
-	// useEffect(() => {
-	// 	if (selectedItem !== null) {
-	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, []);
-	const map = <Map {...mapProps} />;
+const MapList = ({ showMap, loading, list, map, filter }) => {
 	return (
 		<>
 			<div
 				className={`
-					${showMap == false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
+					${showMap === false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
 					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
 				`}
 			>
-				<div>
-					<List {...listProps} />
-				</div>
+				<div>{list}</div>
 				<div>{showMap && map}</div>
 			</div>
 			<div className="md:hc-hidden">
 				<Tabs
 					showMap={showMap}
-					list={<List {...listProps} />}
+					list={list}
 					map={!loading && showMap && map}
-					filter={
-						<Filter
-							showMap={showMap}
-							className="md:hc-hidden"
-						/>
-					}
+					filter={filter}
 				/>
 			</div>
 		</>