@abcagency/hc-ui-components 1.3.18 → 1.3.20

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;

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

@@ -1,99 +1,209 @@
-import React from 'react';
-
-import RecruiterHeadshot from '~/components/modules/maps/list/item-expand-card/recruiter-headshot';
-import RecruiterDetails from '~/components/modules/maps/list/item-expand-card/recruiter-details';
-import RecruiterContactNav from '~/components/modules/maps/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';
+// 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';
+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,
+	recruiters,
+	travelTime,
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	useApplyDialog,
+	internalApplyLink,
+	companyName,
+	jobsDomain,
+	trackEvent,
+	eventTypes
+}) => {
+	console.log(item);
+	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={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;
+