@abcagency/hc-ui-components 1.0.0

package/src/index.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import PageHead from '~/util/page-head';
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/modules/filter';
+import MapList from '~/components/modules/maps/map-list';
+import { useLoadScript } from '@react-google-maps/api';
+import { MapProvider } from '~/contexts/mapContext';
+import { PlacesProvider } from '~/contexts/placesContext';
+import { MapListProvider } from '~/contexts/mapListContext';
+import { BrowserRouter as Router } from 'react-router-dom';
+import './index.css';
+import RootLayout from './components/layout/layout';
+import { getMapConfig } from '~/services/configService';
+import { setClientAuthKey } from '~/clientToken.js'; 
+
+const libraries = ['places'];
+
+export const HireControlMap = ({ clientToken }) => {
+  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();
+
+    const handlePopState = (event) => {
+      window.location.reload();
+    };
+
+    window.addEventListener('popstate', handlePopState);
+
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, [clientToken]);
+
+  const { isLoaded } = useLoadScript({
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
+    libraries: libraries,
+  });
+
+  return (
+    <Router>
+      <RootLayout>
+          {isLoaded && siteConfig && (
+            <HomeBody siteConfig={siteConfig} />
+          )}
+      </RootLayout>
+    </Router>
+  );
+};
+
+const HomeBody = ({ siteConfig }) => {
+  const resetFilters = false;
+
+  return (
+    <MapListProvider siteConfig={siteConfig} resetFilters={resetFilters}>
+      <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,
+            },
+          }}
+        >
+          <PageHead title='' />
+          <Grid
+            as='section'
+            id='job-search-interface'
+            columns='md:grid-cols-[1fr_2.5fr] lg:grid-cols-[1fr_3.5fr]'
+            gap='gap-0'
+            autoRows={false}
+            className='items-stretch h-screen min-h-[30rem] divide-x divide-uiAccent/20'
+          >
+            <Grid.Item className='bg-gray-100'>
+              <Filter showMap={siteConfig.showMap} className='hidden md: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>
+  );
+};
+
+export default HireControlMap;

package/src/services/configService.js

@@ -0,0 +1,16 @@
+import api from "../apis/hcApi";
+
+export const getMapConfig = async () => {
+
+    try {
+        const response = await api.get(`/MapConfig`);
+        return response;  
+    } catch (error) {
+        console.error("Error retrieving map configuration:", error);
+        throw error;
+    }
+};
+
+export default {
+    getMapConfig
+};

package/src/services/googlePlacesNearbyService.js

@@ -0,0 +1,33 @@
+export const searchNearbyPlaces = async (typesArray, location, radius) => {
+    const url = 'https://places.googleapis.com/v1/places:searchNearby';
+    const headers = {
+        'Content-Type': 'application/json',
+        'X-Goog-Api-Key': process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
+        'X-Goog-FieldMask': 'places.location,places.displayName,places.types'
+    };
+    const data = {
+        includedTypes: typesArray,
+        maxResultCount: 20,
+        locationRestriction: {
+            circle: {
+                center: location,
+                radius: radius
+            }
+        }
+    };
+
+    try {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: headers,
+            body: JSON.stringify(data)
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Error making the Nearby Search request:', error);
+        throw error;
+    }
+};

package/src/services/listingAggregatorService.js

@@ -0,0 +1,42 @@
+import { getListings } from "./listingService";
+import { getRecruiters } from "./recruiterService";
+import { getListingEntities } from "./listingEntityService";
+import { getDistinctItemsByProximity } from "../util/mapUtil";
+
+const fetchListings = async (query, siteConfig) => {
+	try {
+		const listingsResult = await getListings(
+			siteConfig.companyId,
+			5000,
+			1,
+			query,
+		);
+		const recruiterIds = [
+			...new Set(listingsResult.map(listing => listing.recruiterId))
+		];
+		const fetchedRecruiters = await getRecruiters(recruiterIds);
+
+		const distinctEntityIds = [
+			...new Set(listingsResult.map(listing => listing.entityId))
+		];
+		const fetchedEntities = await getListingEntities(
+			distinctEntityIds
+		);
+
+		const distinctItems = getDistinctItemsByProximity(
+			listingsResult,
+			fetchedEntities,
+		);
+		return {
+			listingsResult,
+			fetchedRecruiters,
+			fetchedEntities,
+			distinctItems
+		};
+	} catch (error) {
+		console.error("Error fetching listings:", error);
+		throw error;
+	}
+};
+
+export default fetchListings;

package/src/services/listingEntityService.js

@@ -0,0 +1,14 @@
+import api from "../apis/hcApi";
+export const getListingEntities = async (entityIds, origin = '') => {
+	try {
+		const response = await api.post(`/ListingEntities?origin=${origin}`, entityIds);
+		return response;
+	} catch (error) {
+		console.error("Error fetching listing entities:", error);
+		throw error;
+	}
+};
+
+export default {
+	getListingEntities
+};

package/src/services/listingService.js

@@ -0,0 +1,28 @@
+import api from "../apis/hcApi";
+
+
+export const getListings = async companyId => {
+	try {
+		var x = '';
+		const response = await api.get(`/Listings`);
+		return response;
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
+};
+
+export const getListingDetails = async listingId => {
+	try {
+		const response = await api.get(`/ListingDetails/${listingId}`);
+		return response;
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
+};
+
+export default {
+	getListings,
+	getListingDetails
+};

package/src/services/recruiterService.js

@@ -0,0 +1,17 @@
+import api from "../apis/hcApi";
+
+export const getRecruiters = async recruiterIds => {
+	try {
+		const params = recruiterIds.map(id => `recruiterIds=${id}`).join("&");
+
+		const response = await api.get(`/Recruiters?${params}`);
+		return response.data;
+	} catch (error) {
+		console.error("Error fetching recruiters:", error);
+		throw error;
+	}
+};
+
+export default {
+	getRecruiters
+};

package/src/styles/globals.css

@@ -0,0 +1,25 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+/* @layer base {
+	html {
+		@apply text-400 text-uiText [scroll-behavior:smooth];
+	}
+}
+
+@layer components {
+	.track * {
+		@apply pointer-events-none;
+	}
+
+	.stretched-link::after {
+		@apply content-[''] absolute inset-0 z-[1] pointer-events-auto bg-transparent;
+	}
+}
+
+.fit-content{
+	height:fit-content;
+} */

package/src/tailwind/preset.default.js

@@ -0,0 +1,15 @@
+
+module.exports = {
+	theme: {
+		extend: {
+			colors: {
+				"uiText": "#141414",
+				"uiAccent": "#0f172a",
+				"primary": "#002575",
+				"primaryDark": "#001f5f",
+				"secondary": "#ff612b",
+				"secondaryDark": "#bf900d"
+			},
+		}
+	}
+};

package/src/tailwind/tailwind.config.js

@@ -0,0 +1,126 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+    content: [
+        '../**/*.{js,ts,jsx,tsx,mdx}',
+        '../components/**/*.{js,ts,jsx,tsx,mdx}',
+      ],
+      presets: [require(`./preset.default.js`)],
+  theme: {
+    extend: {
+      animation: {
+        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+      },
+      container: {
+        center: true,
+      },
+      cursor: {
+        grab: "grab",
+      },
+      maxHeight: {
+        "45vh": "45vh",
+      },
+      colors: {
+        gray: {
+          850: "#141414",
+        },
+      },
+      fontFamily: {
+        sans: ["var(--font-roboto-flex)", ...defaultTheme.fontFamily.sans],
+      },
+      fontSize: {
+        "2xs": "0.65rem",
+        300: "clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem)",
+        400: "clamp(0.88rem, 0.83rem + 0.24vw, 1rem)",
+        450: "clamp(1rem, 1rem + 0.33vw, 1.33rem)",
+        500: "clamp(1.09rem, 1rem + 0.47vw, 1.33rem)",
+        600: "clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem)",
+        700: "clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem)",
+        800: "clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem)",
+        900: "clamp(2.67rem, 2.07rem + 3vw, 4.21rem)",
+        1000: "clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)",
+      },
+      keyframes: {
+        slideDown: {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        slideUp: {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        overlayShow: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        contentShow: {
+          from: { opacity: 0, transform: "scale(0.96)" },
+          to: { opacity: 1, transform: "scale(1)" },
+        },
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            video: {
+              "margin-bottom": 0,
+              "margin-top": 0,
+            },
+          },
+        },
+        sm: {
+          css: {
+            video: {
+              "margin-bottom": 0,
+              "margin-top": 0,
+            },
+          },
+        },
+        md: {
+          css: {
+            video: {
+              "margin-bottom": 0,
+              "margin-top": 0,
+            },
+          },
+        },
+        lg: {
+          css: {
+            video: {
+              "margin-bottom": 0,
+              "margin-top": 0,
+            },
+          },
+        },
+        xl: {
+          css: {
+            video: {
+              "margin-bottom": 0,
+              "margin-top": 0,
+            },
+          },
+        },
+        "2xl": {
+          css: {
+            video: {
+              "margin-bottom": 0,
+              "margin-top": 0,
+            },
+          },
+        },
+      },
+      zIndex: {
+        "-1": "-1",
+        1: "1",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("tailwindcss-animate"),
+  ],
+};

package/src/util/arrayUtil.js

@@ -0,0 +1,3 @@
+export const onlyUnique = (value, index, array) => {
+	return array.indexOf(value) === index;
+};

package/src/util/fieldMapper.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Grid from "~/components/modules/grid";
+import { capitalize } from "./stringUtils";
+const mapFieldsToGridItems = (item, fieldsShown) => {
+	const orderedFields = fieldsShown.filter(field => field in item.fields);
+
+	return orderedFields.map(field => {
+		let value = item.fields[field];
+
+		return (
+			<Grid.Item key={field}>
+				<span className="sr-only">{capitalize(field)}</span>
+				{value}
+			</Grid.Item>
+		);
+	});
+};
+
+export default mapFieldsToGridItems;

package/src/util/filterUtil.js

@@ -0,0 +1,195 @@
+import { getDistinctItemsByProximity } from "./mapUtil";
+
+export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = null) => {
+	const options = new Set();
+	listings.forEach(listing => {
+		if (listing.fields[field]) {
+			options.add(listing.fields[field]);
+		}
+	});
+
+	const optionCounts = {};
+	options.forEach(option => {
+		optionCounts[option] = 0;
+	});
+
+	filteredListings.forEach(listing => {
+		const value = listing.fields[field];
+		if (value && optionCounts.hasOwnProperty(value)) {
+			optionCounts[value] += 1;
+		}
+	});
+
+	return Array.from(options)
+		.sort()
+		.map(option => ({
+			name: option,
+			count: optionCounts[option] || 0
+		}))
+		.filter(option => !(excludeZeroCount === true && option.count === 0));
+};
+
+export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig, favorites) => {
+	const specialFeatures = siteConfig.specialFeatures;
+	const featureCounts = Object.keys(specialFeatures).sort().reduce((acc, key) => {
+		acc[specialFeatures[key]] = 0;
+		return acc;
+	}, {});
+
+	filteredListings.forEach(listing => {
+		Object.entries(specialFeatures).forEach(([featureKey, featureName]) => {
+			if (listing.fields[featureKey] === 1) {
+				featureCounts[featureName] += 1;
+			}
+		});
+	});
+
+	const specialFeatureOptions = Object.entries(featureCounts).map(([name, count]) => ({
+		name,
+		count
+	}));
+
+	for (let option of specialFeatureOptions) {
+		if (option.name === 'Favorite') {
+			option.count = filteredListings.filter(x => favorites.includes(x.id)).length;
+		}
+	}
+
+	return specialFeatureOptions;
+};
+
+const getPointsOfInterestOptions = pointsOfInterestNames => {
+	return Object.entries(pointsOfInterestNames).sort().map(([key, name]) => ({
+		key,
+		name
+	}));
+};
+
+export const generateFilterOptions = (
+	filteredListings,
+	allListings,
+	siteConfig,
+	filterOptions,
+	parentField = null,
+	favorites
+) => {
+	if (allListings.length > 0) {
+		const dynamicFilters = siteConfig.fieldFiltersShown.map(fieldName => {
+			if (fieldName === parentField && filterOptions?.filters) {
+				return filterOptions.filters.find(filter => filter.id === fieldName);
+			}
+			if(fieldName == "specialFeatures"){
+				return {
+					id: fieldName,
+					title: siteConfig.fieldNames[fieldName],
+					items: getSpecialFeatureOptions(allListings, filteredListings, siteConfig, favorites).sort()
+				};
+			}
+			return {
+				id: fieldName,
+				title: siteConfig.fieldNames[fieldName],
+				items: getFilterOptions(allListings, filteredListings, fieldName)
+			};
+		});
+
+		const locations =
+				siteConfig.locationFiltersShown.map((fieldName, index) => {
+					if(index === 0 && filterOptions?.locations){
+						return filterOptions.locations.find(filter => filter.id === fieldName);
+					}
+					return{
+						id: fieldName,
+						title: siteConfig.fieldNames[fieldName],
+						items: getFilterOptions(allListings, filteredListings, fieldName, true)
+					};
+				});
+
+		const pointsOfInterest = {
+			id: "pointsOfInterest",
+			title: siteConfig.pointsOfInterestConfig.title,
+			items: getPointsOfInterestOptions(
+				siteConfig.pointsOfInterestConfig.pointsOfInterestNames,
+			)
+		};
+
+		return {
+			filters: dynamicFilters,
+			locations: locations,
+			pointsOfInterest: pointsOfInterest
+		};
+	}
+
+	return null;
+};
+
+export const applyFilters = (
+	allListings,
+	selectedFilters,
+	query,
+	listingEntities,
+	favorites,
+	siteConfig
+) => {
+	let results = allListings;
+	let invertedSpecialFeaturesMap;
+	if(siteConfig.specialFeatures){
+	  invertedSpecialFeaturesMap = Object.entries(siteConfig.specialFeatures).reduce((acc, [key, value]) => {
+			acc[value] = key;
+			return acc;
+	  }, {});
+
+	}
+	const hasFavorite = !!selectedFilters.specialFeatures && !!selectedFilters.specialFeatures.Favorite;
+
+	if(hasFavorite && selectedFilters.specialFeatures.Favorite == true){
+	  results =  results.filter(x => favorites.includes(x.id));
+	}
+	var favorite;
+	if(hasFavorite){
+		favorite = selectedFilters.specialFeatures.Favorite;
+		delete selectedFilters.specialFeatures.Favorite;
+	}
+	for (const [field, filterItems] of Object.entries(selectedFilters)) {
+		const formattedField = field;
+		if (field === "pointsOfInterest") continue;
+		if (field === "specialFeatures" && invertedSpecialFeaturesMap && Object.keys(filterItems).length > 0) {
+			results = results.filter(listing => {
+				return Object.entries(filterItems).some(([filterName, filterValue]) => {
+					const listingFieldName = invertedSpecialFeaturesMap[filterName];
+					return filterValue && listing.fields[listingFieldName] === 1;
+				});
+			});
+		} else if (Object.keys(filterItems).length > 0) {
+			results = results.filter(listing =>
+				filterItems.hasOwnProperty(listing.fields[formattedField]),
+			);
+		}
+	}
+	if (query) {
+		results = results.filter(listing =>
+			Object.values(listing.fields)?.some(value =>
+				value?.toString().toLowerCase().includes(query.toLowerCase()),
+			),
+		);
+	}
+	const distinctItems = getDistinctItemsByProximity(results, listingEntities);
+	if(hasFavorite){
+		selectedFilters.specialFeatures.Favorite = favorite;
+	}
+	return { filteredListings: results, mapItems: distinctItems };
+};
+
+export const filterListingsByLocation = (
+	allListings,
+	selectedLocation,
+	listingEntities,
+) => {
+	let results = allListings;
+	if (selectedLocation !== null) {
+		results = results.filter(item =>
+			selectedLocation.items.hasOwnProperty(item.id),
+		);
+	}
+	const mapItems = getDistinctItemsByProximity(results, listingEntities);
+	return { filteredListings: results, mapItems: mapItems };
+};

package/src/util/loading.js

@@ -0,0 +1,17 @@
+import Icon from '~/components/modules/icon';
+import React from 'react'
+
+const Loading = ({ color = '#c0c0c0' }) => {
+	return (
+		<div className="flex items-center justify-center w-full h-full">
+			<Icon
+				icon="ph:spinner"
+				className="animate-spin text-gray-300"
+				width="40"
+				height="40"
+			/>
+		</div>
+	);
+};
+
+export default Loading;