Disable go button when directions are not populated

packages/map-template/CHANGELOG.md

@@ -5,7 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-# [1.53.0] - 2024-07-01
+## [1.53.1] - 2024-07-02
+
+### Fixed
+
+- Wayfinding 'Go' button is now disabled until route is fetched and ready to be displayed.
+
+## [1.53.0] - 2024-07-01
 
 ### Added
 

packages/map-template/src/components/Wayfinding/Wayfinding.jsx

@@ -104,7 +104,7 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction
 
     const distanceUnitSystem = useRecoilValue(distanceUnitSystemSelector);
 
-    const [totalDistance, totalTime, hasFoundRoute] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn)
+    const [totalDistance, totalTime, hasFoundRoute, areDirectionsReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn)
 
     /**
      * Decorates location with data that is required for wayfinding to work.
@@ -479,15 +479,15 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction
                         {travelMode === travelModes.DRIVING && <DriveIcon />}
                         {travelMode === travelModes.BICYCLING && <BikeIcon />}
                         <div>{t('Distance')}:</div>
-                        <div className="wayfinding__meters">{totalDistance && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div>
+                        <div className="wayfinding__meters">{totalDistance && areDirectionsReady && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div>
                     </div>
                     <div className="wayfinding__time">
                         <ClockIcon />
                         <div>{t('Estimated time')}:</div>
-                        <div className="wayfinding__minutes">{totalTime && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div>
+                        <div className="wayfinding__minutes">{totalTime && areDirectionsReady && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div>
                     </div>
                 </div>
-                <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()}>
+                <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!areDirectionsReady}>
                     {t('Go!')}
                 </button>
             </div>}

packages/map-template/src/components/Wayfinding/Wayfinding.scss

@@ -149,6 +149,11 @@
         &:hover {
             filter: brightness(90%);
         }
+
+        &:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
     }
 
     &__scrollable {

packages/map-template/src/hooks/useDirectionsInfo.js

@@ -5,16 +5,18 @@ import directionsResponseState from '../atoms/directionsResponseState';
 import hasFoundRouteState from '../atoms/hasFoundRouteState';
 
 /*
- * Hook to handle when both origin location and destination location are selected, 
+ * Hook to handle when both origin location and destination location are selected,
  * and have geometry, call the MapsIndoors SDK to get information about the route.
  */
 const useDirectionsInfo = (originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) => {
     const [totalDistance, setTotalDistance] = useState()
     const [totalTime, setTotalTime] = useState();
     const [hasFoundRoute, setHasFoundRoute] = useRecoilState(hasFoundRouteState);
     const [, setDirectionsResponse] = useRecoilState(directionsResponseState);
+    const [areDirectionsReady, setAreDirectionReady] = useState();
 
     useEffect(() => {
+        setAreDirectionReady(false);
         if (originLocation?.geometry && destinationLocation?.geometry) {
             directionsService.getRoute({
                 origin: getLocationPoint(originLocation),
@@ -23,7 +25,6 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic
                 avoidStairs: accessibilityOn
             }).then(directionsResult => {
                 if (directionsResult && directionsResult.legs) {
-                    setHasFoundRoute(true);
                     // Calculate total distance and time
                     const totalDistance = directionsResult.legs.reduce((accumulator, current) => accumulator + current.distance.value, 0);
                     const totalTime = directionsResult.legs.reduce((accumulator, current) => accumulator + current.duration.value, 0);
@@ -38,6 +39,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic
                         totalTime,
                         directionsResult
                     });
+                    setAreDirectionReady(true);
                 } else {
                     setHasFoundRoute(false);
                 }
@@ -47,7 +49,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic
         }
     }, [originLocation, destinationLocation, directionsService, accessibilityOn, travelMode]);
 
-    return [totalDistance, totalTime, hasFoundRoute];
+    return [totalDistance, totalTime, hasFoundRoute, areDirectionsReady];
 }
 
 export default useDirectionsInfo;