@abcagency/hc-ui-components 1.3.20 → 1.3.22

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

@@ -1,87 +1,48 @@
-import React, { useState, useEffect } from 'react';
-
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const FilterItem = ({
-	className,
-	item,
-	type = 'checkbox',
-	itemKey = null,
-	hasCount = true,
-	field,
-	selectedFilters,
-	setSelectedFilters,
-	...rest
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const itemName = item.name ? item.name : item;
-	itemKey = itemKey === null ? itemName : itemKey;
-	var isActive =
-		selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
-
-	useEffect(() => {
-		if(!selectedFilters)
-			return;
-		 setActiveItem(!!selectedFilters[field]?.[itemKey]);
-	},[selectedFilters, field, itemKey]);
-	const changeHandler = () => {
-		if (!isActive) {
-			trackEvent(eventTypes.FILTER_APPLIED, { filterType:  field, filterChecked: itemKey });
-		}
-		setSelectedFilters(prevFilters => {
-			const updatedFilters = { ...prevFilters };
-			if (!isActive) {
-				if (!updatedFilters[field]) {
-					updatedFilters[field] = {};
-				}
-				updatedFilters[field][itemKey] = true;
-				return updatedFilters;
-			}
-			delete updatedFilters[field][itemKey];
-			if (Object.keys(updatedFilters[field]).length === 0) {
-				delete updatedFilters[field];
-			}
-			return updatedFilters;
-		});
-	};
-	const [activeItem, setActiveItem] = useState(isActive);
-
-	useEffect(() => {
-		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
-		else if (activeItem === true) {
-			setActiveItem(false);
-		}
-	}, [selectedFilters]);
-
-	return (
-		<label
-			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
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<input
-				id={itemKey}
-				name={field}
-				disabled={item.count == 0}
-				value={itemName}
-				type={type}
-				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm`}
-				checked={activeItem}
-				onChange={() => {
-					setActiveItem(!activeItem);
-					changeHandler();
-				}}
-			/>
-			<span className="font-medium">{itemName}</span>
-			{hasCount && (
-				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
-					({item.count})
-				</span>
-			)}
-		</label>
-	);
-};
-
-export default FilterItem;
+import React from 'react';
+
+const FilterItem = ({
+	className,
+	item,
+	type,
+	itemKey,
+	hasCount,
+	field,
+	activeItem,
+	setActiveItem,
+	changeHandler,
+	...rest
+}) => {
+	const itemName = item.name ? item.name : item;
+
+	return (
+		<label
+			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
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			<input
+				id={itemKey}
+				name={field}
+				disabled={item.count === 0}
+				value={itemName}
+				type={type}
+				className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm"
+				checked={activeItem}
+				onChange={() => {
+					setActiveItem(!activeItem);
+					changeHandler();
+				}}
+			/>
+			<span className="font-medium">{itemName}</span>
+			{hasCount && (
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+          ({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;

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

@@ -1,71 +1,48 @@
-import React, { useEffect } from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import FilterCommute from '~/components/modules/filter/commute';
-import FilterPointsOfInterest from '~/components/modules/filter/points-of-interest';
-import FilterCard from '~/components/modules/cards/filter';
-import AccordionFilterItem from '~/components/modules/accordions/filterItem';
-
-import Loading from '~/util/loading';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const FilterLocation = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	showMap = false,
-	setLocation,
-	setSelectedListItem
-}) => {
-	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
-	// const activeItemsCount = selectedFilters != null && selectedFilters["cityState"]
-	// 	? Object.keys(selectedFilters["cityState"]).length
-	// 	: 0;
-
-	// const handleClearFilters = () => {
-	// 	setSelectedFilters(prevFilters => {
-	// 		const updatedFilters = { ...prevFilters };
-	// 		delete updatedFilters["cityState"];
-	// 		return updatedFilters;
-	// 	});
-	// };
-
-	var locations = filterOptions?.locations;
-	var pointsOfInterest = filterOptions?.pointsOfInterest;
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fluent:location-16-filled">
-				<span>
-					<span className="hc-hidden lg:hc-inline">Job</span> location
-				</span>
-			</FilterCard.Title>
-			{!locations && (
-				<Loading />
-			)}
-			{locations && <Accordion defaultValue={defaultValue} className="hc-space-y-4">
-				{locations?.map(filter => (
-					<AccordionFilterItem
-						key={filter.id}
-						filter={filter}
-						setDefaultValue={setDefaultValue}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
-					/>
-				))}
-				{showMap && <FilterCommute className="hc-mt-6" />}
-				{showMap && (
-					<FilterPointsOfInterest
-						className="hc-mt-4"
-						pointsOfInterest={pointsOfInterest}
-						setDefaultValue={setDefaultValue}
-						defaultValue={defaultValue}
-					/>
-				)}
-			</Accordion>
-			}
-		</FilterCard>
-	);
-};
-
-export default FilterLocation;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import FilterCard from '~/components/modules/cards/filter';
+import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
+import Loading from '~/util/loading';
+
+const FilterLocation = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem,
+	locations,
+	setSelectedFilters,
+	selectedFilters,
+	children
+}) => {
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fluent:location-16-filled">
+				<span>
+					<span className="hc-hidden lg:hc-inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && <Loading />}
+			{locations && (
+				<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+					{locations?.map(filter => (
+						<AccordionFilterItem
+							key={filter.id}
+							filter={filter}
+							setDefaultValue={setDefaultValue}
+							selectedFilters={selectedFilters}
+							setSelectedFilters={prevFilters => {
+								setSelectedFilters(prevFilters);
+								setLocation(null);
+								setSelectedListItem(null);
+							}}
+						/>
+					))}
+					{children}
+				</Accordion>
+			)}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;

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>
 
@@ -82,7 +54,7 @@ const Search = ({
 					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
 					onClick={handleReset}
 				>
-					<span className="sr-only">Clear</span>
+					<span className="hc-sr-only">Clear</span>
 					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
 				</Button.Btn>
 			</div>

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';
@@ -106,7 +7,7 @@ import CommutePill from '~/components/modules/buttons/commute-pill';
 
 const ListingDetails = ({
 	item,
-	recruiters,
+	recruiter,
 	travelTime,
 	useDetailsPostMessage,
 	navigateToDetails,
@@ -120,19 +21,18 @@ const ListingDetails = ({
 	trackEvent,
 	eventTypes
 }) => {
-	console.log(item);
 	if (!item) {
 		return null;
 	}
 
-	let matchingRecruiter = !recruiters ? null : recruiters[item?.recruiterId];
-
+	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={`https:${matchingRecruiter.headshot}`}
+						image={`${matchingRecruiter.headshot.includes("http") ? '' :'https:'}${matchingRecruiter.headshot}`}
 						alt={matchingRecruiter?.firstName}
 						className="hc-bg-gray-300"
 					/>
@@ -165,7 +65,7 @@ const ListingDetails = ({
 							</RecruiterContactNav>
 						}
 					>
-						{matchingRecruiter?.firstName && matchingRecruiter?.lastName && (
+						{matchingRecruiter?.firstName || matchingRecruiter?.lastName && (
 							<RecruiterDetails.Title>
 								{`${matchingRecruiter?.firstName} ${matchingRecruiter?.lastName}`}
 							</RecruiterDetails.Title>

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

@@ -12,14 +12,14 @@ const FieldMapper = ({
 	specialFeatures,
 	handleFavouriteClick,
 	isFavorite,
-	includeFavorite
+	includeFavorite = true
 }) => {
 	const orderedFields = fieldsShown.filter(field => field in item.fields);
 
 	const specialFeaturePills = field => {
 		return field === 'position' && specialFeatures &&
 			Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
-				return item.fields[featureKey] === 1 && (
+				return item.fields[featureKey] == 1 && (
 					<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
 				);
 			});
@@ -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(