@abcagency/hc-ui-components 1.3.18 → 1.3.19

package/src/components/HireControlMap.js

@@ -1,129 +1,132 @@
-import React, { useEffect, useState } from 'react';
-import { useLoadScript } from '@react-google-maps/api';
-
-import Grid from '~/components/modules/grid';
-import Filter from '~/components/modules/filter';
-import MapList from '~/components/modules/maps/map-list';
-
-import { MapProvider } from '~/contexts/mapContext';
-import { PlacesProvider } from '~/contexts/placesContext';
-import { MapListProvider } from '~/contexts/mapListContext';
-import { TrackEventProvider } from '~/contexts/trackEventContext';
-
-import { getMapConfig } from '~/services/configService';
-import { setClientAuthKey } from '~/clientToken.js';
-
-import '../styles/index.css';
-
-const libraries = ['places'];
-
-export const HireControlMap = ({
-	clientToken,
-	navigateToDetails = null,
-	navigateToEasyApply = null,
-	Link = null,
-	linkFormat = '/jobs/[slug]',
-	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);}
-}) => {
-	const [siteConfig, setSiteconfig] = useState(null);
-
-	useEffect(() => {
-		setClientAuthKey(clientToken);
-		const fetchSiteConfig = async () => {
-			try {
-				const configData = await getMapConfig(clientToken);
-				setSiteconfig(configData);
-			} catch (error) {
-				console.error('Failed to fetch site configuration:', error);
-			}
-		};
-
-		fetchSiteConfig();
-	}, [clientToken]);
-
-	const { isLoaded } = useLoadScript({
-		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
-		version: 'quarterly',
-		libraries: libraries
-	});
-
-	return (
-		<div>
-			{isLoaded && siteConfig && (
-				<HomeBody
-					siteConfig={siteConfig}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					trackEvent={trackEvent}
-				/>
-			)}
-		</div>
-	);
-};
-
-const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, trackEvent }) => {
-	const resetFilters = false;
-
-	return (
-		<TrackEventProvider trackEvent={trackEvent}>
-			<MapListProvider
-				siteConfig={siteConfig}
-				resetFilters={resetFilters}
-				avigateToDetails={navigateToDetails}
-				navigateToEasyApply={navigateToEasyApply}
-				Link={Link}
-				linkFormat={linkFormat}
-			>
-				<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-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>
-		</TrackEventProvider>
-	);
-};
-
-export default HireControlMap;
+import React, { useEffect, useState } from 'react';
+import { useLoadScript } from '@react-google-maps/api';
+
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/modules/filter';
+import MapList from '~/components/modules/maps/map-list';
+
+import { MapProvider } from '~/contexts/mapContext';
+import { PlacesProvider } from '~/contexts/placesContext';
+import { MapListProvider } from '~/contexts/mapListContext';
+import { TrackEventProvider } from '~/contexts/trackEventContext';
+
+import { getMapConfig } from '~/services/configService';
+import { setClientAuthKey } from '~/clientToken.js';
+
+import '../styles/index.css';
+
+const libraries = ['places'];
+
+export const HireControlMap = ({
+	clientToken,
+	navigateToDetails = null,
+	navigateToEasyApply = null,
+	Link = null,
+	linkFormat = '/jobs/[slug]',
+	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);},
+	listings = []
+}) => {
+	const [siteConfig, setSiteconfig] = useState(null);
+
+	useEffect(() => {
+		setClientAuthKey(clientToken);
+		const fetchSiteConfig = async () => {
+			try {
+				const configData = await getMapConfig(clientToken);
+				setSiteconfig(configData);
+			} catch (error) {
+				console.error('Failed to fetch site configuration:', error);
+			}
+		};
+
+		fetchSiteConfig();
+	}, [clientToken]);
+
+	const { isLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: libraries
+	});
+
+	return (
+		<div>
+			{isLoaded && siteConfig && (
+				<HomeBody
+					siteConfig={siteConfig}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					trackEvent={trackEvent}
+					listings={listings}
+				/>
+			)}
+		</div>
+	);
+};
+
+const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, trackEvent, listings }) => {
+	const resetFilters = false;
+
+	return (
+		<TrackEventProvider trackEvent={trackEvent}>
+			<MapListProvider
+				siteConfig={siteConfig}
+				resetFilters={resetFilters}
+				avigateToDetails={navigateToDetails}
+				navigateToEasyApply={navigateToEasyApply}
+				Link={Link}
+				linkFormat={linkFormat}
+				listings={listings}
+			>
+				<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-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>
+		</TrackEventProvider>
+	);
+};
+
+export default HireControlMap;

package/src/components/modules/accordions/MapAccordionItem.js

@@ -1,74 +1,32 @@
-import React from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import ListItem from '~/components/modules/maps/list/list-item';
-import ItemExpandCard from '~/components/modules/maps/list/item-expand-card';
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-import { setStorageObject } from '~/util/localStorageUtil';
-
-const MapAccordionItem = ({
-	item,
-	itemRefs,
-	itemExpandedContent,
-	fieldsShown,
-	showMap,
-	hasListItemSelected,
-	specialFeatures,
-	isActive
-}) => {
-	const {
-		mapItems,
-		recruiters,
-		setMobileTab,
-		favorites,
-		handleSettingFavorites
-	} = useMapList();
-	const { selectItem } = useMap();
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const setSelectedItemAndZoomMap = item => {
-		if (isActive) {
-			localStorage.removeItem("selectedListItem");
-			mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
-			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
-		} else {
-			setStorageObject("selectedListItem", item);
-			let location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
-			selectItem(item, location, 12, {
-				lat: location?.latitude,
-				lng: location?.longitude
-			});
-		}
-	};
-	return (
-		<Accordion.Item key={item.id} id={item.id}>
-			<Accordion.Trigger.Blank>
-				<ListItem
-					ref={el => (itemRefs.current[item.id] = el)}
-					id={item.id}
-					key={item.id}
-					item={item}
-					fieldsShown={fieldsShown}
-					onClick={() => 	{ trackEvent(eventTypes.JOB_LISTING_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });setSelectedItemAndZoomMap(item);}}
-					showMap={showMap}
-					isActive={isActive}
-					setMobileTab={setMobileTab}
-					specialFeatures={specialFeatures}
-					className={hasListItemSelected ? isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85" : ""}
-					favorites={favorites}
-					setFavorites={handleSettingFavorites}
-				/>
-			</Accordion.Trigger.Blank>
-			{isActive &&
-				<Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
-					<ItemExpandCard content={itemExpandedContent(item, recruiters)} />
-				</Accordion.Content>
-			}
-		</Accordion.Item>
-	);
-};
-
-export default MapAccordionItem;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import ItemExpandCard from '~/components/modules/list/item-expand-card';
+
+const MapAccordionItem = ({
+	item,
+	itemRefs,
+	itemExpandedContent,
+	isActive,
+	children
+}) => {
+	if(isActive){
+		console.log("accordion rerender ");
+	}
+	return (
+		<Accordion.Item key={item.id} id={item.id}>
+			<Accordion.Trigger.Blank>
+				<div ref={el => (itemRefs.current[item.id] = el)}>
+					{children}
+				</div>
+			</Accordion.Trigger.Blank>
+			{isActive &&
+
+        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
+        	{ <ItemExpandCard content={itemExpandedContent(item)} />}
+        </Accordion.Content>
+			}
+		</Accordion.Item>
+	);
+};
+
+export default MapAccordionItem;

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

@@ -1,89 +1,89 @@
-import React, { useState } from 'react';
-
-import FilterSearch from '~/components/modules/filter/search';
-import FiltersAccordion from '~/components/modules/accordions/filters';
-import FilterLocations from '~/components/modules/filter/location';
-import Button from '~/components/modules/buttons/default';
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const Filter = ({
-	className,
-	showMap
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const [hasActiveFilters, setHasActiveFilters] = useState(false);
-	const [defaultValue, setDefaultValue] = useState(null);
-	const { setSelectedListItem, setLocation, filterReset } = useMap();
-	const {
-		filteredListings,
-		selectedFilters,
-		setSelectedFilters,
-		setMobileTab,
-		handleSettingFavorites,
-		setQuery,
-		siteConfig
-	} = useMapList();
-
-	return (
-		<div
-			className={`
-			hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
-				${className ?? ""}
-			`}
-		>
-			<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
-				<FiltersAccordion
-					setHasActiveFilters={setHasActiveFilters}
-					defaultValue={defaultValue}
-					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-					setLocation={setLocation}
-					setSelectedListItem={setSelectedListItem}
-				/>
-				<FilterSearch />
-				{siteConfig.hideLocations !== true &&
-					<FilterLocations
-						setHasActiveFilters={setHasActiveFilters}
-						defaultValue={defaultValue}
-						showMap={showMap}
-						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-						setLocation={setLocation}
-						setSelectedListItem={setSelectedListItem}
-					/>
-				}
-			</div>
-			<div className="hc-sticky hc-bottom-0 hc-inset-x-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-mt-2 hc-bg-white md:hc-bg-gray-100">
-				<Button.Btn
-					onClick={() => {trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters }); filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
-					variant="outline"
-					size="sm"
-				>
-					Reset
-				</Button.Btn>
-				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
-					<Button.Btn
-						onClick={() => setMobileTab("listTab")}
-						variant="primary"
-						size="sm"
-						className={`
-						md:hc-hidden
-						${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-					`}
-					>
-						<Button.Body>
-							<Button.Icon
-								icon="fluent:search-12-filled"
-								size="hc-size-3.5"
-							/>
-							Show {filteredListings.length} Jobs
-						</Button.Body>
-					</Button.Btn>
-				}
-			</div>
-		</div>
-	);
-};
-
-export default Filter;
+import React, { useState } from 'react';
+
+import FilterSearch from '~/components/modules/filter/search';
+import FiltersAccordion from '~/components/modules/accordions/filters';
+import FilterLocations from '~/components/modules/filter/location';
+import Button from '~/components/modules/buttons/default';
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const Filter = ({
+	className,
+	showMap
+}) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const [hasActiveFilters, setHasActiveFilters] = useState(false);
+	const [defaultValue, setDefaultValue] = useState(null);
+	const { setSelectedListItem, setLocation, filterReset } = useMap();
+	const {
+		filteredListings,
+		selectedFilters,
+		setSelectedFilters,
+		setMobileTab,
+		handleSettingFavorites,
+		setQuery,
+		siteConfig
+	} = useMapList();
+
+	return (
+		<div
+			className={`
+			hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
+				${className ?? ""}
+			`}
+		>
+			<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
+				<FiltersAccordion
+					setHasActiveFilters={setHasActiveFilters}
+					defaultValue={defaultValue}
+					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
+					setLocation={setLocation}
+					setSelectedListItem={setSelectedListItem}
+				/>
+				<FilterSearch />
+				{siteConfig.hideLocations !== true &&
+					<FilterLocations
+						setHasActiveFilters={setHasActiveFilters}
+						defaultValue={defaultValue}
+						showMap={showMap}
+						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
+						setLocation={setLocation}
+						setSelectedListItem={setSelectedListItem}
+					/>
+				}
+			</div>
+			<div className="hc-sticky hc-bottom-0 hc-inset-x-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-mt-2 hc-bg-white md:hc-bg-gray-100">
+				<Button.Btn
+					onClick={() => {trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters }); filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
+					variant="outline"
+					size="sm"
+				>
+					Reset
+				</Button.Btn>
+				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
+					<Button.Btn
+						onClick={() => setMobileTab("listTab")}
+						variant="primary"
+						size="sm"
+						className={`
+						md:hc-hidden
+						${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
+					`}
+					>
+						<Button.Body>
+							<Button.Icon
+								icon="fluent:search-12-filled"
+								size="hc-size-3.5"
+							/>
+							Show {filteredListings.length} Jobs
+						</Button.Body>
+					</Button.Btn>
+				}
+			</div>
+		</div>
+	);
+};
+
+export default Filter;

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

@@ -42,7 +42,6 @@ const RadioItem = ({
 				onClick={() => {
 					changeHandler();
 				}}
-				onChange={() => { }}
 			/>
 			<span className="hc-font-medium">{item.key}</span>
 			{isActive &&

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

@@ -0,0 +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, recruiters }) => {
+	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}
+		recruiters={recruiters}
+		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;