HSLdevcom · vesameskanen · Jan 23, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 23, 2025
diff --git a/app/component/itinerary/navigator/NaviBoardingInfo.js b/app/component/itinerary/navigator/NaviBoardingInfo.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import RouteNumberContainer from '../../RouteNumberContainer';
+import { routeShape } from '../../../util/shapes';
+import Icon from '../../Icon';
+
+const NaviBoardingInfo = ({
+  route,
+  mode,
+  headsign,
+  translationValues,
+  withExpandIcon,
+}) => {
+  return (
+    <div className={cx('boarding', withExpandIcon && 'with-icon')}>
+      <div className="route-info">
+        {withExpandIcon && (
+          <Icon img="navi-expand" className="icon-expand-small" />
+        )}
+        <RouteNumberContainer
+          className={cx('line', mode)}
+          route={route}
+          mode={mode}
+          isTransitLeg
+          vertical
+          withBar
+        />
+        <div className="headsign">{headsign}</div>
+      </div>
+      <div className="wait-duration">
+        <FormattedMessage
+          id="navileg-departing-at"
+          defaultMessage="{duration} min päästä klo {legTime}"
+          values={translationValues}
+        />
+      </div>
+    </div>
+  );
+};
+
+NaviBoardingInfo.propTypes = {
+  route: routeShape.isRequired,
+  mode: PropTypes.string.isRequired,
+  headsign: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  translationValues: PropTypes.object.isRequired,
+  withExpandIcon: PropTypes.bool,
+};
+NaviBoardingInfo.defaultProps = {
+  withExpandIcon: false,
+};
+
+export default NaviBoardingInfo;
diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
@@ -108,7 +108,12 @@ export default function NaviCard(
     <div className="main-card">
       <div className="content">{mainCardContent}</div>
       {cardExpanded && (
-        <NaviCardExtension legType={legType} leg={leg} nextLeg={nextLeg} />
+        <NaviCardExtension
+          legType={legType}
+          leg={leg}
+          nextLeg={nextLeg}
+          time={time}
+        />
       )}
     </div>
   );

diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js
@@ -8,15 +8,17 @@ import PlatformNumber from '../../PlatformNumber';
 import {
   getZoneLabel,
   getHeadsignFromRouteLongName,
+  legTime,
+  legTimeStr,
 } from '../../../util/legUtils';
 import ZoneIcon from '../../ZoneIcon';
 import { legShape, configShape } from '../../../util/shapes';
-import { getDestinationProperties, LEGTYPE } from './NaviUtils';
+import { getDestinationProperties, LEGTYPE, withRealTime } from './NaviUtils';
 import { getRouteMode } from '../../../util/modeUtils';
-
 import RouteNumberContainer from '../../RouteNumberContainer';
+import NaviBoardingInfo from './NaviBoardingInfo';
 
-const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
+const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
   const { stop, name, rentalVehicle, vehicleParking, vehicleRentalStation } =
     leg ? leg.to : nextLeg.from;
   const { code, platformCode, zoneId, vehicleMode } = stop || {};
@@ -73,10 +75,10 @@ const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
       </div>
     );
   }
-  const stopInformation = () => {
+  const stopInformation = (expandIcon = false) => {
     return (
       <div className="extension-walk">
-        <Icon img="navi-expand" className="icon-expand" />
+        {expandIcon && <Icon img="navi-expand" className="icon-expand" />}
         <Icon
           img={destination.iconId}
           height={2}
@@ -125,22 +127,50 @@ const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
             }}
           />
         </div>
+        {stopInformation(true)}
+      </div>
+    );
+  }
+  if (legType === LEGTYPE.MOVE && nextLeg?.transitLeg) {
+    const { headsign, route, start } = nextLeg;
+    const hs = headsign || nextLeg.trip?.tripHeadsign;
+    const remainingDuration = Math.max(
+      Math.ceil((legTime(start) - time) / 60000),
+      0,
+    ); // ms to minutes, >= 0
+    const rt = nextLeg.realtimeState === 'UPDATED';
+    const values = {
+      duration: withRealTime(rt, remainingDuration),
+      legTime: withRealTime(rt, legTimeStr(start)),
+    };
+    const routeMode = getRouteMode(route, config);
+    return (
+      <div className={cx('extension', 'no-gap')}>
         {stopInformation()}
+        <div className="extension-divider" />
+        <NaviBoardingInfo
+          route={route}
+          mode={routeMode}
+          headsign={hs}
+          translationValues={values}
+          withExpandIcon
+        />
       </div>
     );
   }
+
   return (
     <div className="extension">
       <div className="extension-divider" />
-      {stopInformation()}
+      {stopInformation(true)}
     </div>
   );
 };
-
 NaviCardExtension.propTypes = {
   leg: legShape,
   nextLeg: legShape,
   legType: PropTypes.string,
+  time: PropTypes.number.isRequired,
 };
 
 NaviCardExtension.defaultProps = {

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
@@ -5,26 +5,31 @@ import cx from 'classnames';
 import { displayDistance } from '../../../util/geo-utils';
 import { legShape, configShape } from '../../../util/shapes';
 import { legDestination, legTimeStr, legTime } from '../../../util/legUtils';
-import RouteNumber from '../../RouteNumber';
-import { LEGTYPE, getLocalizedMode, getToLocalizedMode } from './NaviUtils';
+import {
+  LEGTYPE,
+  getLocalizedMode,
+  getToLocalizedMode,
+  withRealTime,
+} from './NaviUtils';
 import { durationToString } from '../../../util/timeUtils';
 import { getRouteMode } from '../../../util/modeUtils';
+import NaviBoardingInfo from './NaviBoardingInfo';
 
 export default function NaviInstructions(
   { leg, nextLeg, instructions, legType, time, position, tailLength },
   { intl, config },
 ) {
-  const withRealTime = (rt, children) => (
-    <span className={cx('bold', { realtime: rt })}>{children}</span>
-  );
-
   if (legType === LEGTYPE.MOVE) {
     return (
       <>
         <div className="notification-header">
           <FormattedMessage id={instructions} defaultMessage="Go to" />
           &nbsp;
           {legDestination(intl, leg, null, nextLeg)}
+          &nbsp;
+          {nextLeg?.transitLeg && (
+            <FormattedMessage id="navileg-hop-on" defaultMessage="by" />
+          )}
         </div>
 
         <div className={cx('duration', { realtime: !!position })}>
@@ -34,7 +39,7 @@ export default function NaviInstructions(
       </>
     );
   }
-  if (legType === LEGTYPE.WAIT && nextLeg.transitLeg) {
+  if (legType === LEGTYPE.WAIT && nextLeg?.transitLeg) {
     const { mode, headsign, route, start } = nextLeg;
     const hs = headsign || nextLeg.trip?.tripHeadsign;
 
@@ -48,11 +53,6 @@ export default function NaviInstructions(
       legTime: withRealTime(rt, legTimeStr(start)),
     };
     const routeMode = getRouteMode(route, config);
-    const iconColor =
-      config.colors.iconColors[`mode-${routeMode}`] ||
-      route.color ||
-      'currentColor';
-
     return (
       <>
         <div className="notification-header">
@@ -62,25 +62,12 @@ export default function NaviInstructions(
             defaultMessage="Get on the {mode}"
           />
         </div>
-        <div className="wait-leg">
-          <div className="route-info">
-            <RouteNumber
-              mode={routeMode}
-              text={route?.shortName}
-              withBar
-              isTransitLeg
-              color={iconColor}
-            />
-            <div className="headsign">{hs}</div>
-          </div>
-          <div className="wait-duration">
-            <FormattedMessage
-              id="navileg-arrive-at"
-              defaultMessage="{duration} min päästä klo {legTime}"
-              values={values}
-            />
-          </div>
-        </div>
+        <NaviBoardingInfo
+          route={route}
+          mode={routeMode}
+          headsign={hs}
+          translationValues={values}
+        />
       </>
     );
   }

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
@@ -1,5 +1,6 @@
 import distance from '@digitransit-search-util/digitransit-search-util-distance';
 import React from 'react';
+import cx from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { ExtendedRouteTypes } from '../../../constants';
 import { getFaresFromLegs, formatFare } from '../../../util/fareUtils';
@@ -252,7 +253,7 @@ export const getAdditionalMessages = (
   ) {
     // Todo: multiple fares?
     const fares = getFaresFromLegs([nextLeg], config);
-    if (fares?.length) {
+    if (fares?.length && !fares[0].isUnknown) {
       msgs.push({
         severity: 'INFO',
         content: (
@@ -650,3 +651,7 @@ export const LEGTYPE = {
   END: 'END',
   WAIT_IN_VEHICLE: 'WAIT_IN_VEHICLE',
 };
+
+export const withRealTime = (rt, children) => (
+  <span className={cx('bold', { realtime: rt })}>{children}</span>
+);