fix(narrative): properly render eScooter legs occurring after forced walking

Author: evansiroky

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

@@ -156,42 +156,58 @@ class RentedVehicleLeg extends PureComponent {
   render () {
     const { config, leg } = this.props
     const configCompanies = config.companies || []
+
+    // Sometimes rented vehicles can be walked over things like stairs or other
+    // ways that forbid the main mode of travel.
     if (leg.mode === 'WALK') {
       return (
         <div className='place-subheader'>
           Walk vehicle along {leg.from.name}
         </div>
       )
     }
-    if (leg.rentedVehicle || leg.rentedBike || leg.rentedCar) {
-      let pickUpString = 'Pick up'
-      if (leg.rentedBike) {
-        // TODO: Special case for TriMet may need to be refactored.
-        pickUpString += ` shared bike`
-      } else {
-        // Add company and vehicle labels.
+
+    let pickUpString = 'Pick up'
+    if (leg.rentedBike) {
+      // TODO: Special case for TriMet may need to be refactored.
+      pickUpString += ` shared bike`
+    } else {
+      // Add company and vehicle labels.
+      let vehicleName = ''
+      // TODO allow more flexibility in customizing these mode strings
+      let modeString = leg.rentedVehicle
+        ? 'eScooter'
+        : leg.rentedBike
+          ? 'bike'
+          : 'car'
+
+      // The networks attribute of the from data will only appear at the very
+      // beggining of the rental. It is possible that there will be some forced
+      // walking that occurs in the middle of the rental, so once the main mode
+      // resumes there won't be any network info. In that case we simply return
+      // that the rental is continuing.
+      if (leg.from.networks) {
         const companies = leg.from.networks.map(n => getCompanyForNetwork(n, configCompanies))
         const companyLabel = companies.map(co => co.label).join('/')
         pickUpString += ` ${companyLabel}`
-        const modeString = getModeForPlace(leg.from)
         // 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}` : ''
-        pickUpString += ` ${modeString}${vehicleName}`
+        if (leg.rentedCar && leg.from.name) {
+          vehicleName = leg.from.name
+        }
+        modeString = getModeForPlace(leg.from)
+      } else {
+        pickUpString = 'Continue using rental'
       }
-      // e.g., Pick up REACHNOW rented car XYZNDB OR
-      //       Pick up SPIN eScooter
-      //       Pick up shared bike
-      return (
-        <div className='place-subheader'>
-          {pickUpString}
-        </div>
-      )
+
+      pickUpString += ` ${modeString}${vehicleName}`
     }
-    // FIXME: Under what conditions would this be returned?
+    // e.g., Pick up REACHNOW rented car XYZNDB OR
+    //       Pick up SPIN eScooter
+    //       Pick up shared bike
     return (
       <div className='place-subheader'>
-        Continue riding from {leg.from.name}
+        {pickUpString}
       </div>
     )
   }

lib/util/itinerary.js

@@ -393,9 +393,9 @@ export function getLegIcon (leg, customIcons) {
     iconStr = leg.from.networks[0]
   } else if (iconStr === 'CAR' && leg.tncData) {
     iconStr = leg.tncData.company
-  } else if (iconStr === 'BICYCLE' && leg.rentedBike) {
+  } else if (iconStr === 'BICYCLE' && leg.rentedBike && leg.from.networks) {
     iconStr = leg.from.networks[0]
-  } else if (iconStr === 'MICROMOBILITY' && leg.rentedVehicle) {
+  } else if (iconStr === 'MICROMOBILITY' && leg.rentedVehicle && leg.from.networks) {
     iconStr = leg.from.networks[0]
   }