From a225cf4a82de7cacc89658d764068906d6eaba62 Mon Sep 17 00:00:00 2001
From: Andreas Helms <andreashelms@MacBook-Pro-von-Andreas.local>
Date: Thu, 9 Jan 2025 16:31:35 +0100
Subject: [PATCH] feat(poi-layer): add pois to marker select popup

---
 .../map/tile-layer/MarkerSelectPopup.js       | 14 ++++
 .../map/tile-layer/SelectPublicPoiRow.js      | 70 +++++++++++++++++++
 .../map/tile-layer/TileLayerContainer.js      |  1 +
 app/util/mapLayerUtils.js                     |  3 +
 4 files changed, 88 insertions(+)
 create mode 100644 app/component/map/tile-layer/SelectPublicPoiRow.js

diff --git a/app/component/map/tile-layer/MarkerSelectPopup.js b/app/component/map/tile-layer/MarkerSelectPopup.js
index 9f4a036f45..96513966b2 100644
--- a/app/component/map/tile-layer/MarkerSelectPopup.js
+++ b/app/component/map/tile-layer/MarkerSelectPopup.js
@@ -11,6 +11,7 @@ import SelectCarpoolRow from './SelectCarpoolRow';
 import SelectRoadworksRow from './SelectRoadworksRow';
 import SelectChargingStationRow from './SelectChargingStationRow';
 import SelectDatahubPoiRow from './SelectDatahubPoiRow';
+import SelectPublicPoiRow from './SelectPublicPoiRow';
 
 function MarkerSelectPopup(props) {
   const hasStop = () =>
@@ -132,6 +133,19 @@ function MarkerSelectPopup(props) {
         />
       );
     }
+
+    if (option.layer === 'publicPois') {
+      const { lat, lon } = option.coords;
+      return (
+        <SelectPublicPoiRow
+          {...option.feature}
+          key={option.feature.properties.id}
+          latitude={lat}
+          longitude={lon}
+        />
+      );
+    }
+
     return null;
   });
   let id = 'choose-stop';
diff --git a/app/component/map/tile-layer/SelectPublicPoiRow.js b/app/component/map/tile-layer/SelectPublicPoiRow.js
new file mode 100644
index 0000000000..f24642e499
--- /dev/null
+++ b/app/component/map/tile-layer/SelectPublicPoiRow.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from 'found/Link';
+import PropTypes from 'prop-types';
+import pickBy from 'lodash/pickBy';
+import { getLayerByCode } from '../../../util/mapLayerUtils';
+import Icon from '../../Icon';
+
+export default function SelectPublicPoi(props, { config, intl }) {
+  const { properties, latitude, longitude } = props;
+
+  const { category3: code, name, address, website, phone } = properties;
+
+  const layer = getLayerByCode(code, config);
+
+  const svg = layer?.properties?.icon?.svg;
+
+  const detailsProperties = { ...properties };
+
+  // Filter out properties that are not in the layer's attributes
+  Object.keys(detailsProperties).forEach(key => {
+    if (!layer?.properties?.attributes?.includes(key)) {
+      delete detailsProperties[key];
+    }
+  });
+
+  const params = pickBy(
+    {
+      ...detailsProperties,
+      lat: latitude,
+      lng: longitude,
+      code,
+      name: name || layer.translations[intl.locale],
+      address,
+      website,
+      phone,
+    },
+    value => value !== undefined,
+  );
+
+  return (
+    <Link
+      className="stop-popup-choose-row"
+      to={`/pois/${code}?${new URLSearchParams(params).toString()}`}
+    >
+      <div className="padding-vertical-normal select-row-icon">
+        {svg && <Icon dataURI={`data:image/svg+xml;base64,${btoa(svg)}`} />}
+      </div>
+      <span className="choose-row-center-column">
+        <h5 className="choose-row-header">
+          {name || layer.translations[intl.locale]}
+        </h5>
+      </span>
+      <span className="choose-row-right-column">
+        <Icon img="icon-icon_arrow-collapse--right" />
+      </span>
+      <hr className="no-margin gray" />
+    </Link>
+  );
+}
+
+SelectPublicPoi.propTypes = {
+  properties: PropTypes.object.isRequired,
+  latitude: PropTypes.number.isRequired,
+  longitude: PropTypes.number.isRequired,
+};
+
+SelectPublicPoi.contextTypes = {
+  intl: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+};
diff --git a/app/component/map/tile-layer/TileLayerContainer.js b/app/component/map/tile-layer/TileLayerContainer.js
index 4c11b60315..4d1e0e9680 100644
--- a/app/component/map/tile-layer/TileLayerContainer.js
+++ b/app/component/map/tile-layer/TileLayerContainer.js
@@ -252,6 +252,7 @@ class TileLayerContainer extends GridLayer {
       }
 
       if (
+        selectableTargets.length === 1 &&
         selectableTargets?.find(({ layer }) => {
           return layer === 'publicPois';
         })
diff --git a/app/util/mapLayerUtils.js b/app/util/mapLayerUtils.js
index 1b6516650d..568c29ffec 100644
--- a/app/util/mapLayerUtils.js
+++ b/app/util/mapLayerUtils.js
@@ -72,6 +72,9 @@ export const isFeatureLayerEnabled = (
   if (!feature || !layerName || !mapLayers) {
     return false;
   }
+  if (layerName === 'publicPois') {
+    return true;
+  }
   if (!Object.keys(mapLayers).includes(layerName)) {
     return false;
   }