From 9ed0632c04c1bf28df6f5fef8713478a14d4fa6f Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Mon, 25 Nov 2024 13:29:44 +0200
Subject: [PATCH 01/18] hide backbutton

Add show alternatives button

notification bell icons

style fixes to navistack cards
---
 app/component/itinerary/ItineraryDetails.js   |  2 +
 app/component/itinerary/ItineraryPage.js      |  1 +
 app/component/itinerary/PlanConnection.js     |  8 ++
 .../itinerary/navigator/NaviCardContainer.js  | 24 ++++-
 .../itinerary/navigator/NaviMessage.js        | 12 +--
 .../itinerary/navigator/NaviUtils.js          | 94 +++++++++++++++----
 .../itinerary/navigator/navigator.scss        | 61 +++++++++---
 app/component/map/ItineraryPageMap.js         |  5 +-
 static/assets/svg-sprite.default.svg          |  3 +
 static/assets/svg-sprite.hsl.svg              |  3 +
 10 files changed, 168 insertions(+), 45 deletions(-)

diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js
index 8e92712666..656cfbd580 100644
--- a/app/component/itinerary/ItineraryDetails.js
+++ b/app/component/itinerary/ItineraryDetails.js
@@ -615,6 +615,8 @@ const withRelay = createFragmentContainer(
               effectiveStartDate
               alertHeaderText
               alertDescriptionText
+              id
+              alertHash
               entities {
                 __typename
                 ... on Route {
diff --git a/app/component/itinerary/ItineraryPage.js b/app/component/itinerary/ItineraryPage.js
index c9b4c60e83..9e8d58afc5 100644
--- a/app/component/itinerary/ItineraryPage.js
+++ b/app/component/itinerary/ItineraryPage.js
@@ -1064,6 +1064,7 @@ export default function ItineraryPage(props, context) {
         showDurationBubble={planEdges?.[0]?.node.legs?.length === 1}
         objectsToHide={objectsToHide}
         itinerary={explicitItinerary}
+        naviMode={naviMode}
       />
     );
   }
diff --git a/app/component/itinerary/PlanConnection.js b/app/component/itinerary/PlanConnection.js
index febd5c852f..b6f69f3aa4 100644
--- a/app/component/itinerary/PlanConnection.js
+++ b/app/component/itinerary/PlanConnection.js
@@ -74,6 +74,14 @@ const planConnection = graphql`
             interlineWithPreviousLeg
             headsign
             realtimeState
+            alerts {
+              alertSeverityLevel
+              effectiveStartDate
+              effectiveEndDate
+              alertDescriptionText
+              alertHeaderText
+              id
+            }
             intermediatePlaces {
               arrival {
                 scheduledTime
diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index 2ffc89828c..0cfe86d3e5 100644
--- a/app/component/itinerary/navigator/NaviCardContainer.js
+++ b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { intlShape } from 'react-intl';
 import distance from '@digitransit-search-util/digitransit-search-util-distance';
+import { matchShape, routerShape } from 'found';
 import { legShape, configShape } from '../../../util/shapes';
 import { legTime, legTimeStr } from '../../../util/legUtils';
 import NaviCard from './NaviCard';
@@ -26,7 +27,7 @@ function getNextLeg(legs, time) {
 }
 function NaviCardContainer(
   { focusToLeg, time, realTimeLegs, position },
-  { intl, config },
+  { intl, config, match, router },
 ) {
   const [currentLeg, setCurrentLeg] = useState(null);
   const [cardExpanded, setCardExpanded] = useState(false);
@@ -51,6 +52,7 @@ function NaviCardContainer(
   useEffect(() => {
     if (cardRef.current) {
       const contentHeight = cardRef.current.clientHeight;
+
       // Navistack top position depending on main card height.
       setTopPosition(contentHeight + 86);
     }
@@ -65,7 +67,13 @@ function NaviCardContainer(
 
     // TODO proper alert handling.
     // Alerts for NaviStack
-    const alerts = getItineraryAlerts(realTimeLegs, intl, messages);
+    const alerts = getItineraryAlerts(
+      realTimeLegs,
+      intl,
+      messages,
+      match.params,
+      router,
+    );
     alerts.forEach(alert => {
       incomingMessages.set(alert.id, alert);
     });
@@ -80,7 +88,12 @@ function NaviCardContainer(
 
       if (nextLeg?.transitLeg) {
         // Messages for NaviStack.
-        const transitLegState = getTransitLegState(nextLeg, intl, messages);
+        const transitLegState = getTransitLegState(
+          nextLeg,
+          intl,
+          messages,
+          time,
+        );
         if (transitLegState) {
           incomingMessages.set(transitLegState.id, transitLegState);
         }
@@ -185,8 +198,9 @@ function NaviCardContainer(
         type="button"
         className={`navitop ${cardExpanded ? 'expanded' : ''}`}
         onClick={handleClick}
+        ref={cardRef}
       >
-        <div className="content" ref={cardRef}>
+        <div className="content">
           <NaviCard
             leg={currentLeg}
             nextLeg={nextLeg}
@@ -229,6 +243,8 @@ NaviCardContainer.defaultProps = {
 NaviCardContainer.contextTypes = {
   intl: intlShape.isRequired,
   config: configShape.isRequired,
+  match: matchShape.isRequired,
+  router: routerShape.isRequired,
 };
 
 export default NaviCardContainer;
diff --git a/app/component/itinerary/navigator/NaviMessage.js b/app/component/itinerary/navigator/NaviMessage.js
index 5d5c4e73b6..ab11e62134 100644
--- a/app/component/itinerary/navigator/NaviMessage.js
+++ b/app/component/itinerary/navigator/NaviMessage.js
@@ -20,7 +20,7 @@ function NaviMessage({ severity, children, index, handleRemove }, { config }) {
   let color;
   switch (severity) {
     case 'INFO':
-      iconId = 'icon-icon_info';
+      iconId = 'notification-bell';
       color = '#0074BF';
       break;
     case 'WARNING':
@@ -32,7 +32,7 @@ function NaviMessage({ severity, children, index, handleRemove }, { config }) {
       color = '#DC0451';
       break;
     default:
-      iconId = 'icon-icon_info';
+      iconId = 'notification-bell';
       color = '#0074BF';
   }
   return (
@@ -43,13 +43,7 @@ function NaviMessage({ severity, children, index, handleRemove }, { config }) {
         `${severity.toLowerCase()}`,
       )}
     >
-      <Icon
-        img={iconId}
-        height={1.4}
-        width={1.4}
-        className="info-icon"
-        color={color}
-      />
+      <Icon img={iconId} height={1.4} width={1.4} color={color} />
       {children}
       <button
         type="button"
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 0cdfa580f6..a2d4fe02d2 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -4,9 +4,10 @@ import { legTime } from '../../../util/legUtils';
 import { timeStr } from '../../../util/timeUtils';
 import { getFaresFromLegs } from '../../../util/fareUtils';
 import { ExtendedRouteTypes } from '../../../constants';
+import { getItineraryPagePath } from '../../../util/path';
 
 const TRANSFER_SLACK = 60000;
-
+const DISPLAY_MESSAGE_THRESHOLD = 120 * 1000; // 2 minutes
 function findTransferProblem(legs) {
   for (let i = 1; i < legs.length - 1; i++) {
     const prev = legs[i - 1];
@@ -36,9 +37,8 @@ function findTransferProblem(legs) {
 
 export const getAdditionalMessages = (leg, time, intl, config, messages) => {
   const msgs = [];
-  const ticketDisplay = 120 * 1000; // 2 minutes
   const ticketMsg = messages.get('ticket');
-  if (!ticketMsg && legTime(leg.start) - time < ticketDisplay) {
+  if (!ticketMsg && legTime(leg.start) - time < DISPLAY_MESSAGE_THRESHOLD) {
     // Todo: multiple fares?
     const fare = getFaresFromLegs([leg], config)[0];
     msgs.push({
@@ -57,7 +57,7 @@ export const getAdditionalMessages = (leg, time, intl, config, messages) => {
   return msgs;
 };
 
-export const getTransitLegState = (leg, intl, messages) => {
+export const getTransitLegState = (leg, intl, messages, time) => {
   const { start, realtimeState, from, mode, legId } = leg;
   const { scheduledTime, estimated } = start;
   if (mode === 'WALK') {
@@ -66,7 +66,7 @@ export const getTransitLegState = (leg, intl, messages) => {
   const previousMessage = messages.get(legId);
   const prevSeverity = previousMessage ? previousMessage.severity : null;
 
-  const late = estimated?.delay > 0;
+  const late = estimated?.delay > DISPLAY_MESSAGE_THRESHOLD;
   const localizedMode = intl.formatMessage({
     id: `${mode.toLowerCase()}`,
     defaultMessage: `${mode}`,
@@ -79,7 +79,11 @@ export const getTransitLegState = (leg, intl, messages) => {
     // todo: Do this when design is ready.
     severity = 'ALERT';
     content = <div className="navi-info-content"> Kulkuneuvo on myöhässä </div>;
-  } else if (!isRealTime && prevSeverity !== 'WARNING') {
+  } else if (
+    !isRealTime &&
+    prevSeverity !== 'WARNING' &&
+    legTime(start) - time < DISPLAY_MESSAGE_THRESHOLD
+  ) {
     severity = 'WARNING';
     content = (
       <div className="navi-info-content">
@@ -122,19 +126,75 @@ export const getTransitLegState = (leg, intl, messages) => {
   return state;
 };
 
+const onClick = (e, location, router) => {
+  const f = getItineraryPagePath('POS', location.to);
+  router.push(f);
+};
 // We'll need the intl later.
 // eslint-disable-next-line no-unused-vars
-export const getItineraryAlerts = (realTimeLegs, intl, messages) => {
+export const getItineraryAlerts = (
+  realTimeLegs,
+  intl,
+  messages,
+  location,
+  router,
+) => {
   const alerts = [];
   const canceled = realTimeLegs.filter(leg => leg.realtimeState === 'CANCELED');
+  const legAlerts =
+    realTimeLegs.flatMap(leg => {
+      return leg.alerts?.filter(
+        alert =>
+          alert.alertSeverityLevel === 'WARNING' ||
+          alert.alertSeverityLevel === 'SEVERE',
+      );
+    }) || [];
+
   const transferProblem = findTransferProblem(realTimeLegs);
-  const late = realTimeLegs.filter(leg => leg.start.estimate?.delay > 0);
+  const late = realTimeLegs.filter(
+    leg =>
+      leg.start.estimated?.delay > DISPLAY_MESSAGE_THRESHOLD ||
+      leg.start.estimated?.delay < -DISPLAY_MESSAGE_THRESHOLD,
+  );
   let content;
-  // TODO: Proper ID handling
+  const withShowRoutesBtn = children => (
+    <div className="alt-btn">
+      {children}
+      <button
+        className="show-options"
+        type="button"
+        onClick={e => onClick(e, location, router)}
+      >
+        <FormattedMessage id="settings-dropdown-open-label" />
+      </button>
+    </div>
+  );
+  if (legAlerts.length > 0) {
+    legAlerts.forEach(alert => {
+      content = (
+        <div className="notifiler">
+          <span className="header"> {alert.alertHeaderText}</span>
+          <span className="description">{alert.alertDescriptionText}</span>
+        </div>
+      );
+      if (!messages.get(alert.id)) {
+        alerts.push({
+          severity: 'ALERT',
+          content,
+          id: alert.id,
+        });
+      }
+    });
+  }
+  // todo no current design
   if (canceled.length > 0 && !messages.get('canceled')) {
-    content = <div className="notifiler">Osa matkan lähdöistä on peruttu</div>;
-    // Todo: No current design
-    // todo find modes that are canceled
+    content = withShowRoutesBtn(
+      <div className="notifiler">
+        <span> X on peruuntunut</span>
+        <span> Valitettavasti matkasi ei toteudu suunnitellusti</span>
+      </div>,
+    );
+
     alerts.push({
       severity: 'ALERT',
       content,
@@ -145,8 +205,8 @@ export const getItineraryAlerts = (realTimeLegs, intl, messages) => {
     const transferId = `transfer-${transferProblem[0].legId}-${transferProblem[1].legId}}`;
     if (!messages.get(transferId)) {
       // todo no current design
-      content = (
-        <div className="notifiler">{`Vaihto ${transferProblem[0].route.shortName} - ${transferProblem[1].route.shortName} ei onnistu reittisuunnitelman mukaisesti`}</div>
+      content = withShowRoutesBtn(
+        <div className="notifiler">{`Vaihto ${transferProblem[0].route.shortName} - ${transferProblem[1].route.shortName} ei onnistu reittisuunnitelman mukaisesti`}</div>,
       );
 
       alerts.push({
@@ -156,14 +216,14 @@ export const getItineraryAlerts = (realTimeLegs, intl, messages) => {
       });
     }
   }
-  if (late.length && !messages.get('late')) {
+  if (late.length && !messages.get(late.legId)) {
     // Todo: No current design
     // Todo add mode and delay time to this message
     content = <div className="notifiler">Kulkuneuvo on myöhässä</div>;
     alerts.push({
-      severity: 'ALERT',
+      severity: 'WARNING',
       content,
-      id: 'late',
+      id: late.legId,
     });
   }
 
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index fe9c28cde9..b8b0ac5114 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -65,12 +65,6 @@
     right: 20px;
   }
 
-  .notifier {
-    margin: 15px 20px 0 20px;
-    width: 100%;
-    color: red;
-  }
-
   .content {
     width: 100%;
 
@@ -371,7 +365,7 @@
     margin-top: 0;
   }
 
-  div:not(:first-child) {
+  .info-stack-item:not(:first-child) {
     margin-top: 5px;
   }
 
@@ -389,7 +383,14 @@
     border-radius: 15px;
     display: flex;
     align-items: center;
-    height: 100%;
+    padding: 16px;
+
+    .icon-container {
+      display: flex;
+      align-self: flex-start;
+      height: 16px;
+      width: 16px;
+    }
 
     &.info {
       background-color: #e5f2fa;
@@ -401,6 +402,39 @@
 
     &.alert {
       background-color: #fdf3f6;
+
+      .notifiler {
+        display: flex;
+        flex-direction: column;
+        margin-left: 8px;
+
+        .header {
+          font-weight: $font-weight-medium;
+          font-size: $font-size-normal;
+        }
+
+        .description {
+          font-size: $font-size-xsmall;
+        }
+      }
+
+      .alt-btn {
+        display: flex;
+        flex-direction: column;
+
+        .show-options {
+          padding: var(--space-s, 16px) var(--space-xs, 8px)
+            var(--space-s, 16px) var(--space-s, 16px);
+          background: #0074bf;
+          color: #fff;
+          border-radius: 999px; // var(--radius-radius-medium, 8px);
+          margin-top: var(--space-xxs);
+
+          /* box-shadow-card-s-strong */
+          box-shadow: 0 2px 4px 0
+            var(--color-shadow-strong, rgba(51, 51, 51, 0.2));
+        }
+      }
     }
 
     &.slide-out-right {
@@ -409,14 +443,12 @@
     }
 
     .info-close {
-      position: absolute;
-      top: 7px;
-      right: 9px;
+      display: flex;
+      align-self: flex-start;
     }
 
     .info-icon {
-      margin-top: 10px;
-      margin-left: 20px;
+      margin-right: 8px;
     }
 
     &.slide-in {
@@ -441,7 +473,8 @@
     .navi-info-content {
       display: flex;
       flex-direction: column;
-      margin-left: 15px;
+      margin-left: 8px;
+      width: 100%;
 
       span:first-child {
         font-weight: $font-weight-medium;
diff --git a/app/component/map/ItineraryPageMap.js b/app/component/map/ItineraryPageMap.js
index ebe377a125..3ce67b103b 100644
--- a/app/component/map/ItineraryPageMap.js
+++ b/app/component/map/ItineraryPageMap.js
@@ -31,6 +31,7 @@ function ItineraryPageMap(
     topics,
     showDurationBubble,
     itinerary,
+    naviMode,
     ...rest
   },
   { match, router, executeAction, config },
@@ -114,7 +115,7 @@ function ItineraryPageMap(
       zoom={POINT_FOCUS_ZOOM}
       {...rest}
     >
-      {breakpoint !== 'large' && (
+      {!naviMode && breakpoint !== 'large' && (
         <BackButton
           icon="icon-icon_arrow-collapse--left"
           iconClassName="arrow-icon"
@@ -147,6 +148,7 @@ ItineraryPageMap.propTypes = {
   viaPoints: PropTypes.arrayOf(locationShape).isRequired,
   showDurationBubble: PropTypes.bool,
   itinerary: itineraryShape,
+  naviMode: PropTypes.bool,
 };
 
 ItineraryPageMap.defaultProps = {
@@ -155,6 +157,7 @@ ItineraryPageMap.defaultProps = {
   showVehicles: false,
   showDurationBubble: false,
   itinerary: undefined,
+  naviMode: false,
 };
 
 ItineraryPageMap.contextTypes = {
diff --git a/static/assets/svg-sprite.default.svg b/static/assets/svg-sprite.default.svg
index eb90ad78d7..778f5b9032 100644
--- a/static/assets/svg-sprite.default.svg
+++ b/static/assets/svg-sprite.default.svg
@@ -2852,5 +2852,8 @@
 <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M5.5 4C5.5 3.44772 5.05228 3 4.5 3C3.94772 3 3.5 3.44772 3.5 4V11C3.5 12.3261 4.02678 13.5979 4.96447 14.5355C5.90215 15.4732 7.17392 16 8.5 16H17.0858L13.7929 19.2929C13.4024 19.6834 13.4024 20.3166 13.7929 20.7071C14.1834 21.0976 14.8166 21.0976 15.2071 20.7071L20.2071 15.7071C20.5976 15.3166 20.5976 14.6834 20.2071 14.2929L15.2071 9.29289C14.8166 8.90237 14.1834 8.90237 13.7929 9.29289C13.4024 9.68342 13.4024 10.3166 13.7929 10.7071L17.0858 14H8.5C7.70435 14 6.94129 13.6839 6.37868 13.1213C5.81607 12.5587 5.5 11.7956 5.5 11V4Z" fill="#333333"/>
 </g>
 </symbol>
+<symbol id="notification-bell" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 12.5932C10 13.3705 9.25381 14.0007 8.33333 14.0007C7.41286 14.0007 6.66667 13.3705 6.66667 12.5932H10ZM8 1.33398C9.42862 1.33398 11.8928 2.52531 11.8928 6.32985C11.8928 8.86621 12.5952 10.7194 14 11.8895H2C3.40479 10.7194 4.10719 8.86621 4.10719 6.32985C4.10719 2.52531 6.57138 1.33398 8 1.33398Z" fill="#0074BF"/>
+</symbol>
 </defs>
 </svg>
diff --git a/static/assets/svg-sprite.hsl.svg b/static/assets/svg-sprite.hsl.svg
index 44ccd31144..111fe28487 100644
--- a/static/assets/svg-sprite.hsl.svg
+++ b/static/assets/svg-sprite.hsl.svg
@@ -2797,4 +2797,7 @@
 <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M5.5 4C5.5 3.44772 5.05228 3 4.5 3C3.94772 3 3.5 3.44772 3.5 4V11C3.5 12.3261 4.02678 13.5979 4.96447 14.5355C5.90215 15.4732 7.17392 16 8.5 16H17.0858L13.7929 19.2929C13.4024 19.6834 13.4024 20.3166 13.7929 20.7071C14.1834 21.0976 14.8166 21.0976 15.2071 20.7071L20.2071 15.7071C20.5976 15.3166 20.5976 14.6834 20.2071 14.2929L15.2071 9.29289C14.8166 8.90237 14.1834 8.90237 13.7929 9.29289C13.4024 9.68342 13.4024 10.3166 13.7929 10.7071L17.0858 14H8.5C7.70435 14 6.94129 13.6839 6.37868 13.1213C5.81607 12.5587 5.5 11.7956 5.5 11V4Z" fill="#333333"/>
 </g>
 </symbol>
+<symbol id="notification-bell" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 12.5932C10 13.3705 9.25381 14.0007 8.33333 14.0007C7.41286 14.0007 6.66667 13.3705 6.66667 12.5932H10ZM8 1.33398C9.42862 1.33398 11.8928 2.52531 11.8928 6.32985C11.8928 8.86621 12.5952 10.7194 14 11.8895H2C3.40479 10.7194 4.10719 8.86621 4.10719 6.32985C4.10719 2.52531 6.57138 1.33398 8 1.33398Z" fill="#0074BF"/>
+</symbol>
 </svg>

From 857b61b84df581bd12a86314ce6837c2c9587a56 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Tue, 26 Nov 2024 08:57:03 +0200
Subject: [PATCH 02/18] premilinerary styles, translation for late and canceled
 messages

new close button
---
 .../itinerary/navigator/NaviMessage.js        |  5 +-
 .../itinerary/navigator/NaviUtils.js          | 76 ++++++++++++++-----
 .../itinerary/navigator/navigator.scss        | 29 ++++++-
 app/component/itinerary/queries/LegQuery.js   |  9 ++-
 app/translations.js                           | 12 +++
 static/assets/svg-sprite.default.svg          |  4 +
 static/assets/svg-sprite.hsl.svg              |  4 +
 7 files changed, 112 insertions(+), 27 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviMessage.js b/app/component/itinerary/navigator/NaviMessage.js
index ab11e62134..81c4d93277 100644
--- a/app/component/itinerary/navigator/NaviMessage.js
+++ b/app/component/itinerary/navigator/NaviMessage.js
@@ -51,9 +51,8 @@ function NaviMessage({ severity, children, index, handleRemove }, { config }) {
         onClick={() => handleRemoveClick()}
       >
         <Icon
-          img="icon-icon_close"
-          height={0.8}
-          width={0.8}
+          img="notification-close"
+          className="notification-close"
           color={config.colors.primary}
         />
       </button>
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index a2d4fe02d2..78c2d52051 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -156,6 +156,7 @@ export const getItineraryAlerts = (
       leg.start.estimated?.delay > DISPLAY_MESSAGE_THRESHOLD ||
       leg.start.estimated?.delay < -DISPLAY_MESSAGE_THRESHOLD,
   );
+  const abortTrip = <FormattedMessage id="navigation-abort-trip" />;
   let content;
   const withShowRoutesBtn = children => (
     <div className="alt-btn">
@@ -174,7 +175,6 @@ export const getItineraryAlerts = (
       content = (
         <div className="notifiler">
           <span className="header"> {alert.alertHeaderText}</span>
-          <span className="description">{alert.alertDescriptionText}</span>
         </div>
       );
       if (!messages.get(alert.id)) {
@@ -187,28 +187,51 @@ export const getItineraryAlerts = (
     });
   }
   // todo no current design
-  if (canceled.length > 0 && !messages.get('canceled')) {
-    content = withShowRoutesBtn(
-      <div className="notifiler">
-        <span> X on peruuntunut</span>
-        <span> Valitettavasti matkasi ei toteudu suunnitellusti</span>
-      </div>,
-    );
+  if (canceled.length > 0) {
+    // show routes button only for first canceled leg.
+    canceled.forEach((leg, i) => {
+      const { legId, mode, route } = leg;
 
-    alerts.push({
-      severity: 'ALERT',
-      content,
-      id: 'canceled',
+      const lMode = intl.formatMessage({
+        id: `${mode.toLowerCase()}`,
+        defaultMessage: `${mode}`,
+      });
+      const routeName = `${lMode} ${route.shortName}`;
+      const m = (
+        <FormattedMessage
+          id="navigation-mode-canceled"
+          values={{ routeName }}
+        />
+      );
+      if (i === 0) {
+        content = withShowRoutesBtn(
+          <div className="notifiler">
+            {m}
+            {abortTrip}
+          </div>,
+        );
+      } else {
+        content = <div className="notifiler">{m}</div>;
+      }
+      if (!messages.get(`canceled-${legId}`)) {
+        alerts.push({
+          severity: 'ALERT',
+          content,
+          id: `canceled-${legId}`,
+        });
+      }
     });
   }
+
   if (transferProblem !== null) {
     const transferId = `transfer-${transferProblem[0].legId}-${transferProblem[1].legId}}`;
     if (!messages.get(transferId)) {
-      // todo no current design
       content = withShowRoutesBtn(
-        <div className="notifiler">{`Vaihto ${transferProblem[0].route.shortName} - ${transferProblem[1].route.shortName} ei onnistu reittisuunnitelman mukaisesti`}</div>,
+        <div className="notifiler">
+          <span>{`Vaihto ${transferProblem[0].route.shortName} - ${transferProblem[1].route.shortName} ei onnistu`}</span>
+          {abortTrip}
+        </div>,
       );
-
       alerts.push({
         severity: 'ALERT',
         content,
@@ -219,11 +242,24 @@ export const getItineraryAlerts = (
   if (late.length && !messages.get(late.legId)) {
     // Todo: No current design
     // Todo add mode and delay time to this message
-    content = <div className="notifiler">Kulkuneuvo on myöhässä</div>;
-    alerts.push({
-      severity: 'WARNING',
-      content,
-      id: late.legId,
+    late.forEach(leg => {
+      const { legId, mode, route } = leg;
+      const lMode = intl.formatMessage({
+        id: `${mode.toLowerCase()}`,
+        defaultMessage: `${mode}`,
+      });
+      const routeName = `${lMode} ${route.shortName}`;
+
+      content = (
+        <div className="notifiler">
+          <FormattedMessage id="navigation-mode-late" values={{ routeName }} />
+        </div>
+      );
+      alerts.push({
+        severity: 'WARNING',
+        content,
+        id: `late-${legId}`,
+      });
     });
   }
 
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index b8b0ac5114..157804882a 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -398,6 +398,10 @@
 
     &.warning {
       background-color: #fff8e8;
+
+      .notifiler {
+        width: 100%;
+      }
     }
 
     &.alert {
@@ -408,19 +412,25 @@
         flex-direction: column;
         margin-left: 8px;
 
-        .header {
+        span:first-child {
           font-weight: $font-weight-medium;
           font-size: $font-size-normal;
         }
 
-        .description {
-          font-size: $font-size-xsmall;
+        span:last-child {
+          font-size: $font-size-small;
+          font-weight: $font-weight-book;
+        }
+
+        .header {
+          font-size: $font-size-small;
         }
       }
 
       .alt-btn {
         display: flex;
         flex-direction: column;
+        width: 100%;
 
         .show-options {
           padding: var(--space-s, 16px) var(--space-xs, 8px)
@@ -445,6 +455,19 @@
     .info-close {
       display: flex;
       align-self: flex-start;
+      margin-left: 1px;
+
+      .icon-container {
+        height: 24px;
+        width: 24px;
+
+        .icon {
+          &.notification-close {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
     }
 
     .info-icon {
diff --git a/app/component/itinerary/queries/LegQuery.js b/app/component/itinerary/queries/LegQuery.js
index 94dbc7f4d5..8865f4dfd4 100644
--- a/app/component/itinerary/queries/LegQuery.js
+++ b/app/component/itinerary/queries/LegQuery.js
@@ -16,7 +16,14 @@ const legQuery = graphql`
           time
         }
       }
-
+      intermediatePlaces {
+        arrival {
+          scheduledTime
+          estimated {
+            time
+          }
+        }
+      }
       to {
         vehicleRentalStation {
           availableVehicles {
diff --git a/app/translations.js b/app/translations.js
index 56ba592ba4..a5c598a01a 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -1294,6 +1294,8 @@ const translations = {
     'move-to-tab': 'Go to tab {number}',
     'navidest-show-on-map': 'Show route on map',
     navigate: 'Navigate',
+    'navigation-abort-trip':
+      'TODO_Valitettavasti matkasi ei toteudu suunnitellusti.',
     'navigation-description': 'Journey guidance',
     'navigation-header': 'Journey tracking',
     'navigation-intro-begin': 'TODO_navigation-intro-begin_EN',
@@ -1307,6 +1309,8 @@ const translations = {
       'TODO_navigation-intro-login-prompt_EN',
     'navigation-journey-end': 'Journey has ended',
     'navigation-journey-start': 'Your journey starts {time}',
+    'navigation-mode-canceled': 'TODO_{mode} on peruuntunut',
+    'navigation-mode-late:': 'TODO_{mode} on myöhässä',
     'navigation-quit': 'Quit',
     'navigation-remember-ticket': 'TODO_Muistithan ostaa lipun?',
     'navigation-start': 'Start journey',
@@ -2553,6 +2557,8 @@ const translations = {
     'move-to-tab': 'Siirry välilehdelle {number}',
     'navidest-show-on-map': 'Näytä reitti kartalla',
     navigate: 'Navigoi',
+    'navigation-abort-trip':
+      'Valitettavasti matkasi ei toteudu suunnitellusti.',
     'navigation-description': 'Löydä perille ohjatusti',
     'navigation-header': 'Matkan seuranta',
     'navigation-intro-begin': 'Aloita matka',
@@ -2566,6 +2572,8 @@ const translations = {
     'navigation-intro-notifications-header': 'Ilmoitukset ja muutokset',
     'navigation-journey-end': 'Matka on päättynyt',
     'navigation-journey-start': 'Matkasi alkaa {time}',
+    'navigation-mode-canceled': '{mode} on peruuntunut',
+    'navigation-mode-late:': '{mode} on myöhässä',
     'navigation-quit': 'Poistu',
     'navigation-remember-ticket': 'Muistithan ostaa lipun?',
     'navigation-start': 'Matkalle',
@@ -5463,6 +5471,8 @@ const translations = {
     'move-to-tab': 'Gå till fliken {number}',
     'navidest-show-on-map': 'Visa rutt på kartan',
     navigate: 'Navigera',
+    'navigation-abort-trip':
+      'TODO_Valitettavasti matkasi ei toteudu suunnitellusti.',
     'navigation-description': 'Hitta fram med vägledning.',
     'navigation-header': 'Följa',
     'navigation-intro-begin': 'TODO_navigation-intro-begin_SV',
@@ -5476,6 +5486,8 @@ const translations = {
       'TODO_navigation-intro-login-prompt_SV',
     'navigation-journey-end': 'Resan är över',
     'navigation-journey-start': 'Din resa börjar {time}',
+    'navigation-mode-canceled': 'TODO_{mode} on peruuntunut',
+    'navigation-mode-late:': 'TODO_{mode} on myöhässä',
     'navigation-quit': 'Sluta',
     'navigation-remember-ticket': 'TODO_Muistithan ostaa lipun?',
     'navigation-start': 'På resa',
diff --git a/static/assets/svg-sprite.default.svg b/static/assets/svg-sprite.default.svg
index 778f5b9032..d56ea49ba7 100644
--- a/static/assets/svg-sprite.default.svg
+++ b/static/assets/svg-sprite.default.svg
@@ -2855,5 +2855,9 @@
 <symbol id="notification-bell" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10 12.5932C10 13.3705 9.25381 14.0007 8.33333 14.0007C7.41286 14.0007 6.66667 13.3705 6.66667 12.5932H10ZM8 1.33398C9.42862 1.33398 11.8928 2.52531 11.8928 6.32985C11.8928 8.86621 12.5952 10.7194 14 11.8895H2C3.40479 10.7194 4.10719 8.86621 4.10719 6.32985C4.10719 2.52531 6.57138 1.33398 8 1.33398Z" fill="#0074BF"/>
 </symbol>
+<symbol id="notification-close" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1522 16L21.7614 11.3908C22.0795 11.0726 22.0795 10.5568 21.7614 10.2386C21.4432 9.92047 20.9274 9.92047 20.6092 10.2386L16 14.8478L11.3908 10.2386C11.0727 9.92047 10.5569 9.92047 10.2387 10.2386C9.92046 10.5568 9.92046 11.0727 10.2386 11.3908L14.8478 16L10.2386 20.6091C9.92046 20.9273 9.92046 21.4432 10.2386 21.7613C10.5569 22.0795 11.0727 22.0795 11.3908 21.7614L16 17.1522L20.6092 21.7613C20.9274 22.0795 21.4432 22.0795 21.7614 21.7613C22.0795 21.4432 22.0795 20.9274 21.7614 20.6092L17.1522 16Z" fill="#0074BF"/>
+</symbol>
 </defs>
 </svg>
diff --git a/static/assets/svg-sprite.hsl.svg b/static/assets/svg-sprite.hsl.svg
index 111fe28487..cffbd407fd 100644
--- a/static/assets/svg-sprite.hsl.svg
+++ b/static/assets/svg-sprite.hsl.svg
@@ -2800,4 +2800,8 @@
 <symbol id="notification-bell" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10 12.5932C10 13.3705 9.25381 14.0007 8.33333 14.0007C7.41286 14.0007 6.66667 13.3705 6.66667 12.5932H10ZM8 1.33398C9.42862 1.33398 11.8928 2.52531 11.8928 6.32985C11.8928 8.86621 12.5952 10.7194 14 11.8895H2C3.40479 10.7194 4.10719 8.86621 4.10719 6.32985C4.10719 2.52531 6.57138 1.33398 8 1.33398Z" fill="#0074BF"/>
 </symbol>
+<symbol id="notification-close" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1522 16L21.7614 11.3908C22.0795 11.0726 22.0795 10.5568 21.7614 10.2386C21.4432 9.92047 20.9274 9.92047 20.6092 10.2386L16 14.8478L11.3908 10.2386C11.0727 9.92047 10.5569 9.92047 10.2387 10.2386C9.92046 10.5568 9.92046 11.0727 10.2386 11.3908L14.8478 16L10.2386 20.6091C9.92046 20.9273 9.92046 21.4432 10.2386 21.7613C10.5569 22.0795 11.0727 22.0795 11.3908 21.7614L16 17.1522L20.6092 21.7613C20.9274 22.0795 21.4432 22.0795 21.7614 21.7613C22.0795 21.4432 22.0795 20.9274 21.7614 20.6092L17.1522 16Z" fill="#0074BF"/>
+</symbol>
 </svg>

From 8c504c4d1dda743e29dd626f8d423711c8e7973d Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 08:29:18 +0200
Subject: [PATCH 03/18] getLoclalizedMode helper function

use nextLeg start time to determine wait time
---
 .../itinerary/navigator/NaviInstructions.js   |  9 ++++----
 .../itinerary/navigator/NaviUtils.js          | 21 ++++++++-----------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index 2647cd8001..2c7ed1db2e 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -44,21 +44,22 @@ export default function NaviInstructions(
     );
   }
   if (legType === LEGTYPE.WAIT && nextLeg.mode !== 'WALK') {
-    const { mode, headsign, route, end, start } = nextLeg;
+    const { mode, headsign, route, start } = nextLeg;
     const hs = headsign || nextLeg.trip?.tripHeadsign;
     const color = route.color || 'currentColor';
     const localizedMode = intl.formatMessage({
       id: `to-${mode.toLowerCase()}`,
       defaultMessage: `${mode}`,
     });
-    const t = leg ? legTime(end) : legTime(start);
-    const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes
+    const remainingDuration = Math.ceil((legTime(start) - Date.now()) / 60000); // ms to minutes
     const rt = nextLeg.realtimeState === 'UPDATED';
     const values = {
       duration: (
         <span className={cx({ realtime: rt })}> {remainingDuration} </span>
       ),
-      legTime: <span className={cx({ realtime: rt })}>{legTimeStr(end)}</span>,
+      legTime: (
+        <span className={cx({ realtime: rt })}>{legTimeStr(start)}</span>
+      ),
     };
     return (
       <>
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 78c2d52051..123fd91940 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -34,6 +34,12 @@ function findTransferProblem(legs) {
   }
   return null;
 }
+const getLocalizedMode = (mode, intl) => {
+  return intl.formatMessage({
+    id: `${mode.toLowerCase()}`,
+    defaultMessage: `${mode}`,
+  });
+};
 
 export const getAdditionalMessages = (leg, time, intl, config, messages) => {
   const msgs = [];
@@ -67,10 +73,7 @@ export const getTransitLegState = (leg, intl, messages, time) => {
   const prevSeverity = previousMessage ? previousMessage.severity : null;
 
   const late = estimated?.delay > DISPLAY_MESSAGE_THRESHOLD;
-  const localizedMode = intl.formatMessage({
-    id: `${mode.toLowerCase()}`,
-    defaultMessage: `${mode}`,
-  });
+  const localizedMode = getLocalizedMode(mode, intl);
   let content;
   let severity;
   const isRealTime = realtimeState === 'UPDATED';
@@ -192,10 +195,7 @@ export const getItineraryAlerts = (
     canceled.forEach((leg, i) => {
       const { legId, mode, route } = leg;
 
-      const lMode = intl.formatMessage({
-        id: `${mode.toLowerCase()}`,
-        defaultMessage: `${mode}`,
-      });
+      const lMode = getLocalizedMode(mode, intl);
       const routeName = `${lMode} ${route.shortName}`;
       const m = (
         <FormattedMessage
@@ -244,10 +244,7 @@ export const getItineraryAlerts = (
     // Todo add mode and delay time to this message
     late.forEach(leg => {
       const { legId, mode, route } = leg;
-      const lMode = intl.formatMessage({
-        id: `${mode.toLowerCase()}`,
-        defaultMessage: `${mode}`,
-      });
+      const lMode = getLocalizedMode(mode, intl);
       const routeName = `${lMode} ${route.shortName}`;
 
       content = (

From b8e39fd908a3afb7b87831a8730d33f45dd2b529 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 08:40:14 +0200
Subject: [PATCH 04/18] bolden the time information, add missing translation

---
 .../itinerary/navigator/NaviInstructions.js      | 16 ++++++++++++----
 app/component/itinerary/navigator/navigator.scss |  4 ++++
 app/translations.js                              |  3 +++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index 2c7ed1db2e..b18948ca8a 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -55,10 +55,14 @@ export default function NaviInstructions(
     const rt = nextLeg.realtimeState === 'UPDATED';
     const values = {
       duration: (
-        <span className={cx({ realtime: rt })}> {remainingDuration} </span>
+        <span className={cx('bold', { realtime: rt })}>
+          {remainingDuration}
+        </span>
       ),
       legTime: (
-        <span className={cx({ realtime: rt })}>{legTimeStr(start)}</span>
+        <span className={cx('bold', { realtime: rt })}>
+          {legTimeStr(start)}
+        </span>
       ),
     };
     return (
@@ -108,10 +112,14 @@ export default function NaviInstructions(
       stopOrStation,
       stop: leg.to.stop.name,
       duration: (
-        <span className={cx({ realtime: rt })}> {remainingDuration} </span>
+        <span className={cx('bold', { realtime: rt })}>
+          {remainingDuration}
+        </span>
       ),
       legTime: (
-        <span className={cx({ realtime: rt })}>{legTimeStr(leg.end)}</span>
+        <span className={cx('bold', { realtime: rt })}>
+          {legTimeStr(leg.end)}
+        </span>
       ),
     };
 
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index 157804882a..892fc43b51 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -37,6 +37,10 @@
   }
 }
 
+.bold {
+  font-weight: $font-weight-medium;
+}
+
 .navitop {
   margin-bottom: 5px;
   position: fixed;
diff --git a/app/translations.js b/app/translations.js
index a5c598a01a..99599fc1d9 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -1317,6 +1317,7 @@ const translations = {
     'navigation-ticket': 'Ticket',
     'navigation-wait': 'Wait at the stop',
     'navigation-wait-mode': 'Nouse {mode}',
+    'navileg-arrive-at': 'TODO_{duration}min päästä klo {legTime}',
     'navileg-bicycle': 'Cycle to',
     'navileg-car': 'Drive to',
     'navileg-from-station': 'asemalla',
@@ -2580,6 +2581,7 @@ const translations = {
     'navigation-ticket': 'Lippu',
     'navigation-wait': 'Odota pysäkillä',
     'navigation-wait-mode': 'Nouse {mode}',
+    'navileg-arrive-at': '{duration}min päästä klo {legTime}',
     'navileg-bicycle': 'Pyöräile',
     'navileg-car': 'Aja',
     'navileg-from-station': 'asemalla',
@@ -5494,6 +5496,7 @@ const translations = {
     'navigation-ticket': 'Biljett',
     'navigation-wait': 'Vänta på hållplatsen',
     'navigation-wait-mode': 'Odota {mode}',
+    'navileg-arrive-at': 'TODO_{duration}min päästä klo {legTime}',
     'navileg-bicycle': 'Cycla till',
     'navileg-car': 'Kör till',
     'navileg-from-station': 'TODO_asemalla',

From 73f6742ab31d8b28838734b6eefcb1aeefb6b79a Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 09:02:39 +0200
Subject: [PATCH 05/18] fix typo

---
 app/component/itinerary/navigator/NaviInstructions.js | 2 +-
 app/translations.js                                   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index b18948ca8a..e63e4bffe6 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -88,7 +88,7 @@ export default function NaviInstructions(
           <div className="wait-duration">
             <FormattedMessage
               id="navileg-arrive-at"
-              defaultMessage="{duration}min päästä klo {legTime}"
+              defaultMessage="{duration} min päästä klo {legTime}"
               values={values}
             />
           </div>
diff --git a/app/translations.js b/app/translations.js
index 99599fc1d9..48eb4367d4 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -1317,7 +1317,7 @@ const translations = {
     'navigation-ticket': 'Ticket',
     'navigation-wait': 'Wait at the stop',
     'navigation-wait-mode': 'Nouse {mode}',
-    'navileg-arrive-at': 'TODO_{duration}min päästä klo {legTime}',
+    'navileg-arrive-at': 'TODO_{duration} min päästä klo {legTime}',
     'navileg-bicycle': 'Cycle to',
     'navileg-car': 'Drive to',
     'navileg-from-station': 'asemalla',
@@ -2581,7 +2581,7 @@ const translations = {
     'navigation-ticket': 'Lippu',
     'navigation-wait': 'Odota pysäkillä',
     'navigation-wait-mode': 'Nouse {mode}',
-    'navileg-arrive-at': '{duration}min päästä klo {legTime}',
+    'navileg-arrive-at': '{duration} min päästä klo {legTime}',
     'navileg-bicycle': 'Pyöräile',
     'navileg-car': 'Aja',
     'navileg-from-station': 'asemalla',
@@ -5496,7 +5496,7 @@ const translations = {
     'navigation-ticket': 'Biljett',
     'navigation-wait': 'Vänta på hållplatsen',
     'navigation-wait-mode': 'Odota {mode}',
-    'navileg-arrive-at': 'TODO_{duration}min päästä klo {legTime}',
+    'navileg-arrive-at': 'TODO_{duration} min päästä klo {legTime}',
     'navileg-bicycle': 'Cycla till',
     'navileg-car': 'Kör till',
     'navileg-from-station': 'TODO_asemalla',

From 143e5aaf1f2723f714a06c49d5950d7efdc540f6 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 09:37:42 +0200
Subject: [PATCH 06/18] vehicle icon should be 32x32px according to design,
 arrow should be near right border

---
 app/component/itinerary/navigator/navigator.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index 892fc43b51..c377cf70e2 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -59,8 +59,6 @@
   }
 
   .navitop-arrow {
-    margin-right: var(--space-m);
-
     .inverted {
       transform: rotate(180deg);
     }
@@ -81,8 +79,8 @@
         color: black;
 
         .mode {
-          width: var(--space-l);
-          height: var(--space-l);
+          width: 32px;
+          height: 32px;
           color: black;
           margin-right: var(--space-s);
           margin-top: var(--space-xxs);

From e1e66d0679c4cf114a7242014dd19818d9c2cfbc Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 10:01:40 +0200
Subject: [PATCH 07/18] show alerts that are effective after journey starts

---
 .../itinerary/navigator/NaviCardContainer.js  |  6 +----
 .../itinerary/navigator/NaviUtils.js          | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index 0cfe86d3e5..0adaed431d 100644
--- a/app/component/itinerary/navigator/NaviCardContainer.js
+++ b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -11,17 +11,13 @@ import {
   getItineraryAlerts,
   getTransitLegState,
   getAdditionalMessages,
+  getFirstLastLegs,
   LEGTYPE,
 } from './NaviUtils';
 
 const DESTINATION_RADIUS = 20; // meters
 const TIME_AT_DESTINATION = 3; // * 10 seconds
 
-function getFirstLastLegs(legs) {
-  const first = legs[0];
-  const last = legs[legs.length - 1];
-  return { first, last };
-}
 function getNextLeg(legs, time) {
   return legs.find(leg => legTime(leg.start) > time);
 }
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 123fd91940..f04796389c 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -40,7 +40,11 @@ const getLocalizedMode = (mode, intl) => {
     defaultMessage: `${mode}`,
   });
 };
-
+export function getFirstLastLegs(legs) {
+  const first = legs[0];
+  const last = legs[legs.length - 1];
+  return { first, last };
+}
 export const getAdditionalMessages = (leg, time, intl, config, messages) => {
   const msgs = [];
   const ticketMsg = messages.get('ticket');
@@ -146,11 +150,19 @@ export const getItineraryAlerts = (
   const canceled = realTimeLegs.filter(leg => leg.realtimeState === 'CANCELED');
   const legAlerts =
     realTimeLegs.flatMap(leg => {
-      return leg.alerts?.filter(
-        alert =>
+      return leg.alerts?.filter(alert => {
+        const { first } = getFirstLastLegs(realTimeLegs);
+        const startTime = legTime(first.start) / 1000;
+        // show only alerts that are active when
+        // the itinerary starts
+        if (startTime < alert.effectiveStartDate) {
+          return false;
+        }
+        return (
           alert.alertSeverityLevel === 'WARNING' ||
-          alert.alertSeverityLevel === 'SEVERE',
-      );
+          alert.alertSeverityLevel === 'SEVERE'
+        );
+      });
     }) || [];
 
   const transferProblem = findTransferProblem(realTimeLegs);

From fd41c398a0321265e548bdfdc92c62df2f843a2f Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 10:43:52 +0200
Subject: [PATCH 08/18] show early/late message only for next transit leg, not
 all, other small tweaks

---
 app/component/itinerary/ItineraryDetails.js   |  1 -
 .../itinerary/navigator/NaviCardExtension.js  |  9 ++--
 .../itinerary/navigator/NaviUtils.js          | 50 +++++++------------
 app/translations.js                           |  3 ++
 4 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js
index 656cfbd580..bce0faca56 100644
--- a/app/component/itinerary/ItineraryDetails.js
+++ b/app/component/itinerary/ItineraryDetails.js
@@ -616,7 +616,6 @@ const withRelay = createFragmentContainer(
               alertHeaderText
               alertDescriptionText
               id
-              alertHash
               entities {
                 __typename
                 ... on Route {
diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js
index 5ab1155ebb..7407cd3001 100644
--- a/app/component/itinerary/navigator/NaviCardExtension.js
+++ b/app/component/itinerary/navigator/NaviCardExtension.js
@@ -34,13 +34,16 @@ const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
   }
 
   if (legType === LEGTYPE.TRANSIT) {
-    const { intermediatePlaces, headsign, trip } = leg;
+    const { intermediatePlaces, headsign, trip, realtimeState } = leg;
     const hs = headsign || trip.tripHeadsign;
     const now = Date.now();
     const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > now);
-
     const count = idx > -1 ? intermediatePlaces.length - idx : 0;
-    const stopCount = <span className="realtime"> {count} </span>;
+    const stopCount = (
+      <span className={cx('bold', { realtime: realtimeState === 'UPDATED' })}>
+        {count}
+      </span>
+    );
     const translationId =
       count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining';
     const mode = leg.mode.toLowerCase();
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index f04796389c..acb85a0466 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -68,7 +68,7 @@ export const getAdditionalMessages = (leg, time, intl, config, messages) => {
 };
 
 export const getTransitLegState = (leg, intl, messages, time) => {
-  const { start, realtimeState, from, mode, legId } = leg;
+  const { start, realtimeState, from, mode, legId, route } = leg;
   const { scheduledTime, estimated } = start;
   if (mode === 'WALK') {
     return null;
@@ -76,15 +76,28 @@ export const getTransitLegState = (leg, intl, messages, time) => {
   const previousMessage = messages.get(legId);
   const prevSeverity = previousMessage ? previousMessage.severity : null;
 
-  const late = estimated?.delay > DISPLAY_MESSAGE_THRESHOLD;
+  const late =
+    estimated?.delay > DISPLAY_MESSAGE_THRESHOLD ||
+    estimated?.delay < -DISPLAY_MESSAGE_THRESHOLD;
   const localizedMode = getLocalizedMode(mode, intl);
   let content;
   let severity;
   const isRealTime = realtimeState === 'UPDATED';
 
-  if (late && prevSeverity !== 'ALERT') {
+  if (late && prevSeverity !== 'WARNING') {
     // todo: Do this when design is ready.
-    severity = 'ALERT';
+    const lMode = getLocalizedMode(mode, intl);
+    const routeName = `${lMode} ${route.shortName}`;
+    const { delay } = estimated;
+
+    const id = `navigation-mode-${delay > 0 ? 'late' : 'early'}`;
+
+    content = (
+      <div className="notifiler">
+        <FormattedMessage id={id} values={{ routeName }} />
+      </div>
+    );
+    severity = 'WARNING';
     content = <div className="navi-info-content"> Kulkuneuvo on myöhässä </div>;
   } else if (
     !isRealTime &&
@@ -154,7 +167,7 @@ export const getItineraryAlerts = (
         const { first } = getFirstLastLegs(realTimeLegs);
         const startTime = legTime(first.start) / 1000;
         // show only alerts that are active when
-        // the itinerary starts
+        // the journey starts
         if (startTime < alert.effectiveStartDate) {
           return false;
         }
@@ -166,11 +179,6 @@ export const getItineraryAlerts = (
     }) || [];
 
   const transferProblem = findTransferProblem(realTimeLegs);
-  const late = realTimeLegs.filter(
-    leg =>
-      leg.start.estimated?.delay > DISPLAY_MESSAGE_THRESHOLD ||
-      leg.start.estimated?.delay < -DISPLAY_MESSAGE_THRESHOLD,
-  );
   const abortTrip = <FormattedMessage id="navigation-abort-trip" />;
   let content;
   const withShowRoutesBtn = children => (
@@ -215,6 +223,7 @@ export const getItineraryAlerts = (
           values={{ routeName }}
         />
       );
+      // we want to show the show routes button only for the first canceled leg.
       if (i === 0) {
         content = withShowRoutesBtn(
           <div className="notifiler">
@@ -251,27 +260,6 @@ export const getItineraryAlerts = (
       });
     }
   }
-  if (late.length && !messages.get(late.legId)) {
-    // Todo: No current design
-    // Todo add mode and delay time to this message
-    late.forEach(leg => {
-      const { legId, mode, route } = leg;
-      const lMode = getLocalizedMode(mode, intl);
-      const routeName = `${lMode} ${route.shortName}`;
-
-      content = (
-        <div className="notifiler">
-          <FormattedMessage id="navigation-mode-late" values={{ routeName }} />
-        </div>
-      );
-      alerts.push({
-        severity: 'WARNING',
-        content,
-        id: `late-${legId}`,
-      });
-    });
-  }
-
   return alerts;
 };
 
diff --git a/app/translations.js b/app/translations.js
index 48eb4367d4..4b698c85b0 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -1310,6 +1310,7 @@ const translations = {
     'navigation-journey-end': 'Journey has ended',
     'navigation-journey-start': 'Your journey starts {time}',
     'navigation-mode-canceled': 'TODO_{mode} on peruuntunut',
+    'navigation-mode-early': 'TODO_{mode} on etuajassa',
     'navigation-mode-late:': 'TODO_{mode} on myöhässä',
     'navigation-quit': 'Quit',
     'navigation-remember-ticket': 'TODO_Muistithan ostaa lipun?',
@@ -2574,6 +2575,7 @@ const translations = {
     'navigation-journey-end': 'Matka on päättynyt',
     'navigation-journey-start': 'Matkasi alkaa {time}',
     'navigation-mode-canceled': '{mode} on peruuntunut',
+    'navigation-mode-early': '{mode} on etuajassa',
     'navigation-mode-late:': '{mode} on myöhässä',
     'navigation-quit': 'Poistu',
     'navigation-remember-ticket': 'Muistithan ostaa lipun?',
@@ -5489,6 +5491,7 @@ const translations = {
     'navigation-journey-end': 'Resan är över',
     'navigation-journey-start': 'Din resa börjar {time}',
     'navigation-mode-canceled': 'TODO_{mode} on peruuntunut',
+    'navigation-mode-early': 'TODO_{mode} on etuajassa',
     'navigation-mode-late:': 'TODO_{mode} on myöhässä',
     'navigation-quit': 'Sluta',
     'navigation-remember-ticket': 'TODO_Muistithan ostaa lipun?',

From 0c7614b9652cf87d5e674395eb91d01d1d37ebae Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 11:40:35 +0200
Subject: [PATCH 09/18] rest of the translations for naviUtils, rename css,
 remove unnecessary variables

---
 .../itinerary/navigator/NaviUtils.js          | 26 +++++++++++--------
 .../itinerary/navigator/navigator.scss        |  4 +--
 app/translations.js                           |  3 +++
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index acb85a0466..dd9c427402 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -93,12 +93,11 @@ export const getTransitLegState = (leg, intl, messages, time) => {
     const id = `navigation-mode-${delay > 0 ? 'late' : 'early'}`;
 
     content = (
-      <div className="notifiler">
+      <div className="navi-alert-content">
         <FormattedMessage id={id} values={{ routeName }} />
       </div>
     );
     severity = 'WARNING';
-    content = <div className="navi-info-content"> Kulkuneuvo on myöhässä </div>;
   } else if (
     !isRealTime &&
     prevSeverity !== 'WARNING' &&
@@ -146,9 +145,8 @@ export const getTransitLegState = (leg, intl, messages, time) => {
   return state;
 };
 
-const onClick = (e, location, router) => {
-  const f = getItineraryPagePath('POS', location.to);
-  router.push(f);
+const onClick = (location, router) => {
+  router.push(getItineraryPagePath('POS', location.to));
 };
 // We'll need the intl later.
 // eslint-disable-next-line no-unused-vars
@@ -187,7 +185,7 @@ export const getItineraryAlerts = (
       <button
         className="show-options"
         type="button"
-        onClick={e => onClick(e, location, router)}
+        onClick={() => onClick(location, router)}
       >
         <FormattedMessage id="settings-dropdown-open-label" />
       </button>
@@ -196,7 +194,7 @@ export const getItineraryAlerts = (
   if (legAlerts.length > 0) {
     legAlerts.forEach(alert => {
       content = (
-        <div className="notifiler">
+        <div className="navi-alert-content">
           <span className="header"> {alert.alertHeaderText}</span>
         </div>
       );
@@ -226,13 +224,13 @@ export const getItineraryAlerts = (
       // we want to show the show routes button only for the first canceled leg.
       if (i === 0) {
         content = withShowRoutesBtn(
-          <div className="notifiler">
+          <div className="navi-alert-content">
             {m}
             {abortTrip}
           </div>,
         );
       } else {
-        content = <div className="notifiler">{m}</div>;
+        content = <div className="navi-alert-content">{m}</div>;
       }
       if (!messages.get(`canceled-${legId}`)) {
         alerts.push({
@@ -248,8 +246,14 @@ export const getItineraryAlerts = (
     const transferId = `transfer-${transferProblem[0].legId}-${transferProblem[1].legId}}`;
     if (!messages.get(transferId)) {
       content = withShowRoutesBtn(
-        <div className="notifiler">
-          <span>{`Vaihto ${transferProblem[0].route.shortName} - ${transferProblem[1].route.shortName} ei onnistu`}</span>
+        <div className="navi-alert-content">
+          <FormattedMessage
+            id="navigation-transfer-problem"
+            values={{
+              route1: transferProblem[0].route.shortName,
+              route2: transferProblem[1].route.shortName,
+            }}
+          />
           {abortTrip}
         </div>,
       );
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index c377cf70e2..9651e1be1e 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -401,7 +401,7 @@
     &.warning {
       background-color: #fff8e8;
 
-      .notifiler {
+      .navi-alert-content {
         width: 100%;
       }
     }
@@ -409,7 +409,7 @@
     &.alert {
       background-color: #fdf3f6;
 
-      .notifiler {
+      .navi-alert-content {
         display: flex;
         flex-direction: column;
         margin-left: 8px;
diff --git a/app/translations.js b/app/translations.js
index 4b698c85b0..078393179f 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -1316,6 +1316,7 @@ const translations = {
     'navigation-remember-ticket': 'TODO_Muistithan ostaa lipun?',
     'navigation-start': 'Start journey',
     'navigation-ticket': 'Ticket',
+    'navigation-transfer-problem': 'TODO_Vaihto {route1} - {route2} ei onnistu',
     'navigation-wait': 'Wait at the stop',
     'navigation-wait-mode': 'Nouse {mode}',
     'navileg-arrive-at': 'TODO_{duration} min päästä klo {legTime}',
@@ -2581,6 +2582,7 @@ const translations = {
     'navigation-remember-ticket': 'Muistithan ostaa lipun?',
     'navigation-start': 'Matkalle',
     'navigation-ticket': 'Lippu',
+    'navigation-transfer-problem': 'Vaihto {route1} - {route2} ei onnistu',
     'navigation-wait': 'Odota pysäkillä',
     'navigation-wait-mode': 'Nouse {mode}',
     'navileg-arrive-at': '{duration} min päästä klo {legTime}',
@@ -5497,6 +5499,7 @@ const translations = {
     'navigation-remember-ticket': 'TODO_Muistithan ostaa lipun?',
     'navigation-start': 'På resa',
     'navigation-ticket': 'Biljett',
+    'navigation-transfer-problem': 'TODO_Vaihto {route1} - {route2} ei onnistu',
     'navigation-wait': 'Vänta på hållplatsen',
     'navigation-wait-mode': 'Odota {mode}',
     'navileg-arrive-at': 'TODO_{duration} min päästä klo {legTime}',

From c8ad08179fff4c3177fbeec8027ae512dcfd7de6 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 11:45:19 +0200
Subject: [PATCH 10/18] alerts to legQuery.js

---
 app/component/itinerary/queries/LegQuery.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/component/itinerary/queries/LegQuery.js b/app/component/itinerary/queries/LegQuery.js
index 8865f4dfd4..be6e8e4ceb 100644
--- a/app/component/itinerary/queries/LegQuery.js
+++ b/app/component/itinerary/queries/LegQuery.js
@@ -16,6 +16,13 @@ const legQuery = graphql`
           time
         }
       }
+      alerts {
+        alertSeverityLevel
+        effectiveStartDate
+        alertDescriptionText
+        alertHeaderText
+        id
+      }
       intermediatePlaces {
         arrival {
           scheduledTime

From b5507ac503c420149c46ae897c632abb7b9d6122 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 11:56:29 +0200
Subject: [PATCH 11/18] export LocalizedMode util

---
 .../itinerary/navigator/NaviInstructions.js        | 14 +++++---------
 app/component/itinerary/navigator/NaviUtils.js     |  2 +-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index e63e4bffe6..e191d254f4 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -5,7 +5,7 @@ import cx from 'classnames';
 import { legShape, configShape } from '../../../util/shapes';
 import { legDestination, legTimeStr, legTime } from '../../../util/legUtils';
 import RouteNumber from '../../RouteNumber';
-import { LEGTYPE } from './NaviUtils';
+import { LEGTYPE, getLocalizedMode } from './NaviUtils';
 import { displayDistance } from '../../../util/geo-utils';
 import { durationToString } from '../../../util/timeUtils';
 
@@ -47,10 +47,8 @@ export default function NaviInstructions(
     const { mode, headsign, route, start } = nextLeg;
     const hs = headsign || nextLeg.trip?.tripHeadsign;
     const color = route.color || 'currentColor';
-    const localizedMode = intl.formatMessage({
-      id: `to-${mode.toLowerCase()}`,
-      defaultMessage: `${mode}`,
-    });
+    const localizedMode = getLocalizedMode(mode, intl);
+
     const remainingDuration = Math.ceil((legTime(start) - Date.now()) / 60000); // ms to minutes
     const rt = nextLeg.realtimeState === 'UPDATED';
     const values = {
@@ -103,10 +101,8 @@ export default function NaviInstructions(
       ? intl.formatMessage({ id: 'navileg-from-station' })
       : intl.formatMessage({ id: 'navileg-from-stop' });
     const rt = leg.realtimeState === 'UPDATED';
-    const localizedMode = intl.formatMessage({
-      id: `${leg.mode.toLowerCase()}`,
-      defaultMessage: `${leg.mode}`,
-    });
+    const localizedMode = getLocalizedMode(leg.mode, intl);
+
     const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes
     const values = {
       stopOrStation,
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index dd9c427402..3c8516967a 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -34,7 +34,7 @@ function findTransferProblem(legs) {
   }
   return null;
 }
-const getLocalizedMode = (mode, intl) => {
+export const getLocalizedMode = (mode, intl) => {
   return intl.formatMessage({
     id: `${mode.toLowerCase()}`,
     defaultMessage: `${mode}`,

From 8756d30b09eab0629cecac269a9e23b3d8db6b6d Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Wed, 27 Nov 2024 11:58:29 +0200
Subject: [PATCH 12/18] remove outdated comments

---
 app/component/itinerary/navigator/NaviUtils.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 3c8516967a..93e8567147 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -85,7 +85,6 @@ export const getTransitLegState = (leg, intl, messages, time) => {
   const isRealTime = realtimeState === 'UPDATED';
 
   if (late && prevSeverity !== 'WARNING') {
-    // todo: Do this when design is ready.
     const lMode = getLocalizedMode(mode, intl);
     const routeName = `${lMode} ${route.shortName}`;
     const { delay } = estimated;
@@ -148,8 +147,7 @@ export const getTransitLegState = (leg, intl, messages, time) => {
 const onClick = (location, router) => {
   router.push(getItineraryPagePath('POS', location.to));
 };
-// We'll need the intl later.
-// eslint-disable-next-line no-unused-vars
+
 export const getItineraryAlerts = (
   realTimeLegs,
   intl,
@@ -207,7 +205,6 @@ export const getItineraryAlerts = (
       }
     });
   }
-  // todo no current design
   if (canceled.length > 0) {
     // show routes button only for first canceled leg.
     canceled.forEach((leg, i) => {

From dbef583dc8a77fbf2faa952564ab1cc73c310a7e Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Thu, 28 Nov 2024 09:29:01 +0200
Subject: [PATCH 13/18] pr suggestions

---
 app/component/itinerary/ItineraryPage.js      |  2 +-
 .../itinerary/navigator/NaviCardContainer.js  | 45 ++++++-------------
 .../itinerary/navigator/NaviInstructions.js   | 17 +++----
 .../itinerary/navigator/NaviUtils.js          | 14 +++---
 app/component/map/ItineraryPageMap.js         |  8 ++--
 5 files changed, 29 insertions(+), 57 deletions(-)

diff --git a/app/component/itinerary/ItineraryPage.js b/app/component/itinerary/ItineraryPage.js
index 9e8d58afc5..b28cf80581 100644
--- a/app/component/itinerary/ItineraryPage.js
+++ b/app/component/itinerary/ItineraryPage.js
@@ -1064,7 +1064,7 @@ export default function ItineraryPage(props, context) {
         showDurationBubble={planEdges?.[0]?.node.legs?.length === 1}
         objectsToHide={objectsToHide}
         itinerary={explicitItinerary}
-        naviMode={naviMode}
+        showBackButton={!naviMode}
       />
     );
   }
diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index 0adaed431d..517525bf5e 100644
--- a/app/component/itinerary/navigator/NaviCardContainer.js
+++ b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -21,6 +21,12 @@ const TIME_AT_DESTINATION = 3; // * 10 seconds
 function getNextLeg(legs, time) {
   return legs.find(leg => legTime(leg.start) > time);
 }
+
+function addMessages(incominMessages, newMessages) {
+  newMessages.forEach(m => {
+    incominMessages.set(m.id, m);
+  });
+}
 function NaviCardContainer(
   { focusToLeg, time, realTimeLegs, position },
   { intl, config, match, router },
@@ -44,7 +50,6 @@ function NaviCardContainer(
   const handleClick = () => {
     setCardExpanded(!cardExpanded);
   };
-
   useEffect(() => {
     if (cardRef.current) {
       const contentHeight = cardRef.current.clientHeight;
@@ -61,18 +66,11 @@ function NaviCardContainer(
 
     const incomingMessages = new Map();
 
-    // TODO proper alert handling.
     // Alerts for NaviStack
-    const alerts = getItineraryAlerts(
-      realTimeLegs,
-      intl,
-      messages,
-      match.params,
-      router,
+    addMessages(
+      incomingMessages,
+      getItineraryAlerts(realTimeLegs, intl, messages, match.params, router),
     );
-    alerts.forEach(alert => {
-      incomingMessages.set(alert.id, alert);
-    });
 
     const legChanged = newLeg?.legId
       ? newLeg.legId !== currentLeg?.legId
@@ -84,27 +82,10 @@ function NaviCardContainer(
 
       if (nextLeg?.transitLeg) {
         // Messages for NaviStack.
-        const transitLegState = getTransitLegState(
-          nextLeg,
-          intl,
-          messages,
-          time,
-        );
-        if (transitLegState) {
-          incomingMessages.set(transitLegState.id, transitLegState);
-        }
-        const additionalMsgs = getAdditionalMessages(
-          nextLeg,
-          time,
-          intl,
-          config,
-          messages,
-        );
-        if (additionalMsgs) {
-          additionalMsgs.forEach(m => {
-            incomingMessages.set(m.id, m);
-          });
-        }
+        addMessages(incomingMessages, [
+          ...getTransitLegState(nextLeg, intl, messages, time),
+          ...getAdditionalMessages(nextLeg, time, intl, config, messages),
+        ]);
       }
       if (newLeg && legChanged) {
         focusToLeg?.(newLeg);
diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index e191d254f4..da8ad9eb9a 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -96,27 +96,22 @@ export default function NaviInstructions(
   }
 
   if (legType === LEGTYPE.TRANSIT) {
+    const rt = leg.realtimeState === 'UPDATED';
+    const withRealTime = children => (
+      <span className={cx('bold', { realtime: rt })}>{children}</span>
+    );
     const t = legTime(leg.end);
     const stopOrStation = leg.to.stop.parentStation
       ? intl.formatMessage({ id: 'navileg-from-station' })
       : intl.formatMessage({ id: 'navileg-from-stop' });
-    const rt = leg.realtimeState === 'UPDATED';
     const localizedMode = getLocalizedMode(leg.mode, intl);
 
     const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes
     const values = {
       stopOrStation,
       stop: leg.to.stop.name,
-      duration: (
-        <span className={cx('bold', { realtime: rt })}>
-          {remainingDuration}
-        </span>
-      ),
-      legTime: (
-        <span className={cx('bold', { realtime: rt })}>
-          {legTimeStr(leg.end)}
-        </span>
-      ),
+      duration: withRealTime(remainingDuration),
+      legTime: withRealTime(legTimeStr(leg.end)),
     };
 
     return (
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 93e8567147..4291877577 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -139,15 +139,11 @@ export const getTransitLegState = (leg, intl, messages, time) => {
     severity = 'INFO';
   }
   const state = severity
-    ? { severity, content, id: legId, expiresOn: 'legChange' }
-    : null;
+    ? [{ severity, content, id: legId, expiresOn: 'legChange' }]
+    : [];
   return state;
 };
 
-const onClick = (location, router) => {
-  router.push(getItineraryPagePath('POS', location.to));
-};
-
 export const getItineraryAlerts = (
   realTimeLegs,
   intl,
@@ -183,13 +179,13 @@ export const getItineraryAlerts = (
       <button
         className="show-options"
         type="button"
-        onClick={() => onClick(location, router)}
+        onClick={() => router.push(getItineraryPagePath('POS', location.to))}
       >
         <FormattedMessage id="settings-dropdown-open-label" />
       </button>
     </div>
   );
-  if (legAlerts.length > 0) {
+  if (legAlerts) {
     legAlerts.forEach(alert => {
       content = (
         <div className="navi-alert-content">
@@ -205,7 +201,7 @@ export const getItineraryAlerts = (
       }
     });
   }
-  if (canceled.length > 0) {
+  if (canceled) {
     // show routes button only for first canceled leg.
     canceled.forEach((leg, i) => {
       const { legId, mode, route } = leg;
diff --git a/app/component/map/ItineraryPageMap.js b/app/component/map/ItineraryPageMap.js
index 3ce67b103b..af77df4404 100644
--- a/app/component/map/ItineraryPageMap.js
+++ b/app/component/map/ItineraryPageMap.js
@@ -31,7 +31,7 @@ function ItineraryPageMap(
     topics,
     showDurationBubble,
     itinerary,
-    naviMode,
+    showBackButton,
     ...rest
   },
   { match, router, executeAction, config },
@@ -115,7 +115,7 @@ function ItineraryPageMap(
       zoom={POINT_FOCUS_ZOOM}
       {...rest}
     >
-      {!naviMode && breakpoint !== 'large' && (
+      {showBackButton && breakpoint !== 'large' && (
         <BackButton
           icon="icon-icon_arrow-collapse--left"
           iconClassName="arrow-icon"
@@ -148,7 +148,7 @@ ItineraryPageMap.propTypes = {
   viaPoints: PropTypes.arrayOf(locationShape).isRequired,
   showDurationBubble: PropTypes.bool,
   itinerary: itineraryShape,
-  naviMode: PropTypes.bool,
+  showBackButton: PropTypes.bool,
 };
 
 ItineraryPageMap.defaultProps = {
@@ -157,7 +157,7 @@ ItineraryPageMap.defaultProps = {
   showVehicles: false,
   showDurationBubble: false,
   itinerary: undefined,
-  naviMode: false,
+  showBackButton: true,
 };
 
 ItineraryPageMap.contextTypes = {

From 1398082a3d1014d77bf2dbb97aa0600fa326bb2b Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Thu, 28 Nov 2024 12:14:39 +0200
Subject: [PATCH 14/18] pr suggestions p2

---
 .../itinerary/navigator/NaviInstructions.js   | 24 +++----
 .../itinerary/navigator/NaviUtils.js          | 63 +++++++++----------
 2 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
index da8ad9eb9a..e8ec5bc66a 100644
--- a/app/component/itinerary/navigator/NaviInstructions.js
+++ b/app/component/itinerary/navigator/NaviInstructions.js
@@ -14,7 +14,9 @@ export default function NaviInstructions(
   { intl, config },
 ) {
   const [fadeOut, setFadeOut] = useState(false);
-
+  const withRealTime = (rt, children) => (
+    <span className={cx('bold', { realtime: rt })}>{children}</span>
+  );
   useEffect(() => {
     const timer = setTimeout(() => {
       setFadeOut(true);
@@ -52,16 +54,8 @@ export default function NaviInstructions(
     const remainingDuration = Math.ceil((legTime(start) - Date.now()) / 60000); // ms to minutes
     const rt = nextLeg.realtimeState === 'UPDATED';
     const values = {
-      duration: (
-        <span className={cx('bold', { realtime: rt })}>
-          {remainingDuration}
-        </span>
-      ),
-      legTime: (
-        <span className={cx('bold', { realtime: rt })}>
-          {legTimeStr(start)}
-        </span>
-      ),
+      duration: withRealTime(rt, remainingDuration),
+      legTime: withRealTime(rt, legTimeStr(start)),
     };
     return (
       <>
@@ -97,9 +91,7 @@ export default function NaviInstructions(
 
   if (legType === LEGTYPE.TRANSIT) {
     const rt = leg.realtimeState === 'UPDATED';
-    const withRealTime = children => (
-      <span className={cx('bold', { realtime: rt })}>{children}</span>
-    );
+
     const t = legTime(leg.end);
     const stopOrStation = leg.to.stop.parentStation
       ? intl.formatMessage({ id: 'navileg-from-station' })
@@ -110,8 +102,8 @@ export default function NaviInstructions(
     const values = {
       stopOrStation,
       stop: leg.to.stop.name,
-      duration: withRealTime(remainingDuration),
-      legTime: withRealTime(legTimeStr(leg.end)),
+      duration: withRealTime(rt, remainingDuration),
+      legTime: withRealTime(rt, legTimeStr(leg.end)),
     };
 
     return (
diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 4291877577..99d11cdba7 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -153,26 +153,40 @@ export const getItineraryAlerts = (
 ) => {
   const alerts = [];
   const canceled = realTimeLegs.filter(leg => leg.realtimeState === 'CANCELED');
-  const legAlerts =
-    realTimeLegs.flatMap(leg => {
-      return leg.alerts?.filter(alert => {
-        const { first } = getFirstLastLegs(realTimeLegs);
-        const startTime = legTime(first.start) / 1000;
-        // show only alerts that are active when
-        // the journey starts
-        if (startTime < alert.effectiveStartDate) {
-          return false;
-        }
-        return (
-          alert.alertSeverityLevel === 'WARNING' ||
-          alert.alertSeverityLevel === 'SEVERE'
-        );
+  let content;
+  const legAlerts = realTimeLegs.flatMap(leg => {
+    return leg.alerts?.filter(alert => {
+      const { first } = getFirstLastLegs(realTimeLegs);
+      const startTime = legTime(first.start) / 1000;
+      // show only alerts that are active when
+      // the journey starts
+      if (startTime < alert.effectiveStartDate) {
+        return false;
+      }
+      return (
+        alert.alertSeverityLevel === 'WARNING' ||
+        alert.alertSeverityLevel === 'SEVERE'
+      );
+    });
+  });
+
+  legAlerts.forEach(alert => {
+    content = (
+      <div className="navi-alert-content">
+        <span className="header"> {alert.alertHeaderText}</span>
+      </div>
+    );
+    if (!messages.get(alert.id)) {
+      alerts.push({
+        severity: 'ALERT',
+        content,
+        id: alert.id,
       });
-    }) || [];
+    }
+  });
 
   const transferProblem = findTransferProblem(realTimeLegs);
   const abortTrip = <FormattedMessage id="navigation-abort-trip" />;
-  let content;
   const withShowRoutesBtn = children => (
     <div className="alt-btn">
       {children}
@@ -185,22 +199,7 @@ export const getItineraryAlerts = (
       </button>
     </div>
   );
-  if (legAlerts) {
-    legAlerts.forEach(alert => {
-      content = (
-        <div className="navi-alert-content">
-          <span className="header"> {alert.alertHeaderText}</span>
-        </div>
-      );
-      if (!messages.get(alert.id)) {
-        alerts.push({
-          severity: 'ALERT',
-          content,
-          id: alert.id,
-        });
-      }
-    });
-  }
+
   if (canceled) {
     // show routes button only for first canceled leg.
     canceled.forEach((leg, i) => {

From 7389808f1365111892e0b3c242bb9876698f26eb Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Thu, 28 Nov 2024 12:46:49 +0200
Subject: [PATCH 15/18] check if alerts exists in original filter function

---
 app/component/itinerary/navigator/NaviUtils.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 99d11cdba7..88e21ee734 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -158,6 +158,9 @@ export const getItineraryAlerts = (
     return leg.alerts?.filter(alert => {
       const { first } = getFirstLastLegs(realTimeLegs);
       const startTime = legTime(first.start) / 1000;
+      if (messages.get(alert.id)) {
+        return false;
+      }
       // show only alerts that are active when
       // the journey starts
       if (startTime < alert.effectiveStartDate) {
@@ -176,13 +179,11 @@ export const getItineraryAlerts = (
         <span className="header"> {alert.alertHeaderText}</span>
       </div>
     );
-    if (!messages.get(alert.id)) {
-      alerts.push({
-        severity: 'ALERT',
-        content,
-        id: alert.id,
-      });
-    }
+    alerts.push({
+      severity: 'ALERT',
+      content,
+      id: alert.id,
+    });
   });
 
   const transferProblem = findTransferProblem(realTimeLegs);

From 1cd0ff92ae4e28f0b30842c16e4368e37c755ac2 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Thu, 28 Nov 2024 13:49:46 +0200
Subject: [PATCH 16/18] move alert loop, show correct mode

---
 .../itinerary/navigator/NaviUtils.js          | 62 +++++++++----------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 88e21ee734..33cd450267 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -151,41 +151,39 @@ export const getItineraryAlerts = (
   location,
   router,
 ) => {
-  const alerts = [];
   const canceled = realTimeLegs.filter(leg => leg.realtimeState === 'CANCELED');
   let content;
-  const legAlerts = realTimeLegs.flatMap(leg => {
-    return leg.alerts?.filter(alert => {
-      const { first } = getFirstLastLegs(realTimeLegs);
-      const startTime = legTime(first.start) / 1000;
-      if (messages.get(alert.id)) {
+  const alerts = realTimeLegs.flatMap(leg => {
+    return leg.alerts
+      ?.filter(alert => {
+        const { first } = getFirstLastLegs(realTimeLegs);
+        const startTime = legTime(first.start) / 1000;
+        if (messages.get(alert.id)) {
+          return false;
+        }
+        // show only alerts that are active when
+        // the journey starts
+        if (startTime < alert.effectiveStartDate) {
+          return false;
+        }
+        if (
+          alert.alertSeverityLevel === 'WARNING' ||
+          alert.alertSeverityLevel === 'SEVERE'
+        ) {
+          return true;
+        }
         return false;
-      }
-      // show only alerts that are active when
-      // the journey starts
-      if (startTime < alert.effectiveStartDate) {
-        return false;
-      }
-      return (
-        alert.alertSeverityLevel === 'WARNING' ||
-        alert.alertSeverityLevel === 'SEVERE'
-      );
-    });
-  });
-
-  legAlerts.forEach(alert => {
-    content = (
-      <div className="navi-alert-content">
-        <span className="header"> {alert.alertHeaderText}</span>
-      </div>
-    );
-    alerts.push({
-      severity: 'ALERT',
-      content,
-      id: alert.id,
-    });
+      })
+      .map(alert => ({
+        severity: 'ALERT',
+        content: (
+          <div className="navi-alert-content">
+            <span className="header"> {alert.alertHeaderText}</span>
+          </div>
+        ),
+        id: alert.id,
+      }));
   });
-
   const transferProblem = findTransferProblem(realTimeLegs);
   const abortTrip = <FormattedMessage id="navigation-abort-trip" />;
   const withShowRoutesBtn = children => (
@@ -211,7 +209,7 @@ export const getItineraryAlerts = (
       const m = (
         <FormattedMessage
           id="navigation-mode-canceled"
-          values={{ routeName }}
+          values={{ mode: routeName }}
         />
       );
       // we want to show the show routes button only for the first canceled leg.

From 203fd2a434043504965c12627e941a822163f371 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Thu, 28 Nov 2024 13:51:04 +0200
Subject: [PATCH 17/18] add mode to late as well

---
 app/component/itinerary/navigator/NaviUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 33cd450267..95020f1ce7 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -93,7 +93,7 @@ export const getTransitLegState = (leg, intl, messages, time) => {
 
     content = (
       <div className="navi-alert-content">
-        <FormattedMessage id={id} values={{ routeName }} />
+        <FormattedMessage id={id} values={{ mode: routeName }} />
       </div>
     );
     severity = 'WARNING';

From 14b73e8f1ce24095a367ccc0c21854fee2e03cae Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Thu, 28 Nov 2024 13:55:45 +0200
Subject: [PATCH 18/18] remove ?

---
 app/component/itinerary/navigator/NaviUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
index 95020f1ce7..3e1b59fa66 100644
--- a/app/component/itinerary/navigator/NaviUtils.js
+++ b/app/component/itinerary/navigator/NaviUtils.js
@@ -155,7 +155,7 @@ export const getItineraryAlerts = (
   let content;
   const alerts = realTimeLegs.flatMap(leg => {
     return leg.alerts
-      ?.filter(alert => {
+      .filter(alert => {
         const { first } = getFirstLastLegs(realTimeLegs);
         const startTime = legTime(first.start) / 1000;
         if (messages.get(alert.id)) {