Update itinerary packages

__tests__/reducers/__snapshots__/create-otp-reducer.js.snap

@@ -102,6 +102,7 @@ Object {
     "diagramLeg": null,
     "locale": null,
     "localizedMessages": null,
+    "mainPanelContent": null,
     "mobileScreen": 1,
     "printView": false,
     "routeViewer": Object {

lib/components/narrative/default/default-itinerary.js

@@ -308,7 +308,6 @@ class DefaultItinerary extends NarrativeItinerary {
               itinerary={itinerary}
               LegIcon={LegIcon}
               setActiveLeg={setActiveLeg}
-              timeOptions={timeOptions}
             />
           </>
         )}

lib/components/narrative/line-itin/connected-itinerary-body.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 // TODO: Typescript (otp-rr config object)
 import { connect } from 'react-redux'
+import { PlaceName } from '@opentripplanner/itinerary-body/lib/otp-react-redux'
 import {
   PlaceName as PlaceNameWrapper,
   PlaceRowWrapper
@@ -9,7 +10,6 @@ import clone from 'clone'
 import isEqual from 'lodash.isequal'
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
-import PlaceName from '@opentripplanner/itinerary-body/lib/otp-react-redux/place-name'
 import React, { Component } from 'react'
 import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import styled from 'styled-components'
@@ -44,7 +44,7 @@ class ConnectedItineraryBody extends Component {
   static contextType = ComponentContext
 
   /** avoid rerendering if the itinerary to display hasn't changed */
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps) {
     return !isEqual(this.props.itinerary, nextProps.itinerary)
   }
 
@@ -57,8 +57,7 @@ class ConnectedItineraryBody extends Component {
       setActiveLeg,
       setLegDiagram,
       setMapillaryId,
-      setViewedTrip,
-      timeOptions
+      setViewedTrip
     } = this.props
     const { LegIcon } = this.context
     const clonedItinerary = clone(itinerary)
@@ -114,7 +113,6 @@ class ConnectedItineraryBody extends Component {
           showRouteFares={config.itinerary && config.itinerary.showRouteFares}
           showViewTripButton
           TimeColumnContent={RealtimeTimeColumn}
-          timeOptions={timeOptions}
           toRouteAbbreviation={noop}
           TransitLegSubheader={TransitLegSubheader}
           TransitLegSummary={TransitLegSummary}
@@ -126,7 +124,7 @@ class ConnectedItineraryBody extends Component {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   return {
     config: state.otp.config,
     diagramVisible: state.otp.ui.diagramLeg

lib/components/narrative/line-itin/connected-transit-leg-subheader.tsx

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux'
+import { Leg } from '@opentripplanner/types'
+import React, { Component } from 'react'
+import TransitLegSubheader from '@opentripplanner/itinerary-body/lib/otp-react-redux/transit-leg-subheader'
+
+import { setMainPanelContent, setViewedStop } from '../../../actions/ui'
+
+interface Props {
+  leg: Leg
+  setMainPanelContent: (content: any) => void
+  setViewedStop: (payload: { stopId: string }) => void
+}
+
+class ConnectedTransitLegSubheader extends Component<Props> {
+  onClick = (payload: { stopId: string }) => {
+    const { setMainPanelContent, setViewedStop } = this.props
+    setMainPanelContent(null)
+    setViewedStop(payload)
+  }
+
+  render() {
+    const { leg } = this.props
+    return <TransitLegSubheader leg={leg} onStopClick={this.onClick} />
+  }
+}
+
+const mapDispatchToProps = {
+  setMainPanelContent,
+  setViewedStop
+}
+
+export default connect(null, mapDispatchToProps)(ConnectedTransitLegSubheader)

lib/components/narrative/line-itin/line-itinerary.js

@@ -60,7 +60,6 @@ export default class LineItinerary extends NarrativeItinerary {
             // (will cause error when clicking on itinerary summary).
             // Use the one passed by NarrativeItineraries instead.
             setActiveLeg={setActiveLeg}
-            timeOptions={timeOptions}
           />
         ) : null}
         {ItineraryFooter && <ItineraryFooter />}

lib/components/narrative/line-itin/realtime-time-column.tsx

@@ -0,0 +1,60 @@
+import { FormattedTime } from 'react-intl'
+// TYPESCRIPT TODO: wait for typescripted core-utils
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { isTransit } from '@opentripplanner/core-utils/lib/itinerary'
+import { Leg } from '@opentripplanner/types'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+
+import RealtimeStatusLabel, {
+  DelayText,
+  MainContent
+} from '../../viewers/realtime-status-label'
+
+interface Props {
+  isDestination: boolean
+  leg: Leg
+}
+
+const StyledStatusLabel = styled(RealtimeStatusLabel)`
+  ${MainContent} {
+    font-size: 80%;
+    line-height: 1em;
+  }
+  ${DelayText} {
+    display: block;
+  }
+`
+/**
+ * This component displays the scheduled departure/arrival time for a leg,
+ * and, for transit legs, displays any delays or earliness where applicable.
+ */
+function RealtimeTimeColumn({ isDestination, leg }: Props): ReactElement {
+  const timeMillis = isDestination ? leg.endTime : leg.startTime
+  const isTransitLeg = isTransit(leg.mode)
+  const isRealtimeTransitLeg = isTransitLeg && leg.realTime
+
+  // For non-transit legs show only the scheduled time.
+  if (!isTransitLeg) {
+    return (
+      <div>
+        <FormattedTime timeStyle="short" value={timeMillis} />
+      </div>
+    )
+  }
+
+  const delaySeconds = isDestination ? leg.arrivalDelay : leg.departureDelay
+  const originalTimeMillis = timeMillis - delaySeconds * 1000
+
+  return (
+    <StyledStatusLabel
+      delay={delaySeconds}
+      isRealtime={isRealtimeTransitLeg}
+      originalTime={originalTimeMillis}
+      time={timeMillis}
+    />
+  )
+}
+
+export default RealtimeTimeColumn

lib/reducers/create-otp-reducer.js

@@ -203,6 +203,7 @@ export function getInitialState(userDefinedConfig) {
       diagramLeg: null,
       locale: null,
       localizedMessages: null,
+      mainPanelContent: null,
       mobileScreen: MobileScreens.WELCOME_SCREEN,
       printView: window.location.href.indexOf('/print/') !== -1,
       routeViewer: {

package.json

@@ -39,13 +39,13 @@
     "@opentripplanner/endpoints-overlay": "^1.4.1",
     "@opentripplanner/from-to-location-picker": "^2.1.1",
     "@opentripplanner/geocoder": "^1.2.1",
-    "@opentripplanner/humanize-distance": "^1.1.0",
+    "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "^1.2.0",
-    "@opentripplanner/itinerary-body": "^2.9.0",
+    "@opentripplanner/itinerary-body": "^3.0.3",
     "@opentripplanner/location-field": "1.12.2",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.4",
-    "@opentripplanner/printable-itinerary": "^1.3.1",
+    "@opentripplanner/printable-itinerary": "^2.0.0",
     "@opentripplanner/route-viewer-overlay": "^1.3.0",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^4.0.0",