@abcagency/hc-ui-components 1.9.35 → 1.9.36

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

@@ -1,8 +1,9 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
-import { useComponents } from '~/contexts/componentContext';
+import MapMarker from "~/components/modules/maps/map-marker";
 import { InfoWindow } from "@react-google-maps/api";
+import InfoWindowCard from "~/components/modules/maps/info-window-card";
 import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
 
 import { useMap } from "~/contexts/mapContext";
@@ -20,9 +21,6 @@ const MapMarkerContainer = ({
 	selectedLocation,
 	setMapInteracted
 }) => {
-	// Get injected components from context
-	const { MapMarker, InfoWindowCard } = useComponents();
-	
 	const { setLocation, commuteLocation } = useMap();
 	const isSelected = item.id === selectedLocation?.id;
 	const markerRef = useRef(null);

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import Accordion from '~/components/modules/accordions/default';
-import { twMerge } from '~/util/twMerge';
-import { useMapList } from '~/contexts/mapListContext';
 
 const AccordionFilterItem = ({
 	id,
@@ -9,28 +7,17 @@ const AccordionFilterItem = ({
 	header,
 	body
 }) => {
-	const { filterConfig } = useMapList();
-
 	return (
 		<Accordion.Item key={id} id={id}>
 			<Accordion.Trigger.HasHeader
 				onClick={() => setDefaultValue(id)}
-				className={twMerge(
-					"hc-stretched-link hc-text-left",
-					filterConfig?.classNames?.filterAccordion
-				)}
+				className="hc-stretched-link hc-text-left"
 				iconClassName="hc-order-last"
-				headerClassName={twMerge(
-					"hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none",
-					filterConfig?.classNames?.filterAccordionHeader
-				)}
+				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
 			>
 				{header}
 			</Accordion.Trigger.HasHeader>
-			<Accordion.Content bodyClassName={twMerge(
-				"hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto",
-				filterConfig?.classNames?.filterAccordionContent
-			)}>
+			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
 				{body}
 			</Accordion.Content>
 		</Accordion.Item>

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

@@ -2,34 +2,19 @@ import React from 'react';
 import Accordion from '~/components/modules/accordions/default';
 import FilterCard from '~/components/modules/cards/filter';
 import Loading from '~/util/loading';
-import Button from '~/components/modules/buttons/default';
 
 const AccordionFilters = ({
 	className,
 	defaultValue,
 	children,
-	filterOptions,
-	handleReset
+	filterOptions
 }) => {
 	return (
 		<FilterCard className={className ?? ""}>
 			<FilterCard.Title icon="fa-solid:sliders-h">
-				<div className="hc-flex hc-items-center hc-justify-between hc-w-full">
-					<span>
-						Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
-					</span>
-					{handleReset && (
-						<Button.Btn
-							type="button"
-							variant="outline"
-							size="none"
-							onClick={handleReset}
-							className="hc-ml-auto hc-text-xs hc-px-2 hc-py-0.5"
-						>
-							Reset
-						</Button.Btn>
-					)}
-				</div>
+				<span>
+          Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
+				</span>
 			</FilterCard.Title>
 
 			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >

package/src/components/modules/buttons/button-group-apply.js

@@ -25,32 +25,27 @@ const ButtonGroupApply = ({
 	item,
 	companyName,
 	trackEvent,
-	eventTypes,
-	mobileDetailsCallback = null
+	eventTypes
 }) => {
 	const href = linkFormat.replace('[slug]', item.slug ?? item.id);
 
 	const trackApplyNow = () => {
 		//console.log('calling trackApplyNow');
-		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackApplyOpen = () => {
 		//console.log('calling trackApplyOpen');
-		trackEvent(eventTypes.APPLY_OPEN_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_OPEN_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackEasyApply = () => {
 		//console.log('calling trackEasyApply');
-		trackEvent(eventTypes.EASY_APPLY_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.EASY_APPLY_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackViewDetails = () => {
 		//console.log('calling trackViewDetails');
-		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 
-	// Check if on mobile (same breakpoint as mobile callback check)
-	const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
-	const hideDetailsOnMobile = isMobile && mobileDetailsCallback;
-
 	return (
 		<nav
 			className={twMerge`
@@ -83,9 +78,9 @@ const ButtonGroupApply = ({
 				</Button.Anchor>
 			) : null}
 
-			{item.fields.applyOnline == true && item.fields.applyUrl && !includeDialog &&
+			{item.applyOnline == 1 && item.applyUrl && !includeDialog &&
 				<Button.Anchor
-					href={item.fields.applyUrl}
+					href={item.applyUrl}
 					variant={applyButtonVariant}
 					size={buttonSize}
 					className={"map-apply-now-button"}
@@ -96,8 +91,8 @@ const ButtonGroupApply = ({
 					{applyNowText}
 				</Button.Anchor>
 			}
-			{item.fields.applyOnline == true && item.fields.applyUrl && includeDialog &&
-				<ApplyDialog applyUrl={item.fields.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName} item={item} trackEvent={trackEvent} eventTypes={eventTypes} isIframe={isIframe}>
+			{item.applyOnline == 1 && item.applyUrl && includeDialog &&
+				<ApplyDialog applyUrl={item.applyUrl} internalApplyLink={internalApplyLink} companyName={companyName} item={item} trackEvent={trackEvent} eventTypes={eventTypes} isIframe={isIframe}>
 					<Button.Anchor
 						variant={applyButtonVariant}
 						size={buttonSize}

package/src/components/modules/buttons/pill-wrapper.js

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import Button from '~/components/modules/buttons/default';
 
@@ -16,7 +15,7 @@ export const PillWrapper = forwardRef((
 			ref={ref}
 			size="none"
 			variant="none"
-			className={twMerge('hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20', className)}
+			className={`hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20 ${className}`}
 			{...props}
 		>
 			{children}

package/src/components/modules/dialogs/apply-dialog.js

@@ -7,11 +7,11 @@ import Icon from '~/components/modules/icon';
 const ApplyDialog = ({ children, applyUrl, internalApplyLink, companyName, item, trackEvent, eventTypes, isIframe }) => {
 	const trackApplyOption1 = () => {
 		//console.log('calling trackApplyOption1');
-		trackEvent(eventTypes.APPLY_OPTION_1_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_OPTION_1_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 	const trackApplyOption2 = () => {
 		//console.log('calling trackApplyOption2');
-		trackEvent(eventTypes.APPLY_OPTION_2_CLICKED, { jobCategory: item.fields.subCategory, jobCategoryClass: item.fields.category, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+		trackEvent(eventTypes.APPLY_OPTION_2_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
 	};
 
 	return (

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

@@ -57,14 +57,12 @@ const FilterCommute = ({
 							size="sqsm"
 							onClick={() => {
 								setIsCurrentLocation(!isCurrentLocation);
-							if (typeof window !== 'undefined') {
 								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
-							}
-							if (isCurrentLocation || commuteLocation) {
-								setCommuteLocation("");
-								setSelected("");
-							} else if (!commuteLocation) { fetchLocation(); }
-						}}
+								if (isCurrentLocation || commuteLocation) {
+									setCommuteLocation("");
+									setSelected("");
+								} else if (!commuteLocation) { fetchLocation(); }
+							}}
 
 							className=""
 						>

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

@@ -1,163 +1,76 @@
 "use client";
 import Button from "~/components/modules/buttons/default";
-import React, { useEffect, useRef, useState } from "react";
-import { twMerge } from '~/util/twMerge';
-import { useMapList } from "~/contexts/mapListContext";
-
+import React from "react";
 const Filter = ({
 	className,
 	hasActiveFilters,
 	filteredListings,
 	selectedFilters,
 	setMobileTab,
+	handleReset,
 	isDesktop = false,
 	style,
 	children
 }) => {
-	const { filterConfig } = useMapList();
-	const contentRef = useRef(null);
-	const containerRef = useRef(null);
-	const [hasOverflow, setHasOverflow] = useState(false);
-	const [showFixedFooter, setShowFixedFooter] = useState(false);
-	const [hasMounted, setHasMounted] = useState(false);
-	const transitionTimeoutRef = useRef(null);
-
-	// Set mounted state to avoid hydration mismatch
-	useEffect(() => {
-		setHasMounted(true);
-	}, []);
-
-	useEffect(() => {
-		if (typeof window === 'undefined' || !hasMounted) return;
-
-		const checkOverflow = () => {
-			if (contentRef.current) {
-				// Add a small tolerance (5px) to avoid false positives from rounding/padding
-				const hasScroll = contentRef.current.scrollHeight > contentRef.current.clientHeight + 5;
-
-				if (hasScroll !== hasOverflow) {
-					setHasOverflow(hasScroll);
-
-					// Clear any pending transitions
-					if (transitionTimeoutRef.current) {
-						clearTimeout(transitionTimeoutRef.current);
-					}
-
-					// Add a delay when transitioning to fixed footer to smooth the transition
-					if (hasScroll) {
-						transitionTimeoutRef.current = setTimeout(() => setShowFixedFooter(true), 200);
-					} else {
-						// Delay hiding fixed footer to allow animation to complete and prevent flashing
-						transitionTimeoutRef.current = setTimeout(() => setShowFixedFooter(false), 200);
-					}
-				}
-			}
-		};
-
-		// Delay initial check to ensure layout is complete
-		setTimeout(checkOverflow, 100);
-
-		// Check on resize
-		window.addEventListener('resize', checkOverflow);
-
-		// Use ResizeObserver to detect container size changes
-		const resizeObserver = new ResizeObserver(() => {
-			setTimeout(checkOverflow, 50);
-		});
-		if (containerRef.current) {
-			resizeObserver.observe(containerRef.current);
-		}
-		if (contentRef.current) {
-			resizeObserver.observe(contentRef.current);
-		}
-
-		// Use MutationObserver to detect content changes
-		const mutationObserver = new MutationObserver(() => {
-			setTimeout(checkOverflow, 50);
-		});
-		if (contentRef.current) {
-			mutationObserver.observe(contentRef.current, { childList: true, subtree: true, attributes: true });
-		}
-
-		return () => {
-			window.removeEventListener('resize', checkOverflow);
-			resizeObserver.disconnect();
-			mutationObserver.disconnect();
-			// Clear timeout on unmount
-			if (transitionTimeoutRef.current) {
-				clearTimeout(transitionTimeoutRef.current);
-			}
-		};
-	}, [children, hasOverflow, hasMounted]);
-
-	// Reusable button component
-	const MobileButtons = () => (
-		<>
-			{selectedFilters && Object.keys(selectedFilters).length > 0 && (
-				<Button.Btn
-					onClick={() => setMobileTab("listTab")}
-					variant="primary"
-					size="sm"
-					className={twMerge(
-						`${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}`,
-						filterConfig?.classNames?.showJobsButton
-					)}
-				>
-					<Button.Body>
-						<Button.Icon icon="fluent:search-12-filled" size="hc-size-3.5" />
-						Show {filteredListings.length} Jobs
-					</Button.Body>
-				</Button.Btn>
-			)}
-		</>
-	);
-
 	return (
 		<div
-			ref={containerRef}
 			style={isDesktop ? style : undefined}
-			className={twMerge(
-				`/* Mobile layout */
-				hc-relative hc-w-full hc-h-full hc-flex hc-flex-col
+			className={`
+        /* Mobile layout */
+        hc-relative hc-w-full hc-h-full hc-flex hc-flex-col
 
-				/* Desktop layout */
-				md:hc-relative md:hc-flex md:hc-flex-col md:hc-max-h-[100%]
+        /* Desktop layout */
+        md:hc-block md:hc-max-h-[100%] md:hc-overflow-y-auto md:hc-overflow-x-auto
 
-				${className ?? ""}`,
-				filterConfig?.classNames?.filterContainer
-			)}
+        ${className ?? ""}
+      `}
 		>
 			{/* Content area with scroll */}
-			<div
-				ref={contentRef}
-				className={twMerge(
-					`hc-w-full hc-flex-grow hc-max-h-full hc-overflow-auto ${hasOverflow ? 'hc-pb-16' : ''} md:hc-overflow-y-auto ${hasOverflow ? 'md:hc-pb-16' : 'md:hc-pb-0'}`,
-					filterConfig?.classNames?.filterContent
-				)}
-			>
-				<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
-					{children}
+			<div className="hc-w-full hc-flex-grow hc-overflow-auto hc-pb-16 md:hc-pb-0">
+				<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">{children}</div>
+			</div>
 
-					{/* Inline buttons when no overflow - mobile only */}
-					{!hasOverflow && !showFixedFooter && (
-						<div className={twMerge(
-							"hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-border-t hc-border-gray-200 hc-animate-in hc-fade-in hc-duration-300 md:hc-hidden",
-							filterConfig?.classNames?.filterFooter
-						)}>
-							<MobileButtons />
-						</div>
-					)}
-				</div>
+			{/* Desktop Reset Button - left aligned */}
+			<div className="hc-hidden md:hc-flex md:hc-justify-start hc-px-4 hc-py-4">
+				<Button.Btn onClick={handleReset} variant="outline" size="sm">
+					Reset All
+				</Button.Btn>
 			</div>
 
-			{/* Mobile Footer - fixed at bottom (only when overflow) */}
-			{showFixedFooter && (
-				<div className="hc-w-full hc-absolute hc-bottom-0 hc-left-0 hc-right-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-bg-gray-100 hc-border-t hc-border-gray-200 hc-z-50 md:hc-hidden hc-animate-in hc-fade-in hc-slide-in-from-bottom-2 hc-duration-200">
-					<MobileButtons />
-				</div>
-			)}
+			{/* Mobile Footer - fixed at bottom */}
+			<div
+				className="
+        hc-w-full
+        hc-absolute hc-bottom-0 hc-left-0 hc-right-0
+        hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4
+        hc-bg-white hc-border-t hc-border-gray-200
+        hc-z-10
+
+        /* Hide on desktop */
+        md:hc-hidden
+      "
+			>
+				<Button.Btn onClick={handleReset} variant="outline" size="sm">
+					Reset All
+				</Button.Btn>
+				{selectedFilters && Object.keys(selectedFilters).length > 0 && (
+					<Button.Btn
+						onClick={() => setMobileTab("listTab")}
+						variant="primary"
+						size="sm"
+						className={`
+              ${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;
+export default Filter;

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import Icon from '~/components/modules/icon';
-import { twMerge } from '~/util/twMerge';
-import { useMapList } from '~/contexts/mapListContext';
 
 const FilterItem = ({
 	className,
@@ -19,7 +17,6 @@ const FilterItem = ({
 	eventTypes,
 	...rest
 }) => {
-	const { filterConfig } = useMapList();
 	const itemName = item.name ? item.name : item;
 
 	return (
@@ -28,7 +25,6 @@ const FilterItem = ({
 		  onClick={() =>
 			{
 				if(!isExternalLink) return;
-				if (typeof window === 'undefined') return;
 			    trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });
 				window.location.href = externalLinkUrl;
 			}}
@@ -51,10 +47,7 @@ const FilterItem = ({
 					disabled={item.count === 0}
 					value={itemName}
 					type={type}
-					className={twMerge(
-						"hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm",
-						filterConfig?.classNames?.filterItemCheckbox
-					)}
+					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);
@@ -63,15 +56,9 @@ const FilterItem = ({
 				/>
 			)}
 
-			<span className={twMerge(
-				"hc-text-left hc-font-medium",
-				filterConfig?.classNames?.filterItemLabel
-			)}>{itemName}</span>
+			<span className="hc-text-left hc-font-medium">{itemName}</span>
 			{hasCount && !isExternalLink && (
-				<span className={twMerge(
-					"hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary",
-					filterConfig?.classNames?.filterItemCount
-				)}>
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
           ({item.count})
 				</span>
 			)}

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

@@ -2,8 +2,6 @@ import React, { useRef } from 'react';
 import Button from '~/components/modules/buttons/default';
 import Icon from '~/components/modules/icon';
 import FilterCard from '~/components/modules/cards/filter';
-import { twMerge } from '~/util/twMerge';
-import { useMapList } from '~/contexts/mapListContext';
 
 const Search = ({
 	inputPlaceholder,
@@ -16,7 +14,6 @@ const Search = ({
 	handleReset,
 	label
 }) => {
-	const { filterConfig } = useMapList();
 	const inputRef = useRef(null);
 	const buttonRef = useRef(null);
 
@@ -50,10 +47,7 @@ const Search = ({
 					}}
 					placeholder={inputPlaceholder}
 					value={inputValue}
-					className={twMerge(
-						"hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none",
-						filterConfig?.classNames?.searchInput
-					)}
+					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
 					onChange={handleInputChange}
 				/>
 

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

@@ -16,8 +16,7 @@ const ListingDetails = ({
 	companyName,
 	jobsDomain,
 	trackEvent,
-	eventTypes,
-	mobileDetailsCallback = null
+	eventTypes
 }) => {
 	if (!item) {
 		return null;
@@ -40,9 +39,8 @@ const ListingDetails = ({
 					companyName={companyName}
 					item={item}
 					trackEvent={trackEvent}
-				eventTypes={eventTypes}
-				mobileDetailsCallback={mobileDetailsCallback}
-				detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${jobsDomain}${item.id}`}
+					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
             lg:hc-flex-row

package/src/components/modules/list/field-mapper-desktop.jsx

@@ -2,59 +2,40 @@ import React from 'react';
 import Grid from '~/components/modules/grid';
 import PillWrapper from '~/components/modules/buttons/pill-wrapper';
 import { capitalize } from '~/util/stringUtils';
-import { getFieldValue } from '~/util/filterUtil';
-import { twMerge } from 'tailwind-merge';
 
 const FieldMapperDesktop = ({
 	item,
 	fieldsShown,
-	specialFeatures,
-	specialFeaturePills
+	specialFeatures
 }) => {
-	// Check both fields and customFields for field presence
-	const orderedFields = fieldsShown.filter(field => {
-		const value = getFieldValue(item, field);
-		return value !== undefined && value !== null;
-	});
+	const orderedFields = fieldsShown.filter(field => field in item.fields);
 
-	const specialFeaturePillsRender = field => {
-		if (field !== 'title' || !specialFeatures || !specialFeaturePills) return null;
-		
-		return Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
-			// Only show pill if it's configured in specialFeaturePills
-			if (!specialFeaturePills[featureKey]) return null;
-			
-			const value = getFieldValue(item, featureKey);
-			const customClassName = specialFeaturePills[featureKey]?.className || '';
-			
-			// Handle boolean fields (value == 1 or "true")
-			if (value == 1 || value === 1 || value === '1' || value === 'true' || value === 'True' || value === true) {
-				return <PillWrapper key={featureKey} className={customClassName}>{featureLabel}</PillWrapper>;
-			}
-			// Handle multi-value custom fields - show the value if it's not empty/false
-			if (value && value !== '' && value !== 'false' && value !== 'False' && value !== '0' && value !== 0) {
-				return <PillWrapper key={featureKey} className={customClassName}>{featureLabel}: {value}</PillWrapper>;
-			}
-			return null;
-		});
+	const specialFeaturePills = field => {
+		return field === 'position' && specialFeatures &&
+      Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
+      	return item.fields[featureKey] == 1 && (
+      		<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
+      	);
+      });
 	};
 
 	return (
 		<>
 			{orderedFields.map((field, index) => {
-				let value = getFieldValue(item, field);
+				let value = item.fields[field];
 				return (
 					<Grid.Item
 						key={field}
 						className={`
               hc-hidden md:hc-block hc-px-2
               ${index === 0 ? "hc-pl-7" : ""}
-              ${field.toLowerCase() === "title" ? "hc-col-span-4 hc-text-balance hc-font-semibold" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+              ${field.toLowerCase() === "position" ? "hc-col-span-4 hc-text-balance hc-font-semibold" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
             `}
 					>
 						<span className="hc-sr-only">{capitalize(field)}</span>
 						{value}
-						{specialFeaturePillsRender(field)}
+						<br />
+						{specialFeaturePills(field)}
 					</Grid.Item>
 				);
 			})}