Merge pull request #5224 from HSLdevcom/DT-6582

DT-6582: Wait in vehicle card

Author: vesameskanen

app/component/itinerary/PlanConnection.js

@@ -117,6 +117,7 @@ const planConnection = graphql`
             }
             route {
               shortName
+              longName
               color
               gtfsId
               type
@@ -128,6 +129,7 @@ const planConnection = graphql`
             trip {
               gtfsId
               directionId
+              tripHeadsign
               stoptimesForDate {
                 stop {
                   gtfsId

app/component/itinerary/navigator/NaviCard.js

@@ -23,6 +23,7 @@ const iconMap = {
   'BUS-EXPRESS': 'icon-icon_bus-express',
   'BUS-LOCAL': 'icon-icon_bus-local',
   SPEEDTRAM: 'icon-icon_speedtram',
+  WAIT_IN_VEHICLE: 'icon-icon_wait',
 };
 
 export default function NaviCard(
@@ -51,7 +52,11 @@ export default function NaviCard(
       iconName = iconMap[m.toUpperCase()];
 
       instructions = `navileg-in-transit`;
-    } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) {
+    } else if (
+      legType !== LEGTYPE.WAIT &&
+      legType !== LEGTYPE.WAIT_IN_VEHICLE &&
+      isRental(leg, nextLeg)
+    ) {
       if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') {
         instructions = `navileg-rent-scooter`;
       } else {
@@ -63,6 +68,8 @@ export default function NaviCard(
       iconName = iconMap.WALK;
     } else if (legType === LEGTYPE.WAIT) {
       iconName = iconMap.WAIT;
+    } else if (legType === LEGTYPE.WAIT_IN_VEHICLE) {
+      iconName = iconMap.WAIT_IN_VEHICLE;
     }
 
     mainCardContent = (
@@ -92,12 +99,7 @@ export default function NaviCard(
     <div className="main-card">
       <div className="content">{mainCardContent}</div>
       {cardExpanded && (
-        <NaviCardExtension
-          legType={legType}
-          leg={leg}
-          nextLeg={nextLeg}
-          time={time}
-        />
+        <NaviCardExtension legType={legType} leg={leg} nextLeg={nextLeg} />
       )}
     </div>
   );

app/component/itinerary/navigator/NaviCardContainer.js

@@ -27,7 +27,13 @@ function addMessages(incominMessages, newMessages) {
   });
 }
 
-const getLegType = (leg, firstLeg, time, countAtLegEnd) => {
+const getLegType = (
+  leg,
+  firstLeg,
+  time,
+  countAtLegEnd,
+  interlineWithPreviousLeg,
+) => {
   let legType;
   if (time < legTime(firstLeg.start)) {
     legType = LEGTYPE.PENDING;
@@ -42,7 +48,7 @@ const getLegType = (leg, firstLeg, time, countAtLegEnd) => {
       legType = LEGTYPE.TRANSIT;
     }
   } else {
-    legType = LEGTYPE.WAIT;
+    legType = interlineWithPreviousLeg ? LEGTYPE.WAIT_IN_VEHICLE : LEGTYPE.WAIT;
   }
   return legType;
 };
@@ -230,7 +236,13 @@ function NaviCardContainer(
 
   // 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, legEndRef.current);
+  const legType = getLegType(
+    l,
+    firstLeg,
+    time,
+    legEndRef.current,
+    nextLeg?.interlineWithPreviousLeg,
+  );
 
   const containerTopPosition =
     mapLayerRef.current.getBoundingClientRect().top + TOPBAR_PADDING;

app/component/itinerary/navigator/NaviCardExtension.js

@@ -5,15 +5,18 @@ import { FormattedMessage } from 'react-intl';
 import Icon from '../../Icon';
 import StopCode from '../../StopCode';
 import PlatformNumber from '../../PlatformNumber';
-import { getZoneLabel, legTime } from '../../../util/legUtils';
+import {
+  getZoneLabel,
+  getHeadsignFromRouteLongName,
+} from '../../../util/legUtils';
 import ZoneIcon from '../../ZoneIcon';
 import { legShape, configShape } from '../../../util/shapes';
 import { getDestinationProperties, LEGTYPE } from './NaviUtils';
 import { getRouteMode } from '../../../util/modeUtils';
 
 import RouteNumberContainer from '../../RouteNumberContainer';
 
-const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
+const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
   const { stop, name, rentalVehicle, vehicleParking, vehicleRentalStation } =
     leg ? leg.to : nextLeg.from;
   const { code, platformCode, zoneId, vehicleMode } = stop || {};
@@ -35,34 +38,32 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
   }
 
   if (legType === LEGTYPE.TRANSIT) {
-    const { intermediatePlaces, headsign, trip, realtimeState, route } = leg;
+    const { intermediatePlaces, headsign, trip, route } = leg;
     const hs = headsign || trip.tripHeadsign;
-    const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > time);
-    const count = idx > -1 ? intermediatePlaces.length - idx : 0;
-    const stopCount = (
-      <span className={cx('bold', { realtime: realtimeState === 'UPDATED' })}>
-        {count}
-      </span>
-    );
+    const stopCount = <span className="bold">{intermediatePlaces.length}</span>;
     const translationId =
-      count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining';
+      intermediatePlaces.length === 1
+        ? 'navileg-one-intermediate-stop'
+        : 'navileg-intermediate-stops';
     const mode = getRouteMode(route, config);
-
+    const iconColor =
+      config.colors.iconColors[`mode-${mode}`] || leg.route.color;
     return (
       <div className="extension">
-        <div className="extension-divider" />
         <div className="extension-routenumber">
           <RouteNumberContainer
             className={cx('line', mode)}
-            route={leg.route}
+            route={route}
             mode={mode}
             isTransitLeg
             vertical
             withBar
           />
           <div className="headsign">{hs}</div>
         </div>
+        <div className="extension-divider" />
         <div className="stop-count">
+          <Icon img="navi-intermediatestops" color={iconColor} />
           <FormattedMessage
             id={translationId}
             values={{ stopCount }}
@@ -72,9 +73,8 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
       </div>
     );
   }
-  return (
-    <div className="extension">
-      <div className="extension-divider" />
+  const stopInformation = () => {
+    return (
       <div className="extension-walk">
         <Icon img="navi-expand" className="icon-expand" />
         <Icon
@@ -104,6 +104,35 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
           </div>
         </div>
       </div>
+    );
+  };
+
+  if (legType === LEGTYPE.WAIT_IN_VEHICLE) {
+    const { route, trip } = nextLeg;
+    return (
+      <div className="extension">
+        <div className="extension-divider" />
+        <div className="wait-in-vehicle">
+          <FormattedMessage
+            id="navigation-interline-wait"
+            values={{
+              line: <span className="bold">{route.shortName}</span>,
+              destination: (
+                <span className="bold">
+                  {trip.tripHeadsign || getHeadsignFromRouteLongName(route)}
+                </span>
+              ),
+            }}
+          />
+        </div>
+        {stopInformation()}
+      </div>
+    );
+  }
+  return (
+    <div className="extension">
+      <div className="extension-divider" />
+      {stopInformation()}
     </div>
   );
 };
@@ -112,7 +141,6 @@ NaviCardExtension.propTypes = {
   leg: legShape,
   nextLeg: legShape,
   legType: PropTypes.string,
-  time: PropTypes.number.isRequired,
 };
 
 NaviCardExtension.defaultProps = {

app/component/itinerary/navigator/NaviInstructions.js

@@ -98,6 +98,31 @@ export default function NaviInstructions(
     );
   }
 
+  if (legType === LEGTYPE.WAIT_IN_VEHICLE) {
+    const totalWait = legTime(nextLeg.start) - time;
+    return (
+      <>
+        <div className="notification-header">
+          <FormattedMessage
+            id="wait-in-vehicle"
+            defaultMessage="Wait in the vehicle"
+          />
+        </div>
+        <div className="wait-leg">
+          <FormattedMessage
+            id="navigation-interline-resume"
+            values={{
+              duration: withRealTime(
+                nextLeg.realtimeState === 'UPDATED',
+                durationToString(totalWait),
+              ),
+            }}
+          />
+        </div>
+      </>
+    );
+  }
+
   if (legType === LEGTYPE.TRANSIT) {
     const rt = leg.realtimeState === 'UPDATED';
     const t = legTime(leg.end);
@@ -117,7 +142,9 @@ export default function NaviInstructions(
       duration: withRealTime(rt, remainingDuration),
       legTime: withRealTime(rt, legTimeStr(leg.end)),
     };
-
+    const translationId = nextLeg?.interlineWithPreviousLeg
+      ? 'navileg-in-transit-interline'
+      : 'navileg-leave-at';
     return (
       <>
         <div className="notification-header">
@@ -129,7 +156,7 @@ export default function NaviInstructions(
         </div>
         <div className="vehicle-leg">
           <FormattedMessage
-            id="navileg-leave-at"
+            id={translationId}
             defaultMessage="leave from the vehicle at stop {stop} in {duration} minutes at {legTime}"
             values={values}
           />

app/component/itinerary/navigator/NaviUtils.js

@@ -644,4 +644,5 @@ export const LEGTYPE = {
   TRANSIT: 'TRANSIT',
   PENDING: 'PENDING',
   END: 'END',
+  WAIT_IN_VEHICLE: 'WAIT_IN_VEHICLE',
 };

app/component/itinerary/navigator/navigator.scss

@@ -189,6 +189,7 @@ $fixed-width-padding: 16px;
       flex-direction: column;
       max-height: 250px;
       margin-bottom: var(--space-s);
+      margin-top: var(--space-m);
 
       .extension-divider {
         height: 1px;
@@ -202,6 +203,13 @@ $fixed-width-padding: 16px;
       .stop-count {
         display: flex;
         margin-left: 35px;
+
+        .icon {
+          height: 16px;
+          width: 16px;
+          margin-right: var(--space-xxs);
+          margin-top: 2px;
+        }
       }
 
       .extension-routenumber {
@@ -251,6 +259,13 @@ $fixed-width-padding: 16px;
         margin-top: var(--space-xs);
       }
 
+      .wait-in-vehicle {
+        display: flex;
+        align-items: flex-start;
+        text-align: start;
+        margin-left: var(--space-xl);
+      }
+
       .icon-expand {
         margin-top: 5px;
         width: var(--space-m);