Merge pull request #5179 from HSLdevcom/DT-6562

DT-6562: Alert feed for notifications and other adjustments
HSLdevcom · Nov 28, 2024 · 9b49562 · 9b49562
2 parents e3294c8 + 14b73e8
commit 9b49562
Show file tree

Hide file tree

Showing 14 changed files with 326 additions and 137 deletions.
diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js
@@ -615,6 +615,7 @@ const withRelay = createFragmentContainer(
               effectiveStartDate
               alertHeaderText
               alertDescriptionText
+              id
               entities {
                 __typename
                 ... on Route {

diff --git a/app/component/itinerary/ItineraryPage.js b/app/component/itinerary/ItineraryPage.js
@@ -1068,6 +1068,7 @@ export default function ItineraryPage(props, context) {
         showDurationBubble={planEdges?.[0]?.node.legs?.length === 1}
         objectsToHide={objectsToHide}
         itinerary={explicitItinerary}
+        showBackButton={!naviMode}
       />
     );
   }

diff --git 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
@@ -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';
@@ -10,23 +11,25 @@ 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);
 }
+
+function addMessages(incominMessages, newMessages) {
+  newMessages.forEach(m => {
+    incominMessages.set(m.id, m);
+  });
+}
 function NaviCardContainer(
   { focusToLeg, time, realTimeLegs, position },
-  { intl, config },
+  { intl, config, match, router },
 ) {
   const [currentLeg, setCurrentLeg] = useState(null);
   const [cardExpanded, setCardExpanded] = useState(false);
@@ -47,10 +50,10 @@ function NaviCardContainer(
   const handleClick = () => {
     setCardExpanded(!cardExpanded);
   };
-
   useEffect(() => {
     if (cardRef.current) {
       const contentHeight = cardRef.current.clientHeight;
+
       // Navistack top position depending on main card height.
       setTopPosition(contentHeight + 86);
     }
@@ -63,12 +66,11 @@ function NaviCardContainer(
 
     const incomingMessages = new Map();
 
-    // TODO proper alert handling.
     // Alerts for NaviStack
-    const alerts = getItineraryAlerts(realTimeLegs, intl, messages);
-    alerts.forEach(alert => {
-      incomingMessages.set(alert.id, alert);
-    });
+    addMessages(
+      incomingMessages,
+      getItineraryAlerts(realTimeLegs, intl, messages, match.params, router),
+    );
 
     const legChanged = newLeg?.legId
       ? newLeg.legId !== currentLeg?.legId
@@ -80,22 +82,10 @@ function NaviCardContainer(
 
       if (nextLeg?.transitLeg) {
         // Messages for NaviStack.
-        const transitLegState = getTransitLegState(nextLeg, intl, messages);
-        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);
@@ -185,8 +175,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 +220,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/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/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';
 
@@ -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);
@@ -44,21 +46,16 @@ 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 localizedMode = getLocalizedMode(mode, intl);
+
+    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>,
+      duration: withRealTime(rt, remainingDuration),
+      legTime: withRealTime(rt, legTimeStr(start)),
     };
     return (
       <>
@@ -83,7 +80,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>
@@ -93,25 +90,20 @@ export default function NaviInstructions(
   }
 
   if (legType === LEGTYPE.TRANSIT) {
+    const rt = leg.realtimeState === 'UPDATED';
+
     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 = 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,
       stop: leg.to.stop.name,
-      duration: (
-        <span className={cx({ realtime: rt })}> {remainingDuration} </span>
-      ),
-      legTime: (
-        <span className={cx({ realtime: rt })}>{legTimeStr(leg.end)}</span>
-      ),
+      duration: withRealTime(rt, remainingDuration),
+      legTime: withRealTime(rt, legTimeStr(leg.end)),
     };
 
     return (

diff --git 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,23 +43,16 @@ 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"
         className="info-close"
         onClick={() => handleRemoveClick()}
       >
         <Icon
-          img="icon-icon_close"
-          height={0.8}
-          width={0.8}
+          img="notification-close"
+          className="notification-close"
           color={config.colors.primary}
         />
       </button>