DT-6573 :

app/component/itinerary/ItineraryPage.js

@@ -832,13 +832,14 @@ export default function ItineraryPage(props, context) {
       const selected = combinedEdges.length
         ? combinedEdges[selectedIndex]
         : null;
-      const itineraryTopics = getTopics(selected, config);
+
+      const itineraryTopics = getTopics(selected?.node.legs, config);
       const { client } = context.getStore('RealTimeInformationStore');
       // Client may not be initialized yet if there was an client before ComponentDidMount
-      if (!isEqual(itineraryTopics, topicsState) || !client) {
+      if (!naviMode && (!isEqual(itineraryTopics, topicsState) || !client)) {
         updateClient(itineraryTopics, context);
       }
-      if (!isEqual(itineraryTopics, topicsState)) {
+      if (!isEqual(itineraryTopics, topicsState) && !naviMode) {
         // eslint-disable-next-line react/no-did-update-set-state
         setTopicsState(itineraryTopics);
       }
@@ -853,6 +854,7 @@ export default function ItineraryPage(props, context) {
     altStates[PLANTYPE.PARKANDRIDE][0].plan,
     location.state?.selectedItineraryIndex,
     relaxScooterState.plan,
+    naviMode,
   ]);
 
   useEffect(() => {

app/component/itinerary/ItineraryPageUtils.js

@@ -87,13 +87,13 @@ export function addFeedbackly(context) {
   }
 }
 
-export function getTopics(itinerary, config) {
+export function getTopics(legs, config) {
   const itineraryTopics = [];
 
-  if (itinerary) {
+  if (legs) {
     const { realTime, feedIds } = config;
 
-    itinerary.node.legs.forEach(leg => {
+    legs.forEach(leg => {
       if (leg.transitLeg && leg.trip) {
         const feedId = leg.trip.gtfsId.split(':')[0];
         let topic;

app/component/itinerary/navigator/NaviCard.js

@@ -62,6 +62,8 @@ export default function NaviCard(
   } else if (legType === LEGTYPE.MOVE) {
     instructions = `navileg-${leg?.mode.toLowerCase()}`;
     iconName = iconMap.WALK;
+  } else if (legType === LEGTYPE.WAIT) {
+    iconName = iconMap.WAIT;
   }
 
   return (

app/component/itinerary/navigator/NaviCardContainer.js

@@ -14,6 +14,7 @@ import {
   LEGTYPE,
   DESTINATION_RADIUS,
 } from './NaviUtils';
+import { updateClient, getTopics } from '../ItineraryPageUtils';
 
 const TIME_AT_DESTINATION = 3; // * 10 seconds
 const TOPBAR_PADDING = 8; // pixels
@@ -37,7 +38,7 @@ function NaviCardContainer(
     lastLeg,
     isJourneyCompleted,
   },
-  { intl, config, match, router },
+  context,
 ) {
   const [cardExpanded, setCardExpanded] = useState(false);
   // All notifications including those user has dismissed.
@@ -51,7 +52,7 @@ function NaviCardContainer(
   // Destination counter. How long user has been at the destination. * 10 seconds
   const destCountRef = useRef(0);
   const cardRef = useRef(null);
-
+  const { intl, config, match, router } = context;
   const handleRemove = index => {
     const msg = messages.get(activeMessages[index].id);
     msg.closed = true; // remember closing action
@@ -62,6 +63,16 @@ function NaviCardContainer(
     setCardExpanded(!cardExpanded);
   };
 
+  // track only relevant vehicles for the journey.
+  const topics = getTopics(
+    legs.filter(leg => legTime(leg.end) >= time),
+    config,
+  );
+
+  useEffect(() => {
+    updateClient(topics, context);
+  }, []);
+
   useEffect(() => {
     if (cardRef.current) {
       const contentHeight = cardRef.current.getBoundingClientRect();
@@ -76,7 +87,6 @@ function NaviCardContainer(
     const legChanged = legRef.current?.legId
       ? legRef.current.legId !== currentLeg?.legId
       : legRef.current?.mode !== currentLeg?.mode;
-
     if (legChanged) {
       legRef.current = currentLeg;
     }
@@ -103,10 +113,12 @@ function NaviCardContainer(
         ...getAdditionalMessages(nextLeg, time, intl, config, messages),
       ]);
     }
-
-    if (currentLeg && legChanged) {
-      focusToLeg?.(currentLeg);
+    if (legChanged) {
+      updateClient(topics, context);
       setCardExpanded(false);
+      if (currentLeg) {
+        focusToLeg?.(currentLeg);
+      }
     }
     if (incomingMessages.size || legChanged) {
       // Handle messages when new messages arrives.
@@ -247,6 +259,8 @@ NaviCardContainer.contextTypes = {
   config: configShape.isRequired,
   match: matchShape.isRequired,
   router: routerShape.isRequired,
+  executeAction: PropTypes.func.isRequired,
+  getStore: PropTypes.func.isRequired,
 };
 
 export default NaviCardContainer;