Connect Find Help cards and map markers to organisation pages (#45)

Author: james-cross

src/components/FindHelp/FindHelpResults.tsx

@@ -25,7 +25,7 @@ interface MapMarker {
   lng: number;
   title: string;
   organisation?: string;
-  link?: string;
+  organisationSlug: string;
   serviceName?: string;
   distanceKm?: number;
   icon?: string;
@@ -118,6 +118,7 @@ export default function FindHelpResults({ providers }: Props) {
       lng: s.lng,
       title: s.name,
       organisation: s.organisation,
+      organisationSlug: s.organisationSlug,
       serviceName: s.name,
       distanceKm: s.distance,
     }));
@@ -128,6 +129,7 @@ export default function FindHelpResults({ providers }: Props) {
         lat: location.lat,
         lng: location.lng,
         title: 'You are here',
+        organisationSlug: 'user-location',
         icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
       });
     }
@@ -224,4 +226,4 @@ export default function FindHelpResults({ providers }: Props) {
       )}
     </section>
   );
-}
+}

src/components/FindHelp/ServiceCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 
 export interface Service {
   id: string;
@@ -9,6 +10,7 @@ export interface Service {
   subCategory: string;
   description: string;
   organisation?: string;
+  organisationSlug?: string;
   openTimes?: { day: string; start: string; end: string }[];
   clientGroups?: string[];
   lat?: number;
@@ -20,23 +22,25 @@ interface ServiceCardProps {
 }
 
 export default function ServiceCard({ service }: ServiceCardProps) {
+  const destination = service.organisationSlug
+    ? `/find-help/organisation/${service.organisationSlug}`
+    : '#';
+
   return (
-    <div className="border-none p-0 shadow-none bg-transparent">
-      <h2 className="text-lg font-semibold mb-1">
-        {service.name}
-      </h2>
+    <Link
+      href={destination}
+      className="block border rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-a"
+      aria-label={`View details for ${service.name}`}
+    >
+      <h2 className="text-lg font-semibold mb-1">{service.name}</h2>
 
       {service.organisation && (
-        <p className="text-sm text-gray-600 mb-2">
-          {service.organisation}
-        </p>
+        <p className="text-sm text-gray-600 mb-2">{service.organisation}</p>
       )}
 
-      <p className="text-gray-800 mb-2">
-        {service.description}
-      </p>
+      <p className="text-gray-800 mb-2">{service.description}</p>
 
-      <p className="text-sm text-gray-500 mb-2">
+      <p className="text-sm text-gray-500 mb-1">
         Category: {service.category}
       </p>
 
@@ -47,7 +51,10 @@ export default function ServiceCard({ service }: ServiceCardProps) {
       {service.clientGroups && service.clientGroups.length > 0 && (
         <div className="text-sm mt-2">
           {service.clientGroups.map((group, idx) => (
-            <span key={idx} className="inline-block bg-gray-100 px-2 py-1 mr-2 rounded">
+            <span
+              key={idx}
+              className="inline-block bg-gray-100 px-2 py-1 mr-2 rounded"
+            >
               {group}
             </span>
           ))}
@@ -63,6 +70,6 @@ export default function ServiceCard({ service }: ServiceCardProps) {
           ))}
         </div>
       )}
-    </div>
+    </Link>
   );
 }

src/components/Homepage/HomepageMap.tsx

@@ -24,6 +24,7 @@ export default function HomepageMap() {
         title: loc.name,
         icon: '/assets/img/map-pin.png',
         link: `/${loc.key}`,
+        organisationSlug: `homepage-${loc.key}`
       }));
   }, []);
 

src/components/MapComponent/GoogleMap.tsx

@@ -7,11 +7,11 @@ interface Marker {
   lat: number;
   lng: number;
   title: string;
+  organisationSlug: string; // ✅ must match field used in ServiceCard
   icon?: string;
   organisation?: string;
   serviceName?: string;
   distanceKm?: number;
-  link?: string;
 }
 
 interface Props {
@@ -52,7 +52,17 @@ export default function GoogleMap({ center, markers, zoom }: Props) {
     const newMarkers: google.maps.Marker[] = [];
 
     markers.forEach((markerData) => {
-      const { lat, lng, title, icon, organisation, serviceName, distanceKm, link } = markerData;
+      const {
+        id,
+        lat,
+        lng,
+        title,
+        icon,
+        organisation,
+        serviceName,
+        distanceKm,
+        organisationSlug, // ✅ corrected
+      } = markerData;
 
       const gMarker = new google.maps.Marker({
         position: { lat, lng },
@@ -61,29 +71,39 @@ export default function GoogleMap({ center, markers, zoom }: Props) {
         icon: icon || undefined,
       });
 
-      if (link) {
-        gMarker.addListener('click', () => {
-          window.location.href = link;
-        });
-      } else {
-        const htmlContent = `
-          <div style="font-size:14px;max-width:220px;">
-            <strong>${organisation ? `<a href="/organisation-slug" target="_blank" rel="noopener noreferrer">${organisation}</a>` : 'Unknown Organisation'}</strong><br/>
-            ${serviceName ?? 'Unnamed service'}<br/>
-            ${distanceKm?.toFixed(1) ?? '?'} km away
-          </div>
-        `;
-
-        const infoWindow = new google.maps.InfoWindow({ content: htmlContent });
-
-        gMarker.addListener('click', () => {
-          if (infoWindowRef.current) {
-            infoWindowRef.current.close();
+      const destination = `/find-help/organisation/${organisationSlug}`;
+      const infoId = `info-${id}`;
+
+      const htmlContent = `
+        <div
+          id="${infoId}"
+          style="font-size:14px;max-width:220px;cursor:pointer;padding:4px;"
+        >
+          <strong style="color:#0b9b75;">${organisation ?? 'Unknown Organisation'}</strong><br/>
+          ${serviceName ?? 'Unnamed service'}<br/>
+          ${distanceKm?.toFixed(1) ?? '?'} km away
+        </div>
+      `;
+
+      const infoWindow = new google.maps.InfoWindow({ content: htmlContent });
+
+      gMarker.addListener('click', () => {
+        if (infoWindowRef.current) {
+          infoWindowRef.current.close();
+        }
+
+        infoWindowRef.current = infoWindow;
+        infoWindow.open(map, gMarker);
+
+        google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
+          const el = document.getElementById(infoId);
+          if (el) {
+            el.addEventListener('click', () => {
+              window.location.href = destination;
+            });
           }
-          infoWindowRef.current = infoWindow;
-          infoWindow.open(map, gMarker);
         });
-      }
+      });
 
       newMarkers.push(gMarker);
     });

src/components/OrganisationPage/OrganisationLocations.tsx

@@ -17,7 +17,13 @@ export default function OrganisationLocations({ organisation }: Props) {
 
   const center = { lat: organisation.latitude, lng: organisation.longitude };
   const markers = [
-    { id: organisation.id, lat: organisation.latitude, lng: organisation.longitude, title: organisation.name },
+    {
+      id: organisation.id,
+      lat: organisation.latitude,
+      lng: organisation.longitude,
+      title: organisation.name,
+      organisationSlug: organisation.slug || 'org-loc-default' // ✅ dummy fallback slug
+    },
   ];
 
   return (
@@ -26,4 +32,4 @@ export default function OrganisationLocations({ organisation }: Props) {
       <GoogleMap center={center} markers={markers} zoom={14} />
     </section>
   );
-}
+}

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}