@abcagency/hc-ui-components 1.0.0

package/src/components/modules/maps/info-window-content.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { DistanceMatrixService } from "@react-google-maps/api";
+import { useMapList } from "~/contexts/mapListContext";
+import { useMap } from "~/contexts/mapContext";
+import CommutePill from "../buttons/commute-pill";
+
+const InfoWindowContent = ({
+	item,
+	filterListingsByLocation
+}) => {
+	const { setSelectedFilters, setQuery, setMobileTab, selectedFilters } = useMapList();
+	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="flex-auto p-2">
+			<div>
+				<div>
+					<h4 className="text-lg font-bold leading-tight mb-3">
+						{items[0].mapDetails?.entityDisplayName}
+					</h4>
+					<p>
+						{fullAddress}
+					</p>
+					<div className="pt-2">
+						<button
+							className="cursor-pointer hover:opacity-70 text-primary"
+							onClick={() => {
+								setMobileTab("listTab");
+								setSelectedFilters({
+									...selectedFilters,
+									cityState: {
+										[items[0].fields.cityState]: true
+									}
+								});
+								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;

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

@@ -0,0 +1,113 @@
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import { capitalize } from '~/util/stringUtils';
+import PillWrapper from '~/components/modules/buttons/pill-wrapper';
+import CommutePill from "~/components/modules/buttons/commute-pill";
+import React from 'react'
+
+const FieldMapper = ({
+	item,
+	fieldsShown,
+	specialFeatures,
+	handleFavouriteClick,
+	isFavorite
+}) => {
+	const orderedFields = fieldsShown.filter(field => field in item.fields);
+
+	const specialFeaturePills = (field, mobile = false) =>
+	{
+		return field === 'position' && specialFeatures &&
+		Object.entries(specialFeatures).map(([featureKey, featureLabel]) =>
+		{
+			return item.fields[featureKey] === 1 && (
+				<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
+			);
+		});
+	};
+
+	return (
+		<>
+			{orderedFields.map(field => {
+				let value = item.fields[field];
+				return (
+					<Grid.Item
+						key={field}
+						className="hidden md:block"
+					>
+						<span className="sr-only">{capitalize(field)}</span>
+						{value}
+						<br/>
+						{specialFeaturePills(field)}
+					</Grid.Item>
+				);
+			})}
+			<Grid.Item className="md:hidden">
+				{fieldsShown.includes("position") &&
+					<>	<div className="flex items-start">
+						<div className="flex justify-between items-center min-w-[100%]"> {/* Use percentage for minimum width */}
+							<h3 className="font-bold mb-3 flex-1">{item.fields.position}</h3>
+							<div className="flex justify-end pb-2">
+								<Icon
+									icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+									size="w-3.5 h-3.5"
+									iconClasses={isFavorite ? "text-primary" : ""}
+									className={`transition-opacity duration-300 cursor-pointer
+									${isFavorite ? "opacity-100" : "text-uiText/60 group-hover:opacity-100"}
+									`}
+									onClick={e => handleFavouriteClick(e)}
+								/>
+							</div>
+						</div>
+
+					</div>
+					{specialFeatures && <div className='pb-4'>{specialFeaturePills("position", true)} </div>}
+
+				  </>
+
+				}
+
+				<ul className="space-y-2 text-xs">
+
+					{[
+						{
+							field: "category",
+							name: "Category",
+							icon: "icon-park-solid:tree-list"
+						},
+						{
+							field: "schedule",
+							name: "Schedule",
+							icon: "gravity-ui:clock-fill"
+						},
+						{
+							field: "cityState",
+							name: "Location",
+							icon: "fluent:location-16-filled"
+						},
+						{
+							field: "travelTime",
+							name: "Commute",
+							icon: "ri:pin-distance-fill"
+						}
+					].map(listItem => (
+						(fieldsShown.includes(listItem.field) && item.fields[listItem.field]) &&
+							<li
+								key={listItem.field}
+								className="flex gap-2"
+							>
+								<Icon
+									icon={listItem.icon}
+									size="w-3.5 h-3.5"
+									className="text-uiAccent/30"
+								/>
+								<span className="sr-only">{listItem.name}</span>
+								{item.fields[listItem.field]}
+							</li>
+					))}
+				</ul>
+			</Grid.Item>
+		</>
+	);
+};
+
+export default FieldMapper;

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

@@ -0,0 +1,90 @@
+import Button from "~/components/modules/buttons/default";
+import { useState, useEffect } from "react";
+import React from 'react'
+
+const SORT_STATE = {
+	notSorted: "not-sorted",
+	sortedAsc: "sorted-asc",
+	sortedDesc: "sorted-desc"
+};
+
+const HeaderItem = ({
+	className,
+	children,
+	field,
+	setSortSetting,
+	sortSetting,
+	isSortable,
+	...rest
+}) => {
+	const [isSorted, setIsSorted] = useState(SORT_STATE.notSorted);
+
+	const handleChange = field => {
+		if(isSortable === false)
+			return;
+		let setting = {
+			field: field,
+			type: isSorted === SORT_STATE.sortedAsc ? "desc" : "asc"
+		};
+		setSortSetting(setting);
+		isSorted === SORT_STATE.notSorted
+			? setIsSorted(SORT_STATE.sortedAsc)
+			: isSorted === SORT_STATE.sortedAsc
+				? setIsSorted(SORT_STATE.sortedDesc)
+				: setIsSorted(SORT_STATE.sortedAsc);
+	};
+
+	useEffect(() => {
+		if (sortSetting?.field != null && sortSetting.field != field) {
+			setIsSorted(SORT_STATE.notSorted);
+		} else if (
+			sortSetting?.field != null &&
+			isSorted == SORT_STATE.notSorted &&
+			sortSetting.field == field
+		) {
+			setIsSorted(
+				sortSetting.type == "asc"
+					? SORT_STATE.sortedAsc
+					: SORT_STATE.sortedDesc,
+			);
+		}
+	}, [sortSetting, isSorted, field]);
+
+	return (
+		<Button.Btn
+			onClick={() => handleChange(field)}
+			variant="none"
+			className={`
+				p-2 rounded-none text-left normal-case font-bold hover:bg-uiAccent/5 focus:bg-uiAccent/5
+				${className ?? ""}
+			`}
+			{...rest}
+		>
+			<Button.Body>
+				{children}
+				{isSortable && (
+					<div className="flex flex-col pr-2">
+						<Button.Icon
+							icon="bi:caret-up-fill"
+							size="w-2.5 h-2.5"
+							className={`
+								transition-opacity
+								${isSorted === "sorted-asc" ? "opacity-100 text-primary" : "opacity-30"}
+							`}
+						/>
+						<Button.Icon
+							icon="bi:caret-down-fill"
+							size="w-2.5 h-2.5"
+							className={`
+								transition-opacity
+								${isSorted === "sorted-desc" ? "opacity-100" : "opacity-30"}
+							`}
+						/>
+					</div>
+				)}
+			</Button.Body>
+		</Button.Btn>
+	);
+};
+
+export default HeaderItem;

package/src/components/modules/maps/list/header.js

@@ -0,0 +1,46 @@
+import { twMerge } from "tailwind-merge";
+import Grid from "~/components/modules/grid";
+import HeaderItem from "~/components/modules/maps/list/header-item";
+import React from 'react'
+
+const ListHeader = ({
+	className,
+	fieldsShown,
+	fieldNames,
+	fieldIsSortable = true,
+	setSortSetting,
+	sortSetting
+}) => {
+	return (
+		<Grid
+			columns="grid-flow-col auto-cols-fr"
+			gap="gap-0"
+			isAnimated={false}
+			className={twMerge`
+				pl-6 pr-8 hidden md:grid flex-auto bg-uiAccent/10 border-b border-uiAccent/10 sticky top-0 z-10 padding-bottom:20px
+				${className ?? ""}
+			`}
+		>
+			{fieldsShown.map(field => (
+				<HeaderItem
+					key={field}
+					isSortable={fieldIsSortable}
+				    sortSetting={sortSetting}
+					field={field}
+					setSortSetting={setSortSetting}
+				>
+					{fieldNames[field]}
+				</HeaderItem>
+			))}
+			<HeaderItem key={"favorite"}
+				isSortable={false}
+				field={"favorite"}
+			>
+				Favorite
+			</HeaderItem>
+
+		</Grid>
+	);
+};
+
+export default ListHeader;

package/src/components/modules/maps/list/index.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Icon } from "@iconify/react";
+import Accordion from "~/components/modules/accordions/default";
+import Header from "~/components/modules/maps/list/header";
+import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
+import useListLogic from '~/hooks/useList';
+import Sort from '~/components/modules/filter/sort';
+import Loading from "~/util/loading";
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import ListingDetails from "~/components/modules/jobListing/listing-details";
+
+const ItemsList = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	specialFeatures
+}) => {
+
+	const {
+		itemLimit,
+		sortSetting,
+		loader,
+		scrollContainerRef,
+		itemRefs,
+		setSortSetting
+	} = useListLogic();
+	const { selectedListItem } = useMap();
+	const { mapItems, filteredListings, loading, commuteLocation } = useMapList();
+	const itemExpandedContent = (item, recruiters) =>
+		item ? <ListingDetails item={item} recruiters={recruiters} /> : null;
+	if(!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0){
+		fieldsShown.push('travelTime');
+		fieldNames['travelTime'] = 'Commute';
+	}else if(fieldsShown.includes('travelTime') && !commuteLocation){
+		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
+	}
+
+	return (
+		<div className="relative bg-white md:px-4 flex flex-col">
+			<div className="flex flex-wrap items-center justify-between gap-4 md:mb-2 p-3 md:p-0 bg-uiAccent/10 md:bg-transparent border-b md:border-none border-uiAccent/20">
+				<h2 className="text-gray-500 font-semibold text-xs md:text-sm">
+					{loading &&
+						<span>Loading...</span>
+					}
+					{!loading &&
+						<span>{filteredListings.length} results</span>
+					}
+				</h2>
+				<div className="block md:hidden">
+					<Sort
+						fields={fieldsShown}
+						setSortSetting={setSortSetting}
+						fieldNames={fieldNames}
+					/>
+				</div>
+			</div>
+			<div>
+				<Header
+					setSortSetting={setSortSetting}
+					sortSetting={sortSetting}
+					fieldsShown={fieldsShown}
+					fieldNames={fieldNames}
+				/>
+			</div>
+			<div
+				ref={scrollContainerRef}
+				className={`
+					flex-grow overflow-y-auto
+					${showMap ? "md:max-h-45vh max-h-[100vh]" : "md:max-h-95vh max-h-[95vh]"}
+				`}
+			>
+				{loading ? (
+					<div className="flex justify-center items-center pt-20">
+						<Loading />
+					</div>
+				) : (
+					<Accordion className="divide-y divide-uiAccent/10 z10000" defaultValue={selectedListItem?.id}>
+						{filteredListings.slice(0, itemLimit).map(item => {
+							return (<MapAccordionItem
+								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;

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

@@ -0,0 +1,21 @@
+import { twMerge } from 'tailwind-merge';
+import React from 'react'
+const CardItemExpand = ({
+	className,
+	content,
+	...props
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'flex flex-col lg:flex-row flex-wrap items-stretch gap-x-4 w-full lg:pt-2 border-t border-uiAccent/20',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardItemExpand;

package/src/components/modules/maps/list/item-expand-card/recruiter-contact-nav.js

@@ -0,0 +1,48 @@
+import Button from '~/components/modules/buttons/default';
+import React from 'react'
+const RecruiterContactNav = ({
+	children,
+	className
+}) => {
+	return (
+		<nav
+			className={`
+				inline-flex items-center justify-between gap-2 mt-2
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</nav>
+	);
+};
+
+export const NavButton = ({
+	className,
+	href,
+	target = '_self',
+	title,
+	icon,
+	...props
+}) => {
+	return (
+		<Button.Anchor
+			href={href}
+			variant="icon"
+			size="sq"
+			target={target}
+			title={title}
+			className={className ?? ''}
+			{...props}
+		>
+			<span className="sr-only">{title}</span>
+			<Button.Icon
+				icon={icon}
+				size="w-8 h-8"
+			/>
+		</Button.Anchor>
+	);
+};
+
+RecruiterContactNav.Button = NavButton;
+
+export default RecruiterContactNav;

package/src/components/modules/maps/list/item-expand-card/recruiter-details.js

@@ -0,0 +1,67 @@
+import { twMerge } from 'tailwind-merge';
+import React from 'react'
+const RecruiterDetails = ({
+	contactNav,
+	className,
+	children
+}) => {
+	return (
+		<div
+			className={twMerge`
+				grow
+				${className ?? ''}
+			`}
+		>
+			{children}
+
+			{contactNav &&
+				<div className="inline-flex">
+					{contactNav}
+				</div>
+			}
+		</div>
+	);
+};
+
+export const Title = ({
+	as = 'h4',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				text-base font-medium
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const Text = ({
+	as = 'p',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				text-sm text-uiText/60
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+RecruiterDetails.Title = Title;
+RecruiterDetails.Text = Text;
+
+export default RecruiterDetails;

package/src/components/modules/maps/list/item-expand-card/recruiter-headshot.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const RecruiterHeadshot = ({
+	image,
+	alt,
+	className,
+	imageClassName
+}) => {
+	return (
+		<div className={className ?? ''}>
+			<img
+				src={image}
+				width="96"
+				height="96"
+				alt={alt}
+				className={imageClassName ?? ''}
+			/>
+		</div>
+	);
+};
+
+export default RecruiterHeadshot;