Patch Release: September 8, 2021

example-config.yml

@@ -42,6 +42,10 @@ api:
 persistence:
   enabled: true
   strategy: localStorage
+  ### This variable hides the "more info" link when accepting the terms of storage.
+  ### If no terms of storage page content is set, this removes an otherwise dead link
+  ### False is default in that if the value isn't set, the link isn't shown
+  # terms_of_storage: true
 
 ### If using the OTP Middleware to store user profiles
 ### with Auth0 as the authentication mechanism,

lib/actions/api.js

@@ -723,18 +723,7 @@ function createQueryAction (endpoint, responseAction, errorAction, options = {})
   return async function (dispatch, getState) {
     const state = getState()
     const { config } = state.otp
-    let url
-    if (
-      options.serviceId &&
-        config.alternateTransitIndex &&
-        config.alternateTransitIndex.services.includes(options.serviceId)
-    ) {
-      console.log('Using alt service for ' + options.serviceId)
-      url = config.alternateTransitIndex.apiRoot + endpoint
-    } else {
-      const api = config.api
-      url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
-    }
+    const url = makeApiUrl(config, endpoint, options)
 
     if (!options.noThrottle) {
       // don't make a request to a URL that has already seen the same request
@@ -750,9 +739,10 @@ function createQueryAction (endpoint, responseAction, errorAction, options = {})
         throttledUrls[throttleKey] = now()
       }
     }
+
     let payload
     try {
-      const response = await fetch(url, options.fetchOptions)
+      const response = await fetch(url, getOtpFetchOptions(state))
       if (response.status >= 400) {
         const error = new Error('Received error from server')
         error.response = response
@@ -775,6 +765,30 @@ function createQueryAction (endpoint, responseAction, errorAction, options = {})
   }
 }
 
+/**
+ * Creates the URL to use for making an API request.
+ *
+ * @param  {Object} config   The app-wide config
+ * @param  {string} endpoint The API endpoint path
+ * @param  {Object} options  The options object for the API request
+ * @return {string}          The URL to use for making the http request
+ */
+function makeApiUrl (config, endpoint, options) {
+  let url
+  if (
+    options.serviceId &&
+      config.alternateTransitIndex &&
+      config.alternateTransitIndex.services.includes(options.serviceId)
+  ) {
+    console.log('Using alt service for ' + options.serviceId)
+    url = config.alternateTransitIndex.apiRoot + endpoint
+  } else {
+    const api = config.api
+    url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
+  }
+  return url
+}
+
 // TODO: Determine how we might be able to use GraphQL with the alternative
 // transit index. Currently this is not easily possible because the alternative
 // transit index does not have support for GraphQL and handling both Rest and

lib/components/admin/call-taker.css

@@ -9,3 +9,14 @@
 .otp .advanced-search-options {
   box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.32157);
 }
+
+.otp .search-options {
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+}
+
+.otp .search-options > * {
+  margin-bottom: 5px;
+  height: 24px;
+}

lib/components/admin/field-trip-list.js

@@ -10,6 +10,7 @@ import Loading from '../narrative/loading'
 import {getVisibleRequests, TABS} from '../../util/call-taker'
 import {FETCH_STATUS} from '../../util/constants'
 
+import FieldTripStatusIcon from './field-trip-status-icon'
 import {FieldTripRecordButton, WindowHeader} from './styled'
 import DraggableWindow from './draggable-window'
 
@@ -186,10 +187,6 @@ class FieldTripRequestRecord extends Component {
     onClick(request)
   }
 
-  _getStatusIcon = (status) => status
-    ? <Icon className='text-success' type='check' />
-    : <Icon className='text-warning' type='exclamation-circle' />
-
   render () {
     const {active, request} = this.props
     const style = {
@@ -223,10 +220,10 @@ class FieldTripRequestRecord extends Component {
           </span>
           <span style={{display: 'inline-block', width: '50%'}}>
             <span style={{marginLeft: '10px'}}>
-              {this._getStatusIcon(inboundTripStatus)} Inbound
+              <FieldTripStatusIcon ok={Boolean(outboundTripStatus)} /> Outbound
             </span>
             <span style={{marginLeft: '10px'}}>
-              {this._getStatusIcon(outboundTripStatus)} Outbound
+              <FieldTripStatusIcon ok={Boolean(inboundTripStatus)} /> Inbound
             </span>
           </span>
           <span style={{display: 'block', fontSize: '.9em'}}>

lib/components/admin/field-trip-status-icon.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import Icon from '../narrative/icon'
+
+const FieldTripStatusIcon = ({ ok }) => (
+  ok
+    ? <Icon className='text-success' type='check' />
+    : <Icon className='text-warning' type='exclamation-circle' />
+)
+
+export default FieldTripStatusIcon

lib/components/admin/trip-status.js

@@ -5,9 +5,9 @@ import { connect } from 'react-redux'
 
 import * as fieldTripActions from '../../actions/field-trip'
 import * as formActions from '../../actions/form'
-import Icon from '../narrative/icon'
 import { getTripFromRequest } from '../../util/call-taker'
 
+import FieldTripStatusIcon from './field-trip-status-icon'
 import {
   Bold,
   Button,
@@ -47,13 +47,11 @@ class TripStatus extends Component {
     viewRequestTripItineraries(request, outbound)
   }
 
-  _renderStatusIcon = () => this.props.status
-    ? <Icon className='text-success' type='check' />
-    : <Icon className='text-warning' type='exclamation-circle' />
+  _tripIsPlanned = () => Boolean(this.props.status && this.props.trip)
 
   _renderTripStatus = () => {
-    const { status, trip } = this.props
-    if (!status || !trip) {
+    const { trip } = this.props
+    if (!this._tripIsPlanned()) {
       return (
         <Para>
           No itineraries planned! Click Plan to plan trip.
@@ -92,7 +90,7 @@ class TripStatus extends Component {
     return (
       <Full>
         <Header>
-          {this._renderStatusIcon()}
+          <FieldTripStatusIcon ok={this._tripIsPlanned()} />
           {outbound ? 'Outbound' : 'Inbound'} trip
           <Button bsSize='xs' onClick={this._onPlanTrip}>Plan</Button>
           <Button

lib/components/app/call-taker-panel.js

@@ -187,7 +187,7 @@ class CallTakerPanel extends Component {
               onClick={this._addPlace}
               to={to}
             />
-            <div className='search-options' style={{height: '30px'}}>
+            <div className='search-options'>
               <DateTimeOptions
                 date={date}
                 departArrive={departArrive}
@@ -208,9 +208,7 @@ class CallTakerPanel extends Component {
                 onClick={this._planTrip}
                 style={{
                   fontSize: '13px',
-                  padding: '0px 10px',
-                  position: 'absolute',
-                  right: '6px'
+                  padding: '1px 10px'
                 }} >
                 Plan
               </Button>
@@ -261,7 +259,7 @@ class CallTakerPanel extends Component {
                 right: '0',
                 // FIXME: This top pixel value can be variable dependent on
                 // height of the form above. It may need to be specified differently
-                top: 193 + intermediatePlaces.length * 45
+                top: 210 + intermediatePlaces.length * 45
               }}
             />
           </div>

lib/components/form/call-taker/date-time-options.js

@@ -186,44 +186,37 @@ export default class DateTimeOptions extends Component {
           onKeyDown={onKeyDown}
           value={departArrive}
         >
-          {departureOptions.map(o => (
-            <option key={o.value} {...o} />
-          ))}
+          {departureOptions.map(o => <option key={o.value} {...o} />)}
         </select>
-        <span style={{display: 'inline-flex'}}>
-          <OverlayTrigger
-            overlay={<Tooltip id='time-tooltip'>{cleanTime}</Tooltip>}
-            placement='bottom'
-            trigger={['focus', 'hover']}
-          >
-            <input
-              className='datetime-slim'
-              onChange={this.handleTimeChange}
-              onFocus={this.handleTimeFocus}
-              onKeyDown={onKeyDown}
-              style={{
-                fontSize: 'inherit',
-                lineHeight: '.8em',
-                marginLeft: '3px',
-                padding: '0px',
-                width: '50px'
-              }}
-              value={timeInput || dateTime.format('H:mm')}
-            />
-          </OverlayTrigger>
-        </span>
+        <OverlayTrigger
+          overlay={<Tooltip id='time-tooltip'>{cleanTime}</Tooltip>}
+          placement='bottom'
+          trigger={['focus', 'hover']}
+        >
+          <input
+            className='datetime-slim'
+            onChange={this.handleTimeChange}
+            onFocus={this.handleTimeFocus}
+            onKeyDown={onKeyDown}
+            style={{
+              fontSize: 'inherit',
+              lineHeight: '.8em',
+              marginLeft: '3px',
+              padding: '0px',
+              width: '50px'
+            }}
+            value={timeInput || dateTime.format('H:mm')}
+          />
+        </OverlayTrigger>
         <input
           className='datetime-slim'
           onChange={this.handleDateChange}
           onKeyDown={onKeyDown}
           style={{
-            border: 'none',
             fontSize: '14px',
-            left: '146px',
             lineHeight: '1em',
             outline: 'none',
-            position: 'absolute',
-            width: '101px'
+            width: '109px'
           }}
           type='date'
           value={dateTime.format('YYYY-MM-DD')}

lib/components/form/call-taker/mode-dropdown.js

@@ -74,7 +74,6 @@ export default class ModeDropdown extends Component {
         onBlur={this._setMode}
         onChange={this._onChange}
         onKeyDown={onKeyDown}
-        style={{position: 'absolute', right: '60px'}}
         value={this.modeToOptionValue(mode)}
       >
         {this._getModeOptions().map(o => (

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

@@ -8,10 +8,11 @@ import FieldTripGroupSize from '../../admin/field-trip-itinerary-group-size'
 import NarrativeItinerary from '../narrative-itinerary'
 import ItineraryBody from '../line-itin/connected-itinerary-body'
 import SimpleRealtimeAnnotation from '../simple-realtime-annotation'
+import { getTotalFare } from '../../../util/state'
 
 import ItinerarySummary from './itinerary-summary'
 
-const { calculateFares, isBicycle, isMicromobility, isTransit } = coreUtils.itinerary
+const { isBicycle, isMicromobility, isTransit } = coreUtils.itinerary
 
 /**
  * Obtains the description of an itinerary in the given locale.
@@ -125,14 +126,12 @@ const ITINERARY_ATTRIBUTES = [
     id: 'cost',
     order: 2,
     render: (itinerary, options) => {
-      // Get unformatted transit fare portion only (in cents).
-      const { transitFare } = calculateFares(itinerary)
       return (
         <FormattedNumber
           currency={options.currency}
           currencyDisplay='narrowSymbol'
           style='currency'
-          value={transitFare / 100}
+          value={getTotalFare(itinerary, options.configCosts) / 100}
         />
       )
     }
@@ -194,6 +193,7 @@ class DefaultItinerary extends NarrativeItinerary {
   render () {
     const {
       active,
+      configCosts,
       currency,
       expanded,
       itinerary,
@@ -246,6 +246,7 @@ class DefaultItinerary extends NarrativeItinerary {
                 }
                 options.LegIcon = LegIcon
                 options.timeFormat = use24HourFormat ? 'H:mm' : 'h:mm a'
+                options.configCosts = configCosts
                 options.currency = currency
                 return (
                   <li className={`${attribute.id}${isSelected ? ' main' : ''}`} key={attribute.id}>
@@ -276,6 +277,7 @@ class DefaultItinerary extends NarrativeItinerary {
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    configCosts: state.otp.config.itinerary?.costs,
     // The configured (ambient) currency is needed for rendering the cost
     // of itineraries whether they include a fare or not, in which case
     // we show $0.00 or its equivalent in the configured currency and selected locale.

lib/components/narrative/narrative-itineraries-header.js

@@ -95,7 +95,7 @@ export default function NarrativeItinerariesHeader ({
             <select
               onBlur={onSortChange}
               onChange={onSortChange}
-              value={sort.value}
+              value={sort.type}
             >
               <option value='BEST'>Best option</option>
               <option value='DURATION'>Duration</option>

lib/components/user/terms-of-use-pane.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
 
 import { TERMS_OF_SERVICE_PATH, TERMS_OF_STORAGE_PATH } from '../../util/constants'
@@ -10,6 +11,7 @@ const TermsOfUsePane = ({
   disableCheckTerms,
   handleBlur,
   handleChange,
+  termsOfStorageSet,
   values: userData
 }) => {
   const {
@@ -46,11 +48,15 @@ const TermsOfUsePane = ({
         >
           {/* TODO: Implement the link */}
             Optional: I consent to the Trip Planner storing my historical planned trips in order to
-            improve transit services in my area. <a href={`/#${TERMS_OF_STORAGE_PATH}`} target='_blank'>More info...</a>
+            improve transit services in my area. {termsOfStorageSet && <a href={`/#${TERMS_OF_STORAGE_PATH}`} target='_blank'>More info...</a>}
         </Checkbox>
       </FormGroup>
     </div>
   )
 }
-
-export default TermsOfUsePane
+const mapStateToProps = (state) => {
+  return {
+    termsOfStorageSet: state.otp.config.persistence?.terms_of_storage
+  }
+}
+export default connect(mapStateToProps)(TermsOfUsePane)

lib/util/auth.js

@@ -8,13 +8,6 @@ export const accountLinks = [
   {
     text: 'My account',
     url: ACCOUNT_PATH
-  },
-  {
-    // Add a target attribute if you need the link to open in a new window, etc.
-    // (supports the same values as <a target=... >).
-    // target: '_blank',
-    text: 'Help',
-    url: '/help'
   }
 ]