From 43bea881445862812bfa2fe5f539c8b790ffaf6f Mon Sep 17 00:00:00 2001
From: sharhio <sade.harhio@cgi.com>
Date: Wed, 26 Nov 2025 12:11:30 +0200
Subject: [PATCH 1/3] use actual current time to determine leg status, ensure
 data is consistent for render

---
 .../itinerary/navigator/NaviCardContainer.js  | 24 +++++++++----------
 .../navigator/hooks/useRealtimeLegs.js        |  2 +-
 .../navigator/hooks/utils/realtimeLegUtils.js |  6 ++---
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index f7feeaa7ee..bcac04052a 100644
--- a/app/component/itinerary/navigator/NaviCardContainer.js
+++ b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -19,9 +19,10 @@ import usePrevious from './hooks/usePrevious';
 
 const HIDE_TOPCARD_DURATION = 2000; // milliseconds
 
-const getLegType = (leg, firstLeg, time, interlineWithPreviousLeg) => {
+const getLegType = (leg, firstLeg, interlineWithPreviousLeg) => {
   let legType;
-  if (time < legTime(firstLeg.start)) {
+  const currentTime = Date.now();
+  if (currentTime < legTime(firstLeg.start)) {
     if (!firstLeg.forceStart) {
       legType = LEGTYPE.PENDING;
     } else {
@@ -78,7 +79,7 @@ function NaviCardContainer(
   }
 
   // track only relevant vehicles for the journey.
-  // addd 20 s buffer so that vehicle location is available
+  // add 20 s buffer so that vehicle location is available
   // for leg validation long enough
   const getNaviTopics = () =>
     getTopics(
@@ -185,17 +186,14 @@ function NaviCardContainer(
     return () => clearTimeout(timeoutId);
   }, [time, firstLeg]);
 
-  // LegChange fires animation, we need to keep the old data until card goes out of the view.
-  const l = legChanging ? previousLeg : currentLeg;
-  const legType = getLegType(
-    l,
-    firstLeg,
-    time,
-    nextLeg?.interlineWithPreviousLeg,
-  );
+  // LegChange fires animation, we need to keep the old data from the first render until card goes out of the view.
+  const cardChanging = legChanged || legChanging;
+  const l = cardChanging ? previousLeg : currentLeg;
+  const nl = cardChanging ? currentLeg : nextLeg;
+  const legType = getLegType(l, firstLeg, nl?.interlineWithPreviousLeg);
 
   let className;
-  if (isJourneyCompleted || legChanging) {
+  if (isJourneyCompleted || cardChanging) {
     className = 'hide-card';
   } else {
     className = 'show-card';
@@ -210,7 +208,7 @@ function NaviCardContainer(
     >
       <NaviCard
         leg={l}
-        nextLeg={nextLeg}
+        nextLeg={nl}
         legType={legType}
         time={time}
         position={position}
diff --git a/app/component/itinerary/navigator/hooks/useRealtimeLegs.js b/app/component/itinerary/navigator/hooks/useRealtimeLegs.js
index 7b00ac760f..99686f08b9 100644
--- a/app/component/itinerary/navigator/hooks/useRealtimeLegs.js
+++ b/app/component/itinerary/navigator/hooks/useRealtimeLegs.js
@@ -82,7 +82,7 @@ const useRealtimeLegs = (
   }, [fetchAndSetRealtimeLegs]);
 
   const { firstLeg, lastLeg, currentLeg, nextLeg, previousLeg } =
-    getLegsOfInterest(itinerary.legs, params.updatedAt);
+    getLegsOfInterest(itinerary.legs);
 
   const tailLength = currentLeg
     ? getRemainingTraversal(
diff --git a/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js b/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js
index 11c00c7e88..0c20431899 100644
--- a/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js
+++ b/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js
@@ -124,10 +124,9 @@ function matchLegEnds(legs) {
 /**
  * Extracts legs of interest (current, next, previous, etc.) based on the current time.
  * @param {Array} legs - Array of legs.
- * @param {number} now - Current timestamp in milliseconds.
  * @returns {Object} Object containing legs of interest.
  */
-function getLegsOfInterest(legs, now) {
+function getLegsOfInterest(legs) {
   if (!legs?.length) {
     return {
       firstLeg: undefined,
@@ -136,6 +135,7 @@ function getLegsOfInterest(legs, now) {
       nextLeg: undefined,
     };
   }
+  const now = Date.now();
   const currentLeg = legs.find(
     ({ start, end }) => legTime(start) <= now && legTime(end) >= now,
   );
@@ -246,7 +246,7 @@ const BOARD_DELAY = 20000; // 20s, default delay for card change in transit boar
 // Apparently we should consider if the leg ends at an end stop
 // also geolocation certainty plays important role
 function shiftLegsByGeolocation(legs, time, vehicles, position, origin) {
-  const { previousLeg, currentLeg, nextLeg } = getLegsOfInterest(legs, time);
+  const { previousLeg, currentLeg, nextLeg } = getLegsOfInterest(legs);
   let confirm;
 
   if (previousLeg && !previousLeg.freezeEnd) {

From 1afbbecc4b071c520845f1ef75bbd122ecc08de8 Mon Sep 17 00:00:00 2001
From: sharhio <sade.harhio@cgi.com>
Date: Wed, 10 Dec 2025 15:18:42 +0200
Subject: [PATCH 2/3] Revert "use actual current time to determine leg status,
 ensure data is consistent for render"

This reverts commit 43bea881445862812bfa2fe5f539c8b790ffaf6f.
---
 .../itinerary/navigator/NaviCardContainer.js  | 24 ++++++++++---------
 .../navigator/hooks/useRealtimeLegs.js        |  2 +-
 .../navigator/hooks/utils/realtimeLegUtils.js |  6 ++---
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index bcac04052a..f7feeaa7ee 100644
--- a/app/component/itinerary/navigator/NaviCardContainer.js
+++ b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -19,10 +19,9 @@ import usePrevious from './hooks/usePrevious';
 
 const HIDE_TOPCARD_DURATION = 2000; // milliseconds
 
-const getLegType = (leg, firstLeg, interlineWithPreviousLeg) => {
+const getLegType = (leg, firstLeg, time, interlineWithPreviousLeg) => {
   let legType;
-  const currentTime = Date.now();
-  if (currentTime < legTime(firstLeg.start)) {
+  if (time < legTime(firstLeg.start)) {
     if (!firstLeg.forceStart) {
       legType = LEGTYPE.PENDING;
     } else {
@@ -79,7 +78,7 @@ function NaviCardContainer(
   }
 
   // track only relevant vehicles for the journey.
-  // add 20 s buffer so that vehicle location is available
+  // addd 20 s buffer so that vehicle location is available
   // for leg validation long enough
   const getNaviTopics = () =>
     getTopics(
@@ -186,14 +185,17 @@ function NaviCardContainer(
     return () => clearTimeout(timeoutId);
   }, [time, firstLeg]);
 
-  // LegChange fires animation, we need to keep the old data from the first render until card goes out of the view.
-  const cardChanging = legChanged || legChanging;
-  const l = cardChanging ? previousLeg : currentLeg;
-  const nl = cardChanging ? currentLeg : nextLeg;
-  const legType = getLegType(l, firstLeg, nl?.interlineWithPreviousLeg);
+  // LegChange fires animation, we need to keep the old data until card goes out of the view.
+  const l = legChanging ? previousLeg : currentLeg;
+  const legType = getLegType(
+    l,
+    firstLeg,
+    time,
+    nextLeg?.interlineWithPreviousLeg,
+  );
 
   let className;
-  if (isJourneyCompleted || cardChanging) {
+  if (isJourneyCompleted || legChanging) {
     className = 'hide-card';
   } else {
     className = 'show-card';
@@ -208,7 +210,7 @@ function NaviCardContainer(
     >
       <NaviCard
         leg={l}
-        nextLeg={nl}
+        nextLeg={nextLeg}
         legType={legType}
         time={time}
         position={position}
diff --git a/app/component/itinerary/navigator/hooks/useRealtimeLegs.js b/app/component/itinerary/navigator/hooks/useRealtimeLegs.js
index 99686f08b9..7b00ac760f 100644
--- a/app/component/itinerary/navigator/hooks/useRealtimeLegs.js
+++ b/app/component/itinerary/navigator/hooks/useRealtimeLegs.js
@@ -82,7 +82,7 @@ const useRealtimeLegs = (
   }, [fetchAndSetRealtimeLegs]);
 
   const { firstLeg, lastLeg, currentLeg, nextLeg, previousLeg } =
-    getLegsOfInterest(itinerary.legs);
+    getLegsOfInterest(itinerary.legs, params.updatedAt);
 
   const tailLength = currentLeg
     ? getRemainingTraversal(
diff --git a/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js b/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js
index 0c20431899..11c00c7e88 100644
--- a/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js
+++ b/app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js
@@ -124,9 +124,10 @@ function matchLegEnds(legs) {
 /**
  * Extracts legs of interest (current, next, previous, etc.) based on the current time.
  * @param {Array} legs - Array of legs.
+ * @param {number} now - Current timestamp in milliseconds.
  * @returns {Object} Object containing legs of interest.
  */
-function getLegsOfInterest(legs) {
+function getLegsOfInterest(legs, now) {
   if (!legs?.length) {
     return {
       firstLeg: undefined,
@@ -135,7 +136,6 @@ function getLegsOfInterest(legs) {
       nextLeg: undefined,
     };
   }
-  const now = Date.now();
   const currentLeg = legs.find(
     ({ start, end }) => legTime(start) <= now && legTime(end) >= now,
   );
@@ -246,7 +246,7 @@ const BOARD_DELAY = 20000; // 20s, default delay for card change in transit boar
 // Apparently we should consider if the leg ends at an end stop
 // also geolocation certainty plays important role
 function shiftLegsByGeolocation(legs, time, vehicles, position, origin) {
-  const { previousLeg, currentLeg, nextLeg } = getLegsOfInterest(legs);
+  const { previousLeg, currentLeg, nextLeg } = getLegsOfInterest(legs, time);
   let confirm;
 
   if (previousLeg && !previousLeg.freezeEnd) {

From 373e6c48c33e05d6df5bf9d2ec4765e4b1dce55d Mon Sep 17 00:00:00 2001
From: sharhio <sade.harhio@cgi.com>
Date: Wed, 10 Dec 2025 16:05:16 +0200
Subject: [PATCH 3/3] fix flashing card only

---
 .../itinerary/navigator/NaviCardContainer.js    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index 968ae3d91c..b9a9a684d3 100644
--- a/app/component/itinerary/navigator/NaviCardContainer.js
+++ b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -89,7 +89,7 @@ function NaviCardContainer(
   }
 
   // track only relevant vehicles for the journey.
-  // addd 20 s buffer so that vehicle location is available
+  // add 20 s buffer so that vehicle location is available
   // for leg validation long enough
   const getNaviTopics = () =>
     getTopics(
@@ -199,16 +199,13 @@ function NaviCardContainer(
   }, [time, firstLeg]);
 
   // LegChange fires animation, we need to keep the old data until card goes out of the view.
-  const l = legChanging ? previousLeg : currentLeg;
-  const legType = getLegType(
-    l,
-    firstLeg,
-    time,
-    nextLeg?.interlineWithPreviousLeg,
-  );
+  const cardChanging = legChanged || legChanging;
+  const l = cardChanging ? previousLeg : currentLeg;
+  const nl = cardChanging ? currentLeg : nextLeg;
+  const legType = getLegType(l, firstLeg, time, nl?.interlineWithPreviousLeg);
 
   let className;
-  if (isJourneyCompleted || legChanging) {
+  if (isJourneyCompleted || cardChanging) {
     className = 'hide-card';
   } else {
     className = 'show-card';
@@ -223,7 +220,7 @@ function NaviCardContainer(
     >
       <NaviCard
         leg={l}
-        nextLeg={nextLeg}
+        nextLeg={nl}
         legType={legType}
         time={time}
         position={position}