@abcagency/hc-ui-components 1.0.0

package/src/util/localStorageUtil.js

@@ -0,0 +1,27 @@
+export const getStorageObject = (item, defaultItem = null) =>{
+	if(typeof window == 'undefined') return defaultItem;
+	if(localStorage.getItem(item) == null) return defaultItem;
+	if(localStorage.getItem(item) == 'undefined'){
+		localStorage.removeItem(item);
+	}
+	return JSON.parse(localStorage.getItem(item)) ?? defaultItem;
+};
+
+export const getStorageItem = (item, defaultItem = null) =>{
+	if(typeof window == 'undefined') return defaultItem;
+	if(localStorage.getItem(item) == null) return defaultItem;
+	if(localStorage.getItem(item) == 'undefined'){
+		localStorage.removeItem(item);
+	}
+	return localStorage.getItem(item) ?? defaultItem;
+};
+
+export const setStorageObject = (key, item) =>{
+	if(typeof window == 'undefined') return;
+	if(item == undefined)return;
+	try{
+		localStorage.setItem(key, JSON.stringify(item));
+	}catch(err){
+		console.log(err);
+	}
+};

package/src/util/mapIconUtil.js

@@ -0,0 +1,179 @@
+import { placeTypes } from "../constants/placeTypes";
+import { useLoadScript } from "@react-google-maps/api";
+
+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)}`;
+};
+

package/src/util/mapUtil.js

@@ -0,0 +1,91 @@
+export const getDistinctItemsByProximity = (items, listingEntitiesDetails) => {
+	const clusters = {};
+
+	if (!listingEntitiesDetails) return [];
+
+	const closeItemPairs = findCloseItems(listingEntitiesDetails);
+	if (closeItemPairs.length > 0) {
+		listingEntitiesDetails = adjustItemPositions(
+			listingEntitiesDetails,
+			closeItemPairs,
+		);
+	}
+
+	items?.forEach(item => {
+		if(item.entityId !== -1){
+
+			const entityDetails = listingEntitiesDetails[item.entityId];
+
+			if (!entityDetails) {
+				console.error(`Details not found for entityId: ${item.entityId}`);
+				return;
+			}
+
+			item.mapDetails = entityDetails;
+
+			if (!clusters[item.entityId]) {
+				clusters[item.entityId] = {
+					...item.mapDetails,
+					items: { [item.id]: item }
+				};
+			} else {
+				clusters[item.entityId].items[item.id] = item;
+			}}
+	});
+
+	return Object.values(clusters);
+};
+
+export const findCloseItems = itemsObj => {
+	const closeItems = [];
+	const items = Object.values(itemsObj); // Convert object to array for iteration
+	const proximityThreshold = 0.0001;
+
+	for (let i = 0; i < items.length; i++) {
+		for (let j = i + 1; j < items.length; j++) {
+			const distanceLat = Math.abs(items[i].latitude - items[j].latitude);
+			const distanceLng = Math.abs(items[i].longitude - items[j].longitude);
+			if (
+				distanceLat < proximityThreshold &&
+				distanceLng < proximityThreshold
+			) {
+				closeItems.push({ item1: items[i], item2: items[j] });
+			}
+		}
+	}
+
+	return closeItems;
+};
+
+export const adjustItemPositions = (itemsObj, closeItemPairs) => {
+	const adjustmentValue = 0.0001;
+	const adjustedItems = { ...itemsObj }; // Create a shallow copy of the object
+
+	closeItemPairs.forEach(pair => {
+		if (adjustedItems[pair.item1.id] && adjustedItems[pair.item2.id]) {
+			adjustedItems[pair.item2.id].latitude += adjustmentValue;
+			adjustedItems[pair.item2.id].longitude += adjustmentValue;
+		}
+	});
+
+	return adjustedItems;
+};
+
+export const clusterOptions = (clusterGridSize, fillColor) => {
+	return {
+		gridSize: clusterGridSize,
+		styles:[{
+			url: createSvgDataUri(fillColor),
+			textColor:'white',
+			height: 40,
+			width: 40
+		}]
+	};
+};
+
+function createSvgDataUri(fillColor) {
+	const svg = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+	  <circle cx="25" cy="25" r="20" fill="${fillColor}" />
+	</svg>`;
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+}

package/src/util/page-head.js

@@ -0,0 +1,62 @@
+import { useMapList } from "~/contexts/mapListContext";
+import React from 'react';
+const PageHead = ({
+	description,
+	keywords,
+	title
+}) => {
+	const {siteConfig} = useMapList(); 
+	//const router = useRouter();
+	const defaultTitle = siteConfig.title;
+	const pageTitle = title || defaultTitle;
+	const metaDescription = description || siteConfig.description;
+
+	return (
+		<div>
+			<title>{title ? `${title} | ${defaultTitle}` : defaultTitle}</title>
+			<meta name="description" content={metaDescription} />
+			{keywords?.length > 0
+				? (
+					<meta name="keywords" content={`${keywords.join(', ')}`} />
+				) : null
+			}
+
+			<meta property="og:title" content={pageTitle} />
+			<meta property="og:description" content={metaDescription} />
+			{siteConfig?.shareImage &&
+				<meta property="og:image" content={`/${siteConfig.shareImage}`} />
+			}
+			<meta property="og:type" content="website" />
+
+			<meta name="twitter:card" content="summary" />
+			<meta name="twitter:creator" content={siteConfig?.author} />
+			<meta name="twitter:title" content={pageTitle} />
+			<meta name="twitter:description" content={metaDescription} />
+			<script type="application/ld+json">
+				{`
+						{
+							"@context": "https://schema.org",
+							"@type": "WebPage",
+							"url": "pathame",
+							"legalName": "${defaultTitle}",
+							"name": "${pageTitle}",
+							"about": "${metaDescription}",
+							"brand": "${defaultTitle}"
+						}
+				`}
+			</script>
+
+			<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+
+			{/* Only show these in Production */}
+			{'' !== 'development' && <>
+				<link rel="icon" href="/favicon.ico" sizes="any" />
+				<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+				<link rel="manifest" href="/manifest.webmanifest" />
+				<meta name="msapplication-TileColor" content={siteConfig?.colors?.manifest?.tileColor ?? '#000'} />
+			</>}
+		</div>
+	);
+};
+
+export default PageHead;

package/src/util/provider.js

@@ -0,0 +1,12 @@
+import { Provider as RWBProvider } from 'react-wrap-balancer';
+import React from 'react';
+
+export function Provider({
+	children
+}) {
+	return (
+		<RWBProvider>
+			{children}
+		</RWBProvider>
+	);
+}

package/src/util/sortUtil.js

@@ -0,0 +1,33 @@
+export const dynamicSort = (items, fieldName, order = "asc") => {
+	if (!items || !items.length) {
+		return [];
+	}
+
+	const inferType = value => {
+		if (!isNaN(Date.parse(value)) && isNaN(value)) {
+			return "date";
+		} else if (!isNaN(parseFloat(value)) && isFinite(value)) {
+			return "number";
+		} else {
+			return "string";
+		}
+	};
+
+	const dataType = inferType(items[0].fields[fieldName]);
+
+	return items.sort((a, b) => {
+		let valA = a.fields[fieldName];
+		let valB = b.fields[fieldName];
+		if (!valA || !valB) return;
+		let comparison = 0;
+
+		if (dataType === "string") {
+			comparison = valA.localeCompare(valB);
+		} else if (dataType === "number") {
+			comparison = valA - valB;
+		} else if (dataType === "date") {
+			comparison = new Date(valA) - new Date(valB);
+		}
+		return order === "desc" ? comparison * -1 : comparison;
+	});
+};

package/src/util/stringUtils.js

@@ -0,0 +1,6 @@
+export const capitalize = str => {
+	if (str && typeof str === "string") {
+		return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+	}
+	return str;
+};

package/src/util/urlFilterUtil.js

@@ -0,0 +1,91 @@
+export const updateURLWithFilters = (filters, location, navigate, query) => {
+	console.log("attempting to update url");
+	console.log(filters);
+	console.log(location);
+	console.log(navigate);
+	console.log(query);
+  
+	const searchParams = new URLSearchParams();
+  
+	// Add the new filters to search params
+	Object.keys(filters).forEach(category => {
+	  Object.keys(filters[category]).forEach(filter => {
+		if (filters[category][filter]) {
+		  const key = `${category}.${filter}`;
+		  searchParams.set(key, 'true');
+		}
+	  });
+	});
+  
+	// Add the query to search params if it exists
+	if (query) {
+	  searchParams.set('query', query);
+	}
+  
+	navigate({
+	  search: searchParams.toString(),
+	}, { replace: true });
+  
+	notifyParentOfUrlChange();
+  };
+
+function notifyParentOfUrlChange() {
+  setTimeout(() => {
+    var message = {
+      type: 'URL_CHANGE',
+      url: window.location.href
+    };
+    window.parent.postMessage(message, "*");
+  }, 500);
+}
+
+export const parseQueryParams = search => {
+  const queryParams = {};
+  if (!search) return queryParams;
+  let queryString = search.split('?')[1];
+  if (!queryString) {
+    return queryParams;
+  }
+  queryString = queryString.replaceAll('+', ' ');
+  queryString.split('&').forEach(param => {
+    const [key, value] = param.split('=');
+    queryParams[decodeURIComponent(key)] = decodeURIComponent(value);
+  });
+  return queryParams;
+};
+
+export const filtersFromURL = location => {
+  if (!location || !location.search) return;
+  const filters = {};
+  let queryParam = null;
+  const queryParams = parseQueryParams(location.search);
+  if (!queryParams) return;
+  Object.keys(queryParams).forEach(key => {
+    if (key && key.includes('.')) {
+      const [category, filter] = key.split('.');
+      if (!filters[category]) {
+        filters[category] = {};
+      }
+      filters[category][filter] = queryParams[key] === 'true';
+    } else if (key === 'query') {
+      queryParam = queryParams[key];
+    }
+  });
+
+  return { filters, query: queryParam };
+};
+
+export const hasFiltersInURL = location => {
+  if (!location || !location.search) return;
+  const queryParams = parseQueryParams(location.search);
+  if (!queryParams) return;
+  return Object.keys(queryParams).some(key => key.includes('.'));
+};
+
+export const hasQueryInUrl = location => {
+  console.log(location);
+  if (!location || !location.search) return;
+  const queryParams = parseQueryParams(location.search);
+  if (!queryParams) return;
+  return Object.keys(queryParams).includes('query');
+};