Activate Touringcar Messages

src/pages/LoadUnload/LoadUnloadPage.tsx

@@ -66,6 +66,7 @@ const LoadUnloadPage = () => {
           <MapStyle />
           <StyledMap options={{ ...defaultMapOptions, maxZoom: 21 }} setInstance={setMapInstance}>
             <LoadUnloadMapProvider>
+              {/* @ts-ignore */}
               <MapPanelProvider
                 variant={showDesktopVariant ? 'panel' : 'drawer'}
                 initialPosition={SnapPoint.Halfway}

src/pages/LoadUnload/components/DetailFeature/BollardDetailFeature.tsx

@@ -28,6 +28,7 @@ function BollardDetailsFeature() {
   if (!currentBollard) return null
 
   return (
+    // @ts-ignore
     <MapPanelContent
       animate
       stackOrder={currentOverlay === mapPanelConstants.Overlay.Results ? 2 : 1}

src/pages/LoadUnload/components/DetailFeature/DetailFeature.tsx

@@ -33,6 +33,7 @@ export const LoadUnloadDetailFeature = () => {
   if (!detailFeature.feature && !detailFeature.location) return null
 
   return (
+    // @ts-ignore
     <MapPanelContent
       animate
       stackOrder={currentOverlay === mapPanelConstants.Overlay.Results ? 2 : 1}

src/pages/LoadUnload/components/MapSettingsDisplay.tsx

@@ -56,6 +56,7 @@ export const LoadUnloadMapSettingsDisplay = ({
   const showDateTimeModal = () => setShowDateTimeModal(true)
 
   return (
+    // @ts-ignore
     <MapPanelContent data-testid="map-settings" {...otherProps}>
       <Tabs label={t('_pageLoadUnload._mapPanel.label')}>
         <Tab id="input" label={t('_generic._mapPanel.input')}>

src/pages/ProhibitorySigns/ProhibitorySignsPage.tsx

@@ -61,6 +61,7 @@ const ProhibitorySignsPage = () => {
           <MapStyle />
           <StyledMap options={defaultMapOptions} setInstance={setMapInstance}>
             <ProhibitorySignsMapProvider>
+              {/* @ts-ignore */}
               <MapPanelProvider
                 variant={showDesktopVariant ? 'panel' : 'drawer'}
                 initialPosition={SnapPoint.Closed}

src/pages/ProhibitorySigns/components/DetailFeature/DetailFeature.tsx

@@ -36,6 +36,7 @@ const ProhibitorySignsDetailFeature = () => {
   if (!currentTrafficSign && !location) return null
 
   return (
+    // @ts-ignore
     <MapPanelContent
       animate
       stackOrder={currentOverlay === mapPanelConstants.Overlay.Results ? 2 : 1}

src/pages/ProhibitorySigns/components/ScenarioDisplay/ScenarioDisplay.tsx

@@ -44,6 +44,7 @@ const ScenarioDisplay = ({ ...otherProps }: MapPanelContentProps) => {
   }, [setPositionFromSnapPoint, showScenarioWizard])
 
   return (
+    // @ts-ignore
     <MapPanelContent data-testid="scenario-display" {...otherProps}>
       {!showScenarioWizard && (
         <Tabs label={t('_pageLicencePlate._mapPanel.label')}>

src/pages/RoadObstructions/RoadObstructionsPage.tsx

@@ -87,6 +87,7 @@ function RoadObstructionsPage() {
           <MapStyle />
           <StyledMap options={defaultMapOptions} setInstance={setMapInstance}>
             <RoadObstructionsMapProvider>
+              {/* @ts-ignore */}
               <MapPanelProvider
                 variant={showDesktopVariant ? 'panel' : 'drawer'}
                 initialPosition={SnapPoint.Halfway}

src/pages/RoadObstructions/components/DetailFeature/RoadSectionInfo.tsx

@@ -48,6 +48,7 @@ interface RoadSectionInfoProps {
 
 const RoadSectionInfo = ({ currentOverlay, detailFeature, setDetailFeature }: RoadSectionInfoProps) => {
   return (
+    // @ts-ignore
     <MapPanelContent
       title={`Wegvak ${detailFeature.data.properties.road_element_id}`}
       data-testid="detail-feature-road-section"

src/pages/RoadObstructions/components/DetailFeature/Wior.tsx

@@ -29,6 +29,7 @@ export const RoadObstructionsDetailFeatureWior = ({
   setDetailFeature,
 }: RoadObstructionsDetailFeatureWiorProps) => {
   return (
+    // @ts-ignore
     <MapPanelContent
       title={`WIOR ${detailFeature.data.properties.wior_nummer}`}
       data-testid="detail-feature-wior"

src/pages/Touringcar/TouringcarPage.tsx

@@ -58,6 +58,7 @@ const TouringcarPage = () => {
 
           <StyledMap options={{ ...defaultMapOptions, maxZoom: 21, zoom: 14 }} setInstance={setMapInstance}>
             <TouringcarMapProvider>
+              {/* @ts-ignore */}
               <MapPanelProvider
                 variant={showDesktopVariant ? 'panel' : 'drawer'}
                 initialPosition={mapPanelConstants.SnapPoint.Halfway}

src/pages/Touringcar/components/LocationsList/index.tsx

@@ -57,6 +57,7 @@ function LocationsList({ locationItems }: { locationItems: TouringcarStop[] }) {
             <TableRowClickable
               key={feature.id}
               onClick={() => {
+                if (!feature?.geometry?.coordinates?.[0]) return
                 mapInstance.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 20)
               }}
             >

src/pages/Touringcar/components/MapLayers/MessagesLayer.tsx

@@ -17,7 +17,13 @@ export const MessagesLayer = () => {
   const { activeMapLayers, messagesDate, setCurrentMessage, setActiveTab } = useTouringcarMapContext()
   const { setPositionFromSnapPoint } = useContext(MapPanelContext)
 
-  const { isLoading, error, isError, data, refetch } = useQuery({
+  const {
+    isLoading,
+    error,
+    isError,
+    data: messages,
+    refetch,
+  } = useQuery({
     enabled: true,
     queryKey: ['touringcarMessages'],
     queryFn: () =>
@@ -30,24 +36,31 @@ export const MessagesLayer = () => {
 
   const findMessage = useCallback(
     (title: string) => {
-      if (!data) return
-      const message: TouringcarMessage | undefined = data.features.find(
-        msg => msg?.properties[(i18n.language || 'nl') as Language].title === title
+      if (!messages) return
+
+      console.log('Messages data:', messages)
+
+      const message: TouringcarMessage | undefined = messages.features.find(
+        msg => msg?.properties[(i18n.language ?? 'nl') as Language].title === title
       )
+
+      console.log('Found message to be set:', message)
+
       setCurrentMessage(message)
     },
-    [data, setCurrentMessage]
+    [messages, setCurrentMessage]
   )
 
   const createClusterMarkers = () => {
-    return data!.features.map((message: TouringcarMessage) => {
+    // Messages should be available once createClusterMarkers is called.
+    return messages!.features.map((message: TouringcarMessage) => {
       const marker = TouringcarMarker(message, MapLayerId.touringcarMessagesLayerId)
 
       const msgParts = message.properties[(i18n.language || 'nl') as Language]
 
       let tooltipText = `<p><strong>${msgParts.title}</strong></p>
-      ${msgParts.body ?? `<p>${msgParts.body}</p>`}
-      ${msgParts.advice ?? `<p><strong>Advies:</strong> ${msgParts.advice}</p>`}`
+${msgParts.body ?? `<p>${msgParts.body}</p>`}
+${msgParts.advice ?? `<p><strong>Advies:</strong> ${msgParts.advice}</p>`}`
 
       marker.bindTooltip(tooltipText)
 
@@ -62,7 +75,7 @@ export const MessagesLayer = () => {
   }
 
   if (isError && error instanceof Error) console.error(error.message)
-  if (isLoading || !data) return null
+  if (isLoading || !messages) return null
   if (!activeMapLayers[MapLayerId.touringcarMessagesLayerId]) return null
 
   return (

src/pages/Touringcar/components/MapPanel/index.tsx

@@ -31,6 +31,7 @@ const TouringcarMapPanel = () => {
   if (!stopOrParkingSpace) return null
 
   return (
+    // @ts-ignore
     <StyledMapPanelContent
       animate
       stackOrder={currentOverlay === mapPanelConstants.Overlay.Results ? 2 : 1}

src/pages/Touringcar/components/Messages/MessagesList.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { useMapInstance } from '@amsterdam/arm-core'
-import { Accordion, Heading, Image, Link, List, ListItem, Paragraph, themeColor } from '@amsterdam/asc-ui'
+import { Accordion, Button, Heading, Image, Link, List, ListItem, Paragraph, themeColor } from '@amsterdam/asc-ui'
 import { useQuery } from '@tanstack/react-query'
 import getTouringcarMessages from 'api/touringcar/messages'
 import { format } from 'date-fns'
@@ -59,10 +59,20 @@ function MessagesList() {
               title={`(${index + 1}) ${msgParts.title}`}
               isOpen={message.properties.important ?? data?.features.length === 1}
               important={message.properties.important}
-              onClick={() => {
-                mapInstance.flyTo([message.geometry.coordinates[1], message.geometry.coordinates[0]], 20)
-              }}
             >
+              <Button
+                forwardedAs={Link}
+                inlist
+                onClick={({ preventDefault }) => {
+                  preventDefault()
+
+                  if (!message?.geometry?.coordinates?.[0]) return
+
+                  mapInstance.flyTo([message.geometry.coordinates[1], message.geometry.coordinates[0]], 20)
+                }}
+              >
+                View on map
+              </Button>
               <Paragraph>{msgParts.body}</Paragraph>
               {message.properties.image_url ?? (
                 <Paragraph>

test/utils/prohibitorySigns/withMapContext.tsx

@@ -27,6 +27,7 @@ export const withMapContext = (component: ReactNode, mapContextProps?: Partial<P
         ...mapContextProps,
       }}
     >
+      {/* @ts-ignore */}
       <MapPanelProvider initialPosition={SnapPoint.Closed} variant="panel">
         {component}
       </MapPanelProvider>

yarn.lock

@@ -2208,7 +2208,7 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^6.4.1":
+"@testing-library/jest-dom@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz#38949f6b63722900e2d75ba3c6d9bf8cffb3300e"
   integrity sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==
@@ -2537,7 +2537,7 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.1.tgz#178d58ee7e4834152b0e8b4d30cbfab578b9bb30"
   integrity sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==
 
-"@types/node@^18.19.12":
+"@types/node@^18.19.21":
   version "18.19.21"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.21.tgz#f4ca1ac8ffb05ee4b89163c2d6fac9a1a59ee149"
   integrity sha512-2Q2NeB6BmiTFQi4DHBzncSoq/cJMLDdhPaAoJFnFCyD9a8VPZRf7a1GAwp1Edb7ROaZc5Jz/tnZyL6EsWMRaqw==
@@ -5224,7 +5224,7 @@ eslint-webpack-plugin@^3.1.1:
     normalize-path "^3.0.0"
     schema-utils "^4.0.0"
 
-eslint@^8.3.0, eslint@^8.56.0:
+eslint@^8.3.0, eslint@^8.57.0:
   version "8.57.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -6066,7 +6066,7 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
-html-react-parser@^5.1.1:
+html-react-parser@^5.1.8:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-5.1.8.tgz#b8a294854845bce96627aa4f2ba738362c0ebcf8"
   integrity sha512-oAXgUB4JYHFg4le3RQZtoge1TGMkwXSZPiWiexwdx3AuldgG+QEvbwMrscSViu90JNje3V4Zq5gCUSoTxa0W0A==
@@ -6197,7 +6197,7 @@ i18next-browser-languagedetector@^7.2.0:
   dependencies:
     "@babel/runtime" "^7.23.2"
 
-i18next@^23.8.2:
+i18next@^23.10.0:
   version "23.10.0"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.10.0.tgz#fb328794ae692e6fdde0564259e421f4203c4a2c"
   integrity sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==
@@ -9279,7 +9279,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-hook-form@^7.49.3:
+react-hook-form@^7.50.1:
   version "7.51.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.0.tgz#757ae71b37c26e00590bd3788508287dcc5ecdaf"
   integrity sha512-BggOy5j58RdhdMzzRUHGOYhSz1oeylFAv6jUSG86OvCIvlAvS7KvnRY7yoAf2pfEiPN7BesnR0xx73nEk3qIiw==
@@ -9317,15 +9317,15 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^6.21.3:
+react-router-dom@^6.22.2:
   version "6.22.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.2.tgz#8233968a8a576f3006e5549c80f3527d2598fc9c"
   integrity sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==
   dependencies:
     "@remix-run/router" "1.15.2"
     react-router "6.22.2"
 
-[email protected], react-router@^6.21.3:
+[email protected], react-router@^6.22.2:
   version "6.22.2"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.2.tgz#27e77e4c635a5697693b922d131d773451c98a5b"
   integrity sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==