GTFS FLEX Support (trip planner only)

example-config.yml

@@ -2,6 +2,13 @@ api:
   host: http://localhost
   path: /otp/routers/default
   port: 8001
+
+# Support OTP-2 in parallel for certain requests
+# api_v2:
+#  host: http://localhost
+#  path: /otp/routers/default
+#  port: 8002
+
 # Add suggested locations to be shown as options in the form view.
 # locations:
 #   - id: 'airport'
@@ -339,6 +346,12 @@ itinerary:
 #       accessModes:
 #         bikeshare: Blue Bike
 #     config:
+#       menuItems:
+#         demo-item: Demo Item
+#       flex:
+#         flex-service: Flex Service
+#         call-ahead: "Call to reserve: (555) 555-5555"
+#         continuous-dropoff: Communicate with operator about stop
 #       acessibilityScore:
 #         gradationMap:
 #           0.0: 'Not Accessible'

i18n/en-US.yml

@@ -282,6 +282,8 @@ components:
     trips: Trips
   TabbedItineraries:
     optionNumber: "Option {optionNum, number}"
+    # Note to translator: This text is width-constrained.
+    mustCallAhead: Must call ahead!
     fareCost: >
       {hasMaxFare, select, 
         true {{minTotalFare}+}

i18n/fr-FR.yml

@@ -215,6 +215,8 @@ components:
     trips: Trajets
   TabbedItineraries:
     optionNumber: "Option {optionNum, number}"
+    # Note to translator: This text is width-constrained.
+    mustCallAhead: Résa. obligatoire
     fareCost: >
       {hasMaxFare, select, 
         true {À partir de {minTotalFare}}

lib/actions/api.js

@@ -252,9 +252,15 @@ function getOtpFetchOptions (state, includeToken = false) {
 function constructRoutingQuery (state, ignoreRealtimeUpdates, injectedParams = {}) {
   const { config, currentQuery } = state.otp
   const routingType = currentQuery.routingType
+  const routingMode = injectedParams?.mode || currentQuery.mode
+
   // Check for routingType-specific API config; if none, use default API
   const rt = config.routingTypes && config.routingTypes.find(rt => rt.key === routingType)
-  const api = (rt && rt.api) || config.api
+
+  // Certain requests will require OTP-2. If an OTP-2 host is specified, set it to be used
+  const useOtp2 = !!config.api_v2 && routingMode.includes('FLEX')
+
+  const api = (rt && rt.api) || (useOtp2 && config.api_v2) || config.api
   const planEndpoint = `${api.host}${api.port
     ? ':' + api.port
     : ''}${api.path}/plan`
@@ -922,6 +928,10 @@ function createQueryAction (endpoint, responseAction, errorAction, options = {})
     try {
       const response = await fetch(url, getOtpFetchOptions(state))
       if (response.status >= 400) {
+        // If a second endpoint is configured, try that before failing
+        if (!!config.api_v2 && !options.v2) {
+          return dispatch(createQueryAction(endpoint, responseAction, errorAction, {...options, v2: true}))
+        }
         const error = new Error('Received error from server')
         error.response = response
         throw error
@@ -961,7 +971,7 @@ function makeApiUrl (config, endpoint, options) {
     console.log('Using alt service for ' + options.serviceId)
     url = config.alternateTransitIndex.apiRoot + endpoint
   } else {
-    const api = config.api
+    const api = options.v2 ? config.api_v2 : config.api
     url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
   }
   return url

lib/components/map/connected-park-and-ride-overlay.js

@@ -26,9 +26,15 @@ class ConnectedParkAndRideOverlay extends Component {
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
+  const { locations } = state.otp.overlay?.parkAndRide
+
+  // object type indicates error
+  if (typeof locations === 'object') {
+    return {}
+  }
+
   return {
-    parkAndRideLocations: state.otp.overlay.parkAndRide &&
-      state.otp.overlay.parkAndRide.locations
+    parkAndRideLocations: locations
   }
 }
 

lib/components/map/connected-route-viewer-overlay.js

@@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => {
     viewedRoute && state.otp.transitIndex.routes
       ? state.otp.transitIndex.routes[viewedRoute.routeId]
       : null
-  let filteredPatterns = routeData?.patterns
+  let filteredPatterns = routeData?.patterns || []
 
   // If a pattern is selected, hide all other patterns
   if (viewedRoute?.patternId && routeData?.patterns) {

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

@@ -22,6 +22,7 @@ import {
 } from '../../../util/accessibility-routing'
 import Icon from '../../util/icon'
 
+import { FlexIndicator } from './flex-indicator'
 import ItinerarySummary from './itinerary-summary'
 
 const { isBicycle, isMicromobility, isTransit } = coreUtils.itinerary
@@ -209,7 +210,21 @@ class DefaultItinerary extends NarrativeItinerary {
       format: timeFormat,
       offset: coreUtils.itinerary.getTimeZoneOffset(itinerary)
     }
+    const isFlexItinerary = itinerary.legs.some(coreUtils.itinerary.isFlex)
+    const isCallAhead = itinerary.legs.some(coreUtils.itinerary.isReservationRequired)
+    const isContinuousDropoff = itinerary.legs.some(coreUtils.itinerary.isContinuousDropoff)
 
+    // Use first leg's agency as a fallback
+    const agency = itinerary.legs.map(leg => leg?.agencyName).filter(name => !!name)[0]
+    let phone = `contact ${agency}`
+
+    if (isCallAhead) {
+    // Picking 0 ensures that if multiple flex legs with
+    // different phone numbers, the first leg is prioritized
+      phone = itinerary.legs
+        .map((leg) => leg.pickupBookingInfo?.contactInfo?.phoneNumber)
+        .filter((number) => !!number)[0]
+    }
     return (
       <div
         className={`option default-itin${active ? ' active' : ''}${
@@ -226,7 +241,22 @@ class DefaultItinerary extends NarrativeItinerary {
         >
           <div className='title'>
             <ItineraryDescription itinerary={itinerary} />
+            <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
+            {itineraryHasAccessibilityScores(itinerary) && (
+              <AccessibilityRating
+                gradationMap={accessibilityScoreGradationMap}
+                large
+                score={getAccessibilityScoreForItinerary(itinerary)}
+              />
+            )}
           </div>
+          {isFlexItinerary && (
+            <FlexIndicator
+              isCallAhead={isCallAhead}
+              isContinuousDropoff={isContinuousDropoff}
+              phoneNumber={phone}
+            />
+          )}
           <ul className='list-unstyled itinerary-attributes'>
             {ITINERARY_ATTRIBUTES.sort((a, b) => {
               const aSelected = this._isSortingOnAttribute(a)
@@ -254,20 +284,7 @@ class DefaultItinerary extends NarrativeItinerary {
               )
             })}
           </ul>
-          <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
-          {itineraryHasAccessibilityScores(itinerary) && (
-            <AccessibilityRating
-              gradationMap={accessibilityScoreGradationMap}
-              large
-              score={getAccessibilityScoreForItinerary(itinerary)}
-            />
-          )}
           <FieldTripGroupSize itinerary={itinerary} />
-          {active && !expanded && (
-            <DetailsHint>
-              <FormattedMessage id='components.DefaultItinerary.clickDetails' />
-            </DetailsHint>
-          )}
         </button>
         {active && expanded && (
           <>
@@ -281,6 +298,11 @@ class DefaultItinerary extends NarrativeItinerary {
             />
           </>
         )}
+        {active && !expanded && (
+          <DetailsHint>
+            <FormattedMessage id='components.DefaultItinerary.clickDetails' />
+          </DetailsHint>
+        )}
       </div>
     )
   }

lib/components/narrative/default/flex-indicator.js

@@ -0,0 +1,99 @@
+// Craco will require this. FIXME: remove line once migrated to craco
+// eslint-disable-next-line no-unused-vars
+import { barberPole } from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
+import { FormattedMessage } from 'react-intl'
+import React from 'react'
+import styled from 'styled-components'
+import tinycolor from 'tinycolor2'
+
+import Icon from '../../util/icon'
+
+export const FLEX_COLOR = '#FA6400'
+const FLEX_COLOR_LIGHT = tinycolor(FLEX_COLOR).lighten(40).toHexString()
+
+const FlexNotice = ({ faKey, showText, text }) => (
+  <>
+    <Icon name={faKey} />
+    {showText && <p>{text}</p>}
+  </>
+)
+
+const FlexIndicatorWrapper = styled.div`
+  background: ${FLEX_COLOR_LIGHT};
+  border-bottom-right-radius: 8px;
+  border-top-right-radius: 8px;
+  color: ${FLEX_COLOR};
+  display: grid;
+  grid-template-columns: 1fr 2fr 3fr 2fr;
+  grid-template-rows: 1fr 2fr;
+  grid-column-gap: ${(props) => (props.shrink ? '8px' : 'inherit')};
+  height: ${(props) => (props.shrink ? '40px' : '80px')};
+  margin-right: 1em;
+  max-width: ${(props) => (props.shrink ? '60px' : '190px')};
+  padding-right: 0.25em;
+  padding-top: 0.25em;
+
+  /* "Flex Service" text */
+  h4 {
+    grid-column: 3 / span 2;
+    grid-row: 1;
+    margin: 0;
+    padding-top: 2px;
+    text-align: left;
+  }
+
+  /* Icon (phone or hand) */
+  span {
+    font-size: 32px;
+    grid-column: 2;
+    grid-row: 2;
+    height: 100%;
+    width: 100%;
+  }
+
+  /* Description text */
+  p {
+    font-size: 13px;
+    grid-column: 3 / span 2;
+    grid-row: 2;
+    text-overflow: ellipsis;
+    overflow-y: hidden;
+  }
+
+  /* Barber pole at left */
+  &::before {
+    background: ${barberPole(FLEX_COLOR)};
+    content: '';
+    display: block;
+    grid-row: 1 / span 2;
+    height: inherit;
+    margin-top: -0.25em;
+    position: relative;
+    width: 20px;
+  }
+`
+
+export const FlexIndicator = ({ isCallAhead, isContinuousDropoff, phoneNumber, shrink }) => (
+  <FlexIndicatorWrapper shrink={shrink}>
+    {!shrink && (
+      <h4>
+        <FormattedMessage id='config.flex.flex-service' />
+      </h4>
+    )}
+    {isCallAhead && (
+      <FlexNotice
+        faKey='phone'
+        showText={!shrink}
+        text={<FormattedMessage id='config.flex.call-ahead' values={{ phoneNumber }} />}
+      />
+    )}
+    {/* Only show continuous dropoff message if call ahead message isn't shown */}
+    {isContinuousDropoff && !isCallAhead && (
+      <FlexNotice
+        faKey='hand-paper-o'
+        showText={!shrink}
+        text={<FormattedMessage id='config.flex.continuous-dropoff' />}
+      />
+    )}
+  </FlexIndicatorWrapper>
+)

lib/components/narrative/default/itinerary.css

@@ -32,12 +32,15 @@
 .otp .option.default-itin > .header {
   font-size: 16px;
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
 }
 
 .otp .option.default-itin > .header > .title {
   font-weight: 500;
   font-size: large;
   display: inline;
+  flex: 2;
 }
 
 .otp .option.default-itin > .header > .itinerary-attributes {
@@ -54,23 +57,25 @@
   font-size: x-large;
 }
 
-.otp .option.default-itin > .header > .summary {
+.otp .option.default-itin > .header > .title > .summary {
   /* text-align: center; */
-  margin: 8px 0px;
+  margin: 0px 0px;
 }
 
-.otp .option.default-itin > .header > .summary > .summary-block {
+.otp .option.default-itin > .header > .title > .summary > .summary-block {
   display: inline-block;
   vertical-align: middle;
-  margin: 0px 2px;
+}
+.otp .option.default-itin > .header > .title > .summary > .summary-block > svg {
+  margin-bottom: 2px;
 }
 
-.otp .option.default-itin > .header > .summary > .mode-block {
+.otp .option.default-itin > .header > .title > .summary > .mode-block {
   height: 18px;
   width: 18px;
 }
 
-.otp .option.default-itin > .header > .summary > .arrow-block {
+.otp .option.default-itin > .header > .title > .summary > .arrow-block {
   padding-top: 4px;
   font-size: 13px;
 }

lib/components/narrative/tabbed-itineraries.js

@@ -11,6 +11,9 @@ import { ComponentContext } from '../../util/contexts'
 import { getTimeFormat } from '../../util/i18n'
 import { getActiveSearch, getRealtimeEffects } from '../../util/state'
 import FormattedDuration from '../util/formatted-duration'
+import Icon from '../util/icon'
+
+import { FLEX_COLOR } from './default/flex-indicator'
 
 const { calculateFares, calculatePhysicalActivity } = coreUtils.itinerary
 
@@ -130,6 +133,8 @@ class TabButton extends Component {
     // TODO: support non-USD
     const transitFare = (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare || 0
     const minTotalFare = minTNCFare * 100 + transitFare
+    const mustCallAhead = itinerary.legs.some(coreUtils.itinerary.isReservationRequired)
+
     if (isActive) classNames.push('selected')
     return (
       <Button
@@ -138,12 +143,16 @@ class TabButton extends Component {
         onClick={this._onClick}
       >
         <span className='title'>
+          {mustCallAhead && <Icon name='volume-control-phone' style={{ color: FLEX_COLOR }} />}
           <FormattedMessage
             id='components.TabbedItineraries.optionNumber'
-            values={{optionNum: index + 1}}
+            values={{ optionNum: index + 1 }}
           />
         </span>
         <span className='details'>
+          {mustCallAhead && <span style={{ color: FLEX_COLOR }}>
+            <FormattedMessage id='components.TabbedItineraries.mustCallAhead' />
+          </span>}
           <span>
             {/* The itinerary duration in hrs/mins */}
             <FormattedDuration duration={itinerary.duration} />