@abcagency/hc-ui-components 1.3.23 → 1.3.24

package/src/types/Listings.ts

@@ -0,0 +1,32 @@
+import { ListingFields } from './ListingFields';
+import { Recruiter } from './Recruiter';
+import { ListingEntity } from './ListingEntity';
+import { ContentSection } from './ContentSection';
+import { SimilarListing } from './SimilarListing';
+
+export type Listing = {
+  id: number;
+  fields?: ListingFields;
+  entityId?: number;
+  applyUrl?: string;
+  applyOnline?: number;
+  detailsUrl?: string;
+  displayOnSite: number;
+  displayRecruiter: number;
+  recruiterId?: number;
+  description1?: string;
+  description2?: string;
+  description3?: string;
+  description4?: string;
+  custom1: string;
+  custom2: string;
+  custom3: string;
+  custom4: string;
+  custom5: string;
+  customFlag1: number;
+  slug?: string;
+  recruiter?: Recruiter;
+  entity?: ListingEntity;
+  contentSections?: ContentSection[];
+  similarListings?: SimilarListing[];
+}

package/src/types/Recruiter.ts

@@ -0,0 +1,9 @@
+export type Recruiter = {
+	id?: number;
+	email?: string;
+	firstName?: string;
+	lastName?: string;
+	linkedInUrl?: string;
+	mobilePhone?: string;
+	headshot?: string;
+  }

package/src/types/SimilarListing.ts

@@ -0,0 +1,24 @@
+export type SimilarListing = {
+	id: number;
+	city: string;
+	companyName: string;
+	companyId: number;
+	domain: string;
+	refreshedPubDate?: Date;
+	clientJobUrl: string;
+	refreshNum: number;
+	requestURI: string;
+	schedule: string;
+	scheduleId?: number;
+	shift: string;
+	sponsored: boolean;
+	stateAbbrev: string;
+	subTitle: string;
+	title: string;
+	uniqueId: string;
+	zip: string;
+	slug?: string;
+	dateCreated: Date;
+	categoryId: number;
+	categoryClassId: number;
+  };

package/src/types/config/Colors.ts

@@ -0,0 +1,8 @@
+export type Colors = {
+	uiText: string;
+	uiAccent: string;
+	primary: string;
+	primaryDark: string;
+	secondary: string;
+	secondaryDark: string;
+  }

package/src/types/config/MapConfig.ts

@@ -0,0 +1,31 @@
+import { Colors } from "./Colors";
+import { PointsOfInterestConfig } from "./PointsOfInterestConfig";
+import { SearchConfig } from "./SearchConfig";
+
+export type MapConfig = {
+	title: string;
+	titleShort: string;
+	description: string;
+	jobsDomain: string;
+	useDetailsPostMessage: boolean;
+	author: string;
+	url: string;
+	logo: string;
+	companyName: string;
+	shareImage: string;
+	clientAuthKey: string;
+	colors: Colors;
+	hideLocations: boolean;
+	fieldsShown: string[];
+	fieldFiltersShown: string[];
+	locationFiltersShown: string[];
+	fieldNames: Record<string, string>;
+	specialFeatures: Record<string, string>;
+	searchConfig: SearchConfig;
+	internalApplyLink: string;
+	useApplyDialog: boolean;
+	pointsOfInterestConfig: PointsOfInterestConfig;
+	showMap: boolean;
+	companyId: string;
+	SubcategoryRequireCategory:boolean;
+  }

package/src/types/config/PointsOfInterestConfig.ts

@@ -0,0 +1,13 @@
+export type PointsOfInterestConfig = {
+	title: string;
+	pointsOfInterestNames: Record<string, string>;
+	pointsOfInterestIcons: Record<string, string>;
+	placeMarkerColors: {
+	  innerFillColor: string;
+	  innerStrokeColor: string;
+	  outerFillColor: string;
+	  outerStrokeColor: string;
+	};
+	placeMarkerSize: number;
+	placeMappings: Record<string, string[]>;
+  }

package/src/types/config/SearchConfig.ts

@@ -0,0 +1,4 @@
+export type SearchConfig = {
+	label: string;
+	placeholder: string;
+  }

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,22 @@
+import React from 'react';
+
+import Grid from '~/components/modules/grid';
+
+import { capitalize } from '~/util/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="hc-sr-only">{capitalize(field)}</span>
+				{value}
+			</Grid.Item>
+		);
+	});
+};
+
+export default mapFieldsToGridItems;

package/src/util/filterUtil.js

@@ -0,0 +1,239 @@
+import { getDistinctItemsByProximity } from '~/util/mapUtil';
+
+import Fuse from 'fuse.js';
+
+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,
+	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 = searchResults(results, query);
+	}
+	const distinctItems = getDistinctItemsByProximity(results, listingEntities);
+	if (hasFavorite) {
+		selectedFilters.specialFeatures.Favorite = favorite;
+	}
+	return { filteredListings: results, mapItems: distinctItems };
+};
+
+function searchResults(results, query) {
+	const fields = [
+		'id',
+		'fields.posted',
+		'fields.subtitle',
+		'fields.education',
+		'fields.position',
+		'fields.category',
+		'fields.categoryclass',
+		'fields.shift',
+		'fields.citystate',
+		'fields.city',
+		'fields.state',
+		'fields.schedule',
+		'fields.customflag1',
+		'fields.bonus',
+		'fields.remote',
+		'fields.useclientjoburl',
+		'fields.datecreated',
+		'fields.datelastedited'
+	];
+
+	const options = {
+		includeScore: true,
+		threshold: 0.3,
+		keys: fields
+	};
+
+	const fuse = new Fuse(results, options);
+	const lowerCaseQuery = query.toLowerCase();
+	const queryTerms = lowerCaseQuery.split(' ');
+
+	const exactIdMatch = results.find(result => result.id.toString() === query);
+	if (exactIdMatch) {
+		return [exactIdMatch];
+	}
+
+	const fuseQuery = queryTerms.map(term => ({
+		$or: fields.map(field => ({ [field]: term }))
+	}));
+
+	const fuseResults = fuse.search({ $and: fuseQuery });
+
+	return fuseResults.map(result => result.item);
+}
+
+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 React from 'react';
+import Icon from '~/components/modules/icon';
+
+const Loading = () => {
+	return (
+		<div className="hc-flex hc-items-center hc-justify-center hc-w-full hc-h-full">
+			<Icon
+				icon="ph:spinner"
+				className="hc-animate-spin hc-text-gray-300"
+				width="40"
+				height="40"
+			/>
+		</div>
+	);
+};
+
+export default Loading;

package/src/util/localStorageUtil.ts

@@ -0,0 +1,34 @@
+export const getStorageObject = <T>(item: string, defaultItem: T | null = null): T | null => {
+	if (typeof window === 'undefined') return defaultItem;
+	const storageItem = localStorage.getItem(item);
+	if (storageItem === null || storageItem === 'undefined') {
+		localStorage.removeItem(item);
+		return defaultItem;
+	}
+	try {
+		return JSON.parse(storageItem) ?? defaultItem;
+	} catch (error) {
+		console.error(`Error parsing JSON for ${item}:`, error);
+		return defaultItem;
+	}
+};
+
+export const getStorageItem = (item: string, defaultItem: string | null = null): string | null => {
+	if (typeof window === 'undefined') return defaultItem;
+	const storageItem = localStorage.getItem(item);
+	if (storageItem === null || storageItem === 'undefined') {
+		localStorage.removeItem(item);
+		return defaultItem;
+	}
+	return storageItem ?? defaultItem;
+};
+
+export const setStorageObject = (key: string, item: any): void => {
+	if (typeof window === 'undefined') return;
+	if (item === undefined) return;
+	try {
+		localStorage.setItem(key, JSON.stringify(item));
+	} catch (err) {
+		console.error(`Error setting item ${key} in localStorage:`, err);
+	}
+};

package/src/util/mapIconUtil.js

@@ -0,0 +1,180 @@
+/* eslint-disable no-undef */
+import { placeTypes } from '~/constants/placeTypes';
+
+const customSVGIcon = (
+	type,
+	fillColor = "#FFFFFF",
+	strokeColor = "#000000",
+	backgroundFill = "#000000",
+	backgroundStroke = "#000000"
+) => {
+	let svg = "";
+	switch (type) {
+		case placeTypes.FOOD:
+			svg = `
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M25.7,36.6l0.6,15.8c0.1,2.4-2.3,2.4-2.3,2.4s-2.4,0-2.3-2.4l0.6-15.8c0.1-2-4.3-2.9-4-4.9l2.3-13.3h1.1
+						l-0.6,9.7l1.7,1.2l0.6-10.9h1.1l0.6,10.9l1.7-1.2l-0.6-9.7h1.1l2.3,13.3C29.7,33.7,25.6,34.6,25.7,36.6z"/>
+					<path class="st0" d="M40,52.4c0,2.4-2.3,2.4-2.3,2.4s-2.5,0-2.3-2.4L36.6,39c-0.9,0-3.4-0.4-3.4-2.4v-6.1c0-2.4,0.3-6.4,1.2-8.2
+						c1.1-2.4,3.9-4,5.6-4C40,18.3,40,52.4,40,52.4z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.TOURIST_ATTRACTION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M27,18.5c-1.2,0-1.7,1.1-2.2,2.2L23.7,23h-4.5c-1.9,0-3.4,1.5-3.4,3.4v11.2c0,1.9,1.5,3.4,3.4,3.4h22.5
+						c1.9,0,3.4-1.5,3.4-3.4V26.4c0-1.9-1.5-3.4-3.4-3.4h-4.5L36,20.8c-0.6-1.1-1-2.2-2.2-2.2H27z M19.2,25.3c0.6,0,1.1,0.5,1.1,1.1
+						c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1C18,25.8,18.5,25.3,19.2,25.3z M30.4,25.3c3.7,0,6.7,3,6.7,6.7s-3,6.7-6.7,6.7
+						s-6.7-3-6.7-6.7S26.7,25.3,30.4,25.3z M30.4,28.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
+						S32.3,28.7,30.4,28.7z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.SCHOOL:
+			svg = `
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M39.2,40.6c0,0-4.1,4.6-9.1,4.6S21,40.6,21,40.6v-5.2l9.1,5l9.1-5V40.6z"/>
+					<polygon class="st0" points="44.4,40.4 41.8,40.4 41.8,31.4 30.1,37.8 15.8,30 30.1,22.2 44.4,30 "/>
+					</svg>
+					`;
+			break;
+		case placeTypes.STORE:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<g>
+						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
+							/>
+					</g>
+					<path class="st0" d="M45.4,27.7L42,41.1c-0.1,0.6-0.7,1-1.3,1c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3
+						s1.5-3.3,3.3-3.3H23.3c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3S20,47.2,20,45.4s1.5-3.3,3.3-3.3c-0.6,0-1.2-0.4-1.3-1l-4.1-16.4
+						h-1.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h2.3c0.6,0,1.2,0.4,1.3,1l0.8,3h23.1c0.4,0,0.8,0.2,1.1,0.5
+						C45.4,26.9,45.5,27.3,45.4,27.7z"/>
+					<path d="M41.4,45.5c0-0.4-0.3-0.7-0.7-0.7S40,45.1,40,45.5C40.1,46.2,41.4,46.2,41.4,45.5z"/>
+					<path d="M24,45.5c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7C22.6,46.2,24,46.2,24,45.5z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.TRANSIT_STATION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<g>
+						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
+							/>
+					</g>
+					<path class="st0" d="M26.3,41.3h-2.8L20.7,44h-1.4v-1.4l1.4-1.4c-2.3,0-4.2-1.9-4.2-4.2V26c0-2.3,1.9-4.2,4.2-4.2h9.7
+						c2.3,0,4.2,1.9,4.2,4.2v1.4h-2.8v-2.8H19.3v9.7h6.9v7H26.3z"/>
+					<path class="st0" d="M44.3,43c0,0.5-0.4,1-1,1h-0.8c-0.5,0-1-0.5-1-1.1v-1.7H30.4V43c0,0.5-0.4,1.1-0.9,1.1h-0.9c-0.5,0-1-0.5-1-1
+						v-7.6l2-5.7c0.2-0.6,0.7-0.9,1.4-0.9h10c0.6,0,1.1,0.4,1.3,0.9l2,5.7V43z"/>
+					<circle cx="20.7" cy="37.1" r="1.4"/>
+					<circle cx="41.5" cy="37.1" r="1.4"/>
+					<circle cx="30.4" cy="37.1" r="1.4"/>
+					<polygon points="31,30.2 29.6,34.4 42.4,34.4 40.9,30.2 "/>
+					</svg>
+					`;
+			break;
+		case placeTypes.PLACE_OF_WORSHIP:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M21.3,40.8h-3.8c-1.3,0-2.3-1-2.3-2.3v-4.3c0-0.8,0.5-1.6,1.2-2l4.9-2.7V40.8z"/>
+					<path class="st0" d="M38,40.8h-4.6v-4.6c0-1.7-1.4-3-3-3c-1.7,0-3,1.4-3,3v4.6h-4.6V30c0-0.8,0.4-1.5,1.1-2l1.9-1.2v-5.1l0,0
+						c0-0.4,0.2-0.8,0.4-1.1l3.6-3.6c0.3-0.3,0.8-0.3,1.1,0l3.6,3.6c0.3,0.3,0.4,0.7,0.4,1.1v5.1l1.9,1.2c0.7,0.4,1.1,1.2,1.1,2L38,40.8
+						L38,40.8z"/>
+					<path class="st0" d="M45.6,38.5c0,1.3-1,2.3-2.3,2.3h-3.8V29.5l4.9,2.7c0.7,0.4,1.2,1.2,1.2,2C45.6,34.2,45.6,38.5,45.6,38.5z"/>
+					</svg>
+					`;
+			break;
+	}
+
+	const iconUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+	return iconUrl;
+};
+
+export const iconPath = "M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Zm-.04 5.71c-.32 0-.57-.27-.56-.58 0-.32.27-.57.58-.56.32 0 .57.27.56.58 0 .31-.25.55-.56.56h-.02Z";
+
+export const markerIconProps = (placeMarkerConfigs, type) => {
+
+	const scaledWidth = placeMarkerConfigs.size;
+	const scaledHeight = (scaledWidth * 3) / 2;
+	const iconUrl = customSVGIcon(
+		type,
+		placeMarkerConfigs.colors.innerFillColor,
+		placeMarkerConfigs.colors.innerStrokeColor,
+		placeMarkerConfigs.colors.outerFillColor,
+		placeMarkerConfigs.colors.outerStrokeColor
+	);
+	return {
+		url: iconUrl,
+		scaledSize: new google.maps.Size(scaledWidth, scaledHeight),
+		anchor: new google.maps.Point(scaledWidth / 2, scaledHeight)
+	};
+};
+
+export const iconProps = () => {
+	return {
+		path: iconPath,
+		fillOpacity: 1,
+		strokeWeight: 1.75,
+		scale: 1.6,
+		anchor: new google.maps.Point(12, 17)
+	};
+};
+
+export const markerIcon = markerConfigs => {
+	return {
+		...iconProps(),
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	};
+};
+
+export const markerIconSelected = markerConfigs => {
+	return {
+		...iconProps(),
+		fillColor: markerConfigs.selectedFillColor,
+		strokeColor: markerConfigs.selectedStrokeColor
+	};
+};
+
+export const pinIcon = markerConfigs => {
+	const { fillColor, strokeColor } = markerConfigs;
+
+	const svg = `
+	<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
+		<path d="${iconPath}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="2"/>
+	  </svg>
+	`;
+
+	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+