fix(vehicle-rental): fix place names for eScooter rentals

Previously place names for vehicle (scooter) rentals defaulted to the place name, which often tend
to be UUIDs that have no relevance to the ID found on the scooter/vehicle. This changes the place
name to be $COMPANY $VEHICLE_TYPE and uses the same shared component for bike, car, and
micromobility rental.

fix ibi-group/trimet-mod-otp#213

Author: landonreed

lib/components/narrative/default/access-leg.js

@@ -7,6 +7,9 @@ import { distanceString } from '../../../util/distance'
 import { getStepInstructions } from '../../../util/itinerary'
 import { formatDuration } from '../../../util/time'
 
+/**
+ * Default access leg component for narrative itinerary.
+ */
 export default class AccessLeg extends Component {
   static propTypes = {
     activeStep: PropTypes.number,

lib/components/narrative/line-itin/access-leg-body.js

@@ -6,12 +6,23 @@ import currencyFormatter from 'currency-formatter'
 import LegDiagramPreview from '../leg-diagram-preview'
 
 import { distanceString } from '../../../util/distance'
-import { getLegModeLabel, getLegIcon, getPlaceName, getStepDirection, getStepStreetName } from '../../../util/itinerary'
+import {
+  getLegModeLabel,
+  getLegIcon,
+  getPlaceName,
+  getStepDirection,
+  getStepStreetName
+} from '../../../util/itinerary'
 import { formatDuration, formatTime } from '../../../util/time'
 import { isMobile } from '../../../util/ui'
 
 import DirectionIcon from '../../icons/direction-icon'
 
+/**
+ * Component for access (e.g. walk/bike/etc.) leg in narrative itinerary. This
+ * particular component is used in the line-itin (i.e., trimet-mod-otp) version
+ * of the narrative itinerary.
+ */
 export default class AccessLegBody extends Component {
   static propTypes = {
     leg: PropTypes.object,
@@ -32,15 +43,27 @@ export default class AccessLegBody extends Component {
   }
 
   render () {
-    const { customIcons, followsTransit, leg, timeOptions } = this.props
+    const { config, customIcons, followsTransit, leg, timeOptions } = this.props
 
     if (leg.mode === 'CAR' && leg.hailedCar) {
-      return <TNCLeg leg={leg} onSummaryClick={this._onSummaryClick} timeOptions={timeOptions} followsTransit={followsTransit} customIcons={customIcons} />
+      return (
+        <TNCLeg
+          config={config}
+          leg={leg}
+          onSummaryClick={this._onSummaryClick}
+          timeOptions={timeOptions}
+          followsTransit={followsTransit}
+          customIcons={customIcons} />
+      )
     }
 
     return (
       <div className='leg-body'>
-        <AccessLegSummary leg={leg} onSummaryClick={this._onSummaryClick} customIcons={customIcons} />
+        <AccessLegSummary
+          config={config}
+          leg={leg}
+          onSummaryClick={this._onSummaryClick}
+          customIcons={customIcons} />
 
         <div onClick={this._onStepsHeaderClick} className='steps-header'>
           {formatDuration(leg.duration)}
@@ -60,6 +83,7 @@ class TNCLeg extends Component {
   render () {
     // TODO: ensure that client ID fields are populated
     const {
+      config,
       LYFT_CLIENT_ID,
       UBER_CLIENT_ID,
       customIcons,
@@ -82,7 +106,11 @@ class TNCLeg extends Component {
 
         <div className='leg-body'>
           {/* The icon/summary row */}
-          <AccessLegSummary leg={leg} onSummaryClick={this.props.onSummaryClick} customIcons={customIcons} />
+          <AccessLegSummary
+            config={config}
+            leg={leg}
+            onSummaryClick={this.props.onSummaryClick}
+            customIcons={customIcons} />
 
           {/* The "Book Ride" button */}
           <div style={{ marginTop: 10, marginBottom: 10, height: 32, position: 'relative' }}>
@@ -125,7 +153,7 @@ class TNCLeg extends Component {
 
 class AccessLegSummary extends Component {
   render () {
-    const { customIcons, leg } = this.props
+    const { config, customIcons, leg } = this.props
     return (
       <div className='summary leg-description' onClick={this.props.onSummaryClick}>
         {/* Mode-specific icon */}
@@ -136,7 +164,7 @@ class AccessLegSummary extends Component {
           {getLegModeLabel(leg)}
           {' '}
           {leg.distance && <span> {distanceString(leg.distance)}</span>}
-          {` to ${getPlaceName(leg.to)}`}
+          {` to ${getPlaceName(leg.to, config.companies)}`}
         </div>
       </div>
     )

lib/components/narrative/line-itin/place-row.js

@@ -1,8 +1,14 @@
 import React, { Component, PureComponent } from 'react'
+import { connect } from 'react-redux'
 
 import LocationIcon from '../../icons/location-icon'
 import ViewStopButton from '../../viewers/view-stop-button'
-import { getPlaceName, isTransit } from '../../../util/itinerary'
+import {
+  getCompanyForNetwork,
+  getModeStringForCompany,
+  getPlaceName,
+  isTransit
+} from '../../../util/itinerary'
 import { formatTime } from '../../../util/time'
 
 import TransitLegBody from './transit-leg-body'
@@ -11,7 +17,7 @@ import AccessLegBody from './access-leg-body'
 // TODO: make this a prop
 const defaultRouteColor = '#008'
 
-export default class PlaceRow extends Component {
+class PlaceRow extends Component {
   _createLegLine (leg) {
     switch (leg.mode) {
       case 'WALK': return <div className='leg-line leg-line-walk' />
@@ -31,7 +37,7 @@ export default class PlaceRow extends Component {
 
   /* eslint-disable complexity */
   render () {
-    const { customIcons, leg, legIndex, place, time, timeOptions, followsTransit, previousLeg } = this.props
+    const { config, customIcons, leg, legIndex, place, time, timeOptions, followsTransit, previousLeg } = this.props
     const stackIcon = (name, color, size) => <i className={`fa fa-${name} fa-stack-1x`} style={{ color, fontSize: size + 'px' }} />
 
     let icon
@@ -59,6 +65,10 @@ export default class PlaceRow extends Component {
     }
 
     const interline = leg && leg.interlineWithPreviousLeg
+    // TODO: This changeVehicles condition might should be showing the full stop
+    // place name because it could be helpful to give the user the stop viewer to
+    // click on in order to see what time the next vehicle will be arriving to the
+    // shared stop.
     const changeVehicles = previousLeg && previousLeg.to.stopId === leg.from.stopId && isTransit(previousLeg.mode) && isTransit(leg.mode)
     const special = interline || changeVehicles
     return (
@@ -80,7 +90,7 @@ export default class PlaceRow extends Component {
               ? <div className='interline-name'>Stay on Board at <b>{place.name}</b></div>
               : changeVehicles
                 ? <div className='interline-name'>Change Vehicles at <b>{place.name}</b></div>
-                : <div>{getPlaceName(place)}</div>
+                : <div>{getPlaceName(place, config.companies)}</div>
             }
           </div>
 
@@ -92,22 +102,11 @@ export default class PlaceRow extends Component {
             </div>
           )}
 
-          {/* Place subheading: rented bike pickup */}
-          {leg && leg.rentedBike && (
-            <div className='place-subheader'>
-              Pick up shared bike
-            </div>
+          {/* Place subheading: rented vehicle (e.g., scooter, bike, car) pickup */}
+          {leg && (leg.rentedVehicle || leg.rentedBike || leg.rentedCar) && (
+            <RentedVehicleLeg config={config} leg={leg} />
           )}
 
-          {/* Place subheading: rented car pickup */}
-          {leg && leg.rentedCar && (
-            <div className='place-subheader'>
-              Pick up {leg.from.networks ? leg.from.networks.join('/') : 'rented car'} {leg.from.name}
-            </div>
-          )}
-
-          <RentedVehicleLeg leg={leg} />
-
           {/* Show the leg, if present */}
           {leg && (
             leg.transitLeg
@@ -121,6 +120,7 @@ export default class PlaceRow extends Component {
               )
               : (/* This is an access (e.g. walk/bike/etc.) leg */
                 <AccessLegBody
+                  config={config}
                   customIcons={customIcons}
                   followsTransit={followsTransit}
                   leg={leg}
@@ -137,6 +137,20 @@ export default class PlaceRow extends Component {
   }
 }
 
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    // Pass config in order to give access to companies definition (used to
+    // determine proper place names for rental vehicles).
+    config: state.otp.config
+  }
+}
+
+const mapDispatchToProps = { }
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlaceRow)
+
 /**
  * A component to display vehicle rental data. The word "Vehicle" has been used
  * because a future refactor is intended to combine car rental, bike rental
@@ -146,8 +160,8 @@ export default class PlaceRow extends Component {
  */
 class RentedVehicleLeg extends PureComponent {
   render () {
-    const {leg} = this.props
-    if (!leg || !leg.rentedVehicle) return null
+    const { config, leg } = this.props
+    const configCompanies = config.companies || []
     if (leg.mode === 'WALK') {
       return (
         <div className='place-subheader'>
@@ -156,14 +170,23 @@ class RentedVehicleLeg extends PureComponent {
       )
     }
 
-    if (leg.rentedVehicleData) {
+    if (leg.rentedVehicle || leg.rentedBike || leg.rentedCar) {
+      // console.log(leg.from.networks, configCompanies)
+      const companies = leg.from.networks.map(n => getCompanyForNetwork(n, configCompanies))
+      const companyLabel = companies.map(co => co.label).join('/')
+      const modeString = getModeStringForCompany(companies[0])
+      // Only show vehicle name for car rentals. For bikes and eScooters, these
+      // IDs/names tend to be less relevant (or entirely useless) in this context.
+      const vehicleName = leg.rentedCar ? ` ${leg.from.name}` : ''
+      // e.g., Pick up REACHNOW rented car XYZNDB OR
+      //       Pick up SPIN eScooter
       return (
         <div className='place-subheader'>
-          Pick up {leg.rentedVehicleData.companies.join('/')} vehicle {leg.from.name}
+          Pick up {companyLabel} {modeString}{vehicleName}
         </div>
       )
     }
-
+    // FIXME: Under what conditions would this be returned?
     return (
       <div className='place-subheader'>
         Continue riding from {leg.from.name}

lib/util/itinerary.js

@@ -390,21 +390,55 @@ export function getLegIcon (leg, customIcons) {
   }
   let iconStr = leg.mode
   if (iconStr === 'CAR' && leg.rentedCar) {
-    iconStr = leg.rentedCarData.companies[0]
+    iconStr = leg.from.networks[0]
   } else if (iconStr === 'CAR' && leg.tncData) {
     iconStr = leg.tncData.company
   } else if (iconStr === 'BICYCLE' && leg.rentedBike) {
-    // placeholder for future vehicle rental refactor
-  } else if (iconStr === 'MICROMOBILITY' && leg.rentedVehicle && leg.rentedVehicleData) {
-    iconStr = leg.rentedVehicleData.companies[0]
+    iconStr = leg.from.networks[0]
+  } else if (iconStr === 'MICROMOBILITY' && leg.rentedVehicle) {
+    iconStr = leg.from.networks[0]
   }
 
   return getIcon(iconStr, customIcons)
 }
 
-export function getPlaceName (place) {
+export function getCompanyForNetwork (networkString, companies = []) {
+  const company = companies.find(co => co.id === networkString)
+  if (!company) {
+    console.warn(`No company found in config.yml that matches rented vehicle network: ${networkString}`, companies)
+  }
+  return company
+}
+
+export function getModeStringForCompany (company) {
+  switch (company.modes) {
+    case 'CAR_RENT':
+      return 'rented car'
+    case 'MICROMOBILITY_RENT':
+      return 'eScooter'
+    case 'BICYCLE_RENT':
+      return 'bike'
+    // If company offers more than one mode, default to `vehicle` string.
+    default:
+      return 'vehicle'
+  }
+}
+
+export function getPlaceName (place, companies) {
   // If address is provided (i.e. for carshare station, use it)
-  return place.address ? place.address.split(',')[0] : place.name
+  if (place.address) return place.address.split(',')[0]
+  if (place.networks && place.vertexType === 'VEHICLERENTAL') {
+    // For vehicle rental pick up, do not use the place name. Rather, use
+    // company name + vehicle type (e.g., SPIN eScooter). Place name is often just
+    // a UUID that has no relevance to the actual vehicle. For bikeshare, however,
+    // there are often hubs or bikes that have relevant names to the user.
+    const company = getCompanyForNetwork(place.networks[0], companies)
+    if (company) {
+      return `${company.label} ${getModeStringForCompany(company)}`
+    }
+  }
+  // Default to place name
+  return place.name
 }
 
 export function getTNCLocation (leg, type) {