From 6809ce199d82678526e30c0883a5920b7d1a7f9f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 10 Feb 2021 16:06:00 -0500
Subject: [PATCH 001/270] improvement(connect-location-field): Display
 loggedInUser.savedLocations in LocationField dropdown.

---
 lib/components/form/connect-location-field.js | 39 ++++++++++++++++++-
 .../user/places/place-location-field.js       |  4 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index b22262f21..8bc2dbdfa 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -1,8 +1,22 @@
+import clone from 'clone'
 import { connect } from 'react-redux'
 
 import * as apiActions from '../../actions/api'
 import * as locationActions from '../../actions/location'
+import Icon from '../narrative/icon'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
+import { isBlank } from '../../util/ui'
+import { isWork } from '../../util/user'
+
+// Custom user location icon to be consistent with the account page.
+const UserLocationIcon = ({ userLocation }) => {
+  const { icon = 'marker' } = userLocation
+  // localStorage locations that are assigned the 'work' icon
+  // should be rendered as 'briefcase'.
+  const finalIcon = icon === 'work' ? 'briefcase' : icon
+
+  return <Icon name={finalIcon} />
+}
 
 /**
  * This higher-order component connects the target (styled) LocationField to the
@@ -16,13 +30,30 @@ import { getActiveSearch, getShowUserSettings } from '../../util/state'
  */
 export default function connectLocationField (StyledLocationField, options = {}) {
   // By default, set actions to empty list and do not include location.
-  const {actions = [], includeLocation = false} = options
+  const {
+    actions = [],
+    excludeSavedLocations = false,
+    includeLocation = false
+  } = options
   const mapStateToProps = (state, ownProps) => {
     const { config, currentQuery, location, transitIndex, user } = state.otp
+    const { loggedInUser } = state.user
     const { currentPosition, nearbyStops, sessionSearches } = location
     const activeSearch = getActiveSearch(state.otp)
     const query = activeSearch ? activeSearch.query : currentQuery
 
+    // Clone loggedInUserLocations with changes to conform to LocationField requirements:
+    // - locations with blank addresses are removed.
+    // - "Work" location icon name is changed to 'work',
+    // - location.name is filled with the location address if available,
+    let loggedInUserLocations = loggedInUser ? clone(loggedInUser.savedLocations) : []
+    loggedInUserLocations = loggedInUserLocations.filter(loc => !isBlank(loc.address))
+    loggedInUserLocations.filter(isWork).forEach(loc => { loc.icon = 'work' })
+    loggedInUserLocations.forEach(loc => { loc.name = loc.address })
+
+    // Holds saved locations unless excluded in options.
+    const userSavedLocations = !excludeSavedLocations ? [...loggedInUserLocations, ...user.locations] : []
+
     const stateToProps = {
       currentPosition,
       geocoderConfig: config.geocoder,
@@ -30,7 +61,11 @@ export default function connectLocationField (StyledLocationField, options = {})
       sessionSearches,
       showUserSettings: getShowUserSettings(state.otp),
       stopsIndex: transitIndex.stops,
-      userLocationsAndRecentPlaces: [...user.locations, ...user.recentPlaces]
+
+      UserLocationIconComponent: UserLocationIcon,
+      //see notes regarding persistence strategy
+      //refactor obtaining the locations.
+      userLocationsAndRecentPlaces: [...userSavedLocations, ...user.recentPlaces]
     }
     // Set the location prop only if includeLocation is specified, else leave unset.
     // Otherwise, the StyledLocationField component will use the fixed undefined/null value as location
diff --git a/lib/components/user/places/place-location-field.js b/lib/components/user/places/place-location-field.js
index 31a75fdba..ee541cfc5 100644
--- a/lib/components/user/places/place-location-field.js
+++ b/lib/components/user/places/place-location-field.js
@@ -74,4 +74,6 @@ const StyledLocationField = styled(LocationField)`
 /**
  * Styled LocationField for setting a favorite place locations using the geocoder.
  */
-export const PlaceLocationField = connectLocationField(StyledLocationField)
+export const PlaceLocationField = connectLocationField(StyledLocationField, {
+  excludeSavedLocations: true
+})

From 9b933a3befee20887eb50a12ce840620dd329bd7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 10 Feb 2021 16:48:12 -0500
Subject: [PATCH 002/270] refactor(connect-location-field): Refactor user
 locations. Update JSDoc.

---
 lib/components/form/connect-location-field.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index 8bc2dbdfa..2d6398294 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -46,10 +46,13 @@ export default function connectLocationField (StyledLocationField, options = {})
     // - locations with blank addresses are removed.
     // - "Work" location icon name is changed to 'work',
     // - location.name is filled with the location address if available,
-    let loggedInUserLocations = loggedInUser ? clone(loggedInUser.savedLocations) : []
-    loggedInUserLocations = loggedInUserLocations.filter(loc => !isBlank(loc.address))
-    loggedInUserLocations.filter(isWork).forEach(loc => { loc.icon = 'work' })
-    loggedInUserLocations.forEach(loc => { loc.name = loc.address })
+    const loggedInUserLocations = loggedInUser
+      ? clone(loggedInUser.savedLocations).filter(loc => !isBlank(loc.address))
+      : []
+    loggedInUserLocations.forEach(loc => {
+      if (isWork(loc)) loc.icon = 'work'
+      loc.name = loc.address
+    })
 
     // Holds saved locations unless excluded in options.
     const userSavedLocations = !excludeSavedLocations ? [...loggedInUserLocations, ...user.locations] : []
@@ -61,7 +64,6 @@ export default function connectLocationField (StyledLocationField, options = {})
       sessionSearches,
       showUserSettings: getShowUserSettings(state.otp),
       stopsIndex: transitIndex.stops,
-
       UserLocationIconComponent: UserLocationIcon,
       //see notes regarding persistence strategy
       //refactor obtaining the locations.

From 3f4678728e3884a45c6617b583f9e1b84151e690 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 10 Feb 2021 17:14:29 -0500
Subject: [PATCH 003/270] refactor(connect-location-field): Refactor locations,
 update JSDoc.

---
 lib/components/form/connect-location-field.js | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index 2d6398294..c5e88d2cd 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -1,4 +1,3 @@
-import clone from 'clone'
 import { connect } from 'react-redux'
 
 import * as apiActions from '../../actions/api'
@@ -8,10 +7,12 @@ import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import { isBlank } from '../../util/ui'
 import { isWork } from '../../util/user'
 
-// Custom user location icon to be consistent with the account page.
+/**
+ * Custom icon component that renders based on the user location icon prop.
+ */
 const UserLocationIcon = ({ userLocation }) => {
   const { icon = 'marker' } = userLocation
-  // localStorage locations that are assigned the 'work' icon
+  // Places from localStorage that are assigned the 'work' icon
   // should be rendered as 'briefcase'.
   const finalIcon = icon === 'work' ? 'briefcase' : icon
 
@@ -22,8 +23,9 @@ const UserLocationIcon = ({ userLocation }) => {
  * This higher-order component connects the target (styled) LocationField to the
  * redux store.
  * @param StyledLocationField The input LocationField component to connect.
- * @param options Optional object with the following optional props:
+ * @param options Optional object with the following optional props (see defaults in code):
  *                - actions: a list of actions to include in mapDispatchToProps
+ *                - excludeSavedLocations: whether to not render user-saved locations
  *                - includeLocation: whether to derive the location prop from
  *                  the active query
  * @returns The connected component.
@@ -47,14 +49,18 @@ export default function connectLocationField (StyledLocationField, options = {})
     // - "Work" location icon name is changed to 'work',
     // - location.name is filled with the location address if available,
     const loggedInUserLocations = loggedInUser
-      ? clone(loggedInUser.savedLocations).filter(loc => !isBlank(loc.address))
+      ? loggedInUser.savedLocations
+        .filter(loc => !isBlank(loc.address))
+        .map(loc => ({
+          ...loc,
+          icon: isWork(loc) ? 'work' : loc.icon,
+          name: loc.address
+        }))
       : []
-    loggedInUserLocations.forEach(loc => {
-      if (isWork(loc)) loc.icon = 'work'
-      loc.name = loc.address
-    })
 
     // Holds saved locations unless excluded in options.
+    // see notes regarding persistence strategy
+    // refactor obtaining the locations.
     const userSavedLocations = !excludeSavedLocations ? [...loggedInUserLocations, ...user.locations] : []
 
     const stateToProps = {
@@ -65,8 +71,6 @@ export default function connectLocationField (StyledLocationField, options = {})
       showUserSettings: getShowUserSettings(state.otp),
       stopsIndex: transitIndex.stops,
       UserLocationIconComponent: UserLocationIcon,
-      //see notes regarding persistence strategy
-      //refactor obtaining the locations.
       userLocationsAndRecentPlaces: [...userSavedLocations, ...user.recentPlaces]
     }
     // Set the location prop only if includeLocation is specified, else leave unset.

From 354110882458b89289aba739642ca18e4671b48b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 11 Feb 2021 10:45:44 -0500
Subject: [PATCH 004/270] refactor(places): Address browser console errors.

---
 lib/components/user/places/favorite-place-row.js | 2 +-
 lib/components/user/places/place-editor.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place-row.js
index ca0ea0944..37fa60677 100644
--- a/lib/components/user/places/favorite-place-row.js
+++ b/lib/components/user/places/favorite-place-row.js
@@ -122,7 +122,7 @@ FavoritePlaceRow.propTypes = {
   place: PropTypes.shape({
     address: PropTypes.string,
     icon: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
     type: PropTypes.string.isRequired
   })
 }
diff --git a/lib/components/user/places/place-editor.js b/lib/components/user/places/place-editor.js
index b9d850751..9329011f9 100644
--- a/lib/components/user/places/place-editor.js
+++ b/lib/components/user/places/place-editor.js
@@ -83,9 +83,9 @@ class PlaceEditor extends Component {
 
           <FormGroup>
             <StyledToggleButtonGroup
+              defaultValue={place.type}
               name='type'
               type='radio'
-              value={place.type}
             >
               {Object.values(CUSTOM_PLACE_TYPES).map(({ icon, text, type }) => (
                 <ToggleButton

From 649641aab9eb07bced64457449265e751629c193 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 11 Feb 2021 15:11:53 -0500
Subject: [PATCH 005/270] feat: Add loggedInUser.savedLocations to main panel.

---
 lib/actions/user.js                           |   3 +-
 lib/components/form/connect-location-field.js |  10 +-
 lib/components/form/user-settings.js          | 152 ++++++++++++------
 .../user/places/favorite-place-row.js         | 127 +++++++++------
 .../user/places/favorite-places-list.js       |  10 +-
 lib/util/user.js                              |  13 ++
 6 files changed, 200 insertions(+), 115 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 16157daa1..8ebd6d3d0 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -453,11 +453,12 @@ export function saveUserPlace (placeToSave, placeIndex) {
 /**
  * Delete the place data at the specified index for the logged-in user.
  */
-export function deleteUserPlace (placeIndex) {
+export function deleteUserPlace (place) {
   return function (dispatch, getState) {
     if (!confirm('Would you like to remove this place?')) return
 
     const { loggedInUser } = getState().user
+    const placeIndex = loggedInUser.savedLocations.indexOf(place)
     loggedInUser.savedLocations.splice(placeIndex, 1)
 
     dispatch(createOrUpdateUser(loggedInUser, true))
diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index c5e88d2cd..1b3597322 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -5,7 +5,7 @@ import * as locationActions from '../../actions/location'
 import Icon from '../narrative/icon'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import { isBlank } from '../../util/ui'
-import { isWork } from '../../util/user'
+import { convertToLocationFieldLocation } from '../../util/user'
 
 /**
  * Custom icon component that renders based on the user location icon prop.
@@ -47,15 +47,11 @@ export default function connectLocationField (StyledLocationField, options = {})
     // Clone loggedInUserLocations with changes to conform to LocationField requirements:
     // - locations with blank addresses are removed.
     // - "Work" location icon name is changed to 'work',
-    // - location.name is filled with the location address if available,
+    // - location.name is filled with the location address if available.
     const loggedInUserLocations = loggedInUser
       ? loggedInUser.savedLocations
         .filter(loc => !isBlank(loc.address))
-        .map(loc => ({
-          ...loc,
-          icon: isWork(loc) ? 'work' : loc.icon,
-          name: loc.address
-        }))
+        .map(convertToLocationFieldLocation)
       : []
 
     // Holds saved locations unless excluded in options.
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 71b80e41a..4f43fc61a 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -1,14 +1,18 @@
+import clone from 'clone'
 import moment from 'moment'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
-import Icon from '../narrative/icon'
 import { forgetSearch, toggleTracking } from '../../actions/api'
 import { setQueryParam } from '../../actions/form'
 import { forgetPlace, forgetStop, setLocation } from '../../actions/map'
 import { setViewedStop } from '../../actions/ui'
+import Icon from '../narrative/icon'
+import FavoritePlaceRow from '../user/places/favorite-place-row'
+import { PLACES_PATH } from '../../util/constants'
+import { convertToLocationFieldLocation, isHomeOrWork } from '../../util/user'
 
 const { getDetailText, formatStoredPlaceName, matchLatLon } = coreUtils.map
 const { summarizeQuery } = coreUtils.query
@@ -31,42 +35,46 @@ class UserSettings extends Component {
 
   _enableTracking = () => !this.props.user.trackRecent && this.props.toggleTracking(true)
 
-  _getLocations = (user) => {
-    const locations = [...user.locations]
-    if (!locations.find(l => l.type === 'work')) {
-      locations.push({
-        id: 'work',
-        type: 'work',
-        icon: 'briefcase',
-        name: 'click to add',
-        blank: true
-      })
-    }
-    if (!locations.find(l => l.type === 'home')) {
-      locations.push({
-        id: 'home',
-        type: 'home',
-        icon: 'home',
-        name: 'click to add',
-        blank: true
-      })
-    }
-    return locations
+  _getLocations = () => {
+      //see notes regarding persistence strategy
+      //refactor obtaining the locations.
+    const { loggedInUser, user } = this.props
+    return clone(user.locations)
+    // const savedLocations = loggedInUser ? clone(loggedInUser.savedLocations) : []
+    // Identify saved locations for non-'forgettability' purposes.
+    // savedLocations.forEach(l => { l.origin = 'loggedInUser' })
+
+    // return [...savedLocations, ...locations]
   }
 
   render () {
-    const { storageDisclaimer, user } = this.props
+    const { loggedInUser, storageDisclaimer, user } = this.props
     const { favoriteStops, trackRecent, recentPlaces, recentSearches } = user
     // Clone locations in order to prevent blank locations from seeping into the
     // app state/store.
-    const locations = this._getLocations(user)
+    const locations = this._getLocations()
+    const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
+    // Insert additional location types before 'custom' if needed.
     const order = ['home', 'work', 'suggested', 'stop', 'recent']
     const sortedLocations = locations
       .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
+
     return (
       <div className='user-settings'>
         <ul style={{ padding: 0 }}>
-          {sortedLocations.map(location => {
+          {/* Middleware locations */}
+          {loggedInUserLocations.map((place, index) => {
+            return (
+              <PlaceRow
+                {...this.props}
+                key={index}
+                path={`${PLACES_PATH}/${index}`}
+                place={place}
+              />
+            )
+          }
+          )}
+          {sortedLocations.map((location, index) => {
             return <Place key={location.id} location={location} {...this.props} />
           })}
         </ul>
@@ -110,15 +118,15 @@ class UserSettings extends Component {
           <div className='section-header'>My preferences</div>
           <small>Remember recent searches/places?</small>
           <Button
-            onClick={this._enableTracking}
-            className={trackRecent ? 'active' : ''}
             bsSize='xsmall'
-            bsStyle='link'>Yes</Button>
+            bsStyle='link'
+            className={trackRecent ? 'active' : ''}
+            onClick={this._enableTracking}>Yes</Button>
           <Button
-            onClick={this._disableTracking}
-            className={!trackRecent ? 'active' : ''}
             bsSize='xsmall'
-            bsStyle='link'>No</Button>
+            bsStyle='link'
+            className={!trackRecent ? 'active' : ''}
+            onClick={this._disableTracking}>No</Button>
         </div>
         {storageDisclaimer &&
           <div>
@@ -133,6 +141,44 @@ class UserSettings extends Component {
   }
 }
 
+/**
+ * Wraps FavoriteLocationRow with actions to set the to/from location.
+ */
+class PlaceRow extends Component {
+  _handleClick = () => {
+    const { place, query, setLocation } = this.props
+
+    const location = convertToLocationFieldLocation(place)
+    //NOTE: this is common with the Place component below.
+    // If 'to' not set and 'from' does not match location, set as 'to'.
+    if (
+      !query.to && (
+        !query.from || !matchLatLon(location, query.from)
+      )
+    ) {
+      setLocation({ location, locationType: 'to' })
+    } else if (
+      // Vice versa for setting as 'from'.
+      !query.from &&
+        !matchLatLon(location, query.to)
+    ) {
+      setLocation({ location, locationType: 'from' })
+    }
+  }
+
+  render () {
+    const { path, place } = this.props
+    return (
+      <FavoritePlaceRow
+        isFixed={isHomeOrWork(place)}
+        onClick={place.address ? this._handleClick : null}
+        path={path}
+        place={place}
+      />
+    )
+  }
+}
+
 class Place extends Component {
   _onSelect = () => {
     const { location, query, setLocation } = this.props
@@ -145,13 +191,13 @@ class Place extends Component {
           !query.from || !matchLatLon(location, query.from)
         )
       ) {
-        setLocation({ locationType: 'to', location })
+        setLocation({ location, locationType: 'to' })
       } else if (
         // Vice versa for setting as 'from'.
         !query.from &&
           !matchLatLon(location, query.to)
       ) {
-        setLocation({ locationType: 'from', location })
+        setLocation({ location, locationType: 'from' })
       }
     }
   }
@@ -186,10 +232,10 @@ class Place extends Component {
       <li className='place-item'>
         <Button
           bsStyle='link'
-          title={formatStoredPlaceName(location)}
           className='place-button'
+          onClick={this._onSelect}
           style={{ width: `calc(100% - ${offset}px)` }}
-          onClick={this._onSelect}>
+          title={formatStoredPlaceName(location)}>
           <span
             className='place-text'>
             <Icon type={icon} /> {formatStoredPlaceName(location, false)}
@@ -201,20 +247,20 @@ class Place extends Component {
         </Button>
         {showView &&
           <Button
-            onClick={this._onView}
-            className='place-view'
             bsSize='xsmall'
-            title='View stop'
+            bsStyle='link'
+            className='place-view'
+            onClick={this._onView}
             style={{ width: `${BUTTON_WIDTH}px` }}
-            bsStyle='link'><Icon type='search' /></Button>
+            title='View stop'><Icon type='search' /></Button>
         }
         {showForget &&
           <Button
-            onClick={this._onForget}
-            className='place-clear'
             bsSize='xsmall'
-            style={{ width: `${BUTTON_WIDTH}px` }}
-            bsStyle='link'>Clear</Button>
+            bsStyle='link'
+            className='place-clear'
+            onClick={this._onForget}
+            style={{ width: `${BUTTON_WIDTH}px` }}>Clear</Button>
         }
       </li>
     )
@@ -238,24 +284,27 @@ class RecentSearch extends Component {
       <li className='place-item'>
         <Button
           bsStyle='link'
-          title={`${name} (${moment(timestamp).fromNow()})`}
+          onClick={this._onSelect}
           style={{
-            padding: '5px 0 0 0',
-            whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis',
+            padding: '5px 0 0 0',
             textAlign: 'left',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
             width: `calc(100% - ${BUTTON_WIDTH}px)`
           }}
-          onClick={this._onSelect}>
+          title={`${name} (${moment(timestamp).fromNow()})`}>
           <span className='place-text'><Icon type='clock-o' /> {name} </span>
           <span className='place-detail'>{moment(timestamp).fromNow()}</span>
         </Button>
         <Button
-          onClick={this._onForget}
           bsSize='xsmall'
+          bsStyle='link'
+          onClick={this._onForget}
           style={{ paddingTop: '6px', width: `${BUTTON_WIDTH}px` }}
-          bsStyle='link'>Clear</Button>
+        >
+          Clear
+        </Button>
       </li>
     )
   }
@@ -267,6 +316,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     config: state.otp.config,
     currentPosition: state.otp.location.currentPosition,
+    loggedInUser: state.user.loggedInUser,
     nearbyStops: state.otp.location.nearbyStops,
     query: state.otp.currentQuery,
     sessionSearches: state.otp.location.sessionSearches,
@@ -277,9 +327,9 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  forgetStop,
   forgetPlace,
   forgetSearch,
+  forgetStop,
   setLocation,
   setQueryParam,
   setViewedStop,
diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place-row.js
index 37fa60677..07c97f221 100644
--- a/lib/components/user/places/favorite-place-row.js
+++ b/lib/components/user/places/favorite-place-row.js
@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Component } from 'react'
 import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
 import styled, { css } from 'styled-components'
 
+import * as userActions from '../../../actions/user'
 import { LinkContainerWithQuery } from '../../form/connected-links'
 import Icon from '../../narrative/icon'
 
@@ -16,6 +18,7 @@ const Container = styled.div`
 `
 const PlaceButton = styled(Button)`
   align-items: center;
+  background: none;
   display: flex;
   flex: 1 0 0;
   overflow: hidden;
@@ -25,6 +28,7 @@ const PlaceButton = styled(Button)`
 
 const GreyIcon = styled(Icon)`
   color: #888;
+  flex-shrink: 0;
   margin-right: 10px;
 `
 
@@ -48,6 +52,7 @@ const deleteCss = css`
 
 const DeleteButton = styled(Button)`
   ${deleteCss}
+  background: none;
 `
 
 const DeletePlaceholder = styled.span`
@@ -55,67 +60,83 @@ const DeletePlaceholder = styled.span`
 `
 
 const MESSAGES = {
-  EDIT: 'Edit this place',
-  DELETE: 'Delete this place'
+  DELETE: 'Delete this place',
+  EDIT: 'Edit this place'
 }
 
 /**
  * Renders a clickable button for editing a user's favorite place,
  * and lets the user delete the place.
  */
-const FavoritePlaceRow = ({ isFixed, onDelete, path, place }) => {
-  if (place) {
-    const { address, icon, name, type } = place
-    return (
-      <Container>
-        <LinkContainerWithQuery to={path}>
-          <PlaceButton
-            aria-label={MESSAGES.EDIT}
-            title={MESSAGES.EDIT}
+class FavoritePlaceRow extends Component {
+  _handleDelete = () => {
+    const { deleteUserPlace, place } = this.props
+    deleteUserPlace(place)
+  }
+
+  render () {
+    const { isFixed, onClick, path, place } = this.props
+    if (place) {
+      const { address, icon, name, type } = place
+      const to = onClick ? null : path
+      const ariaLabel = to && MESSAGES.EDIT //What should it be if onClick is defined?
+
+      return (
+        <Container>
+          <LinkContainerWithQuery
+          // Don't highlight component if 'to' is null.
+            activeClassName=''
+            onClick={onClick}
+            to={to}
           >
-            <GreyIcon name={icon} size='2x' />
-            <PlaceContent>
-              {name && <span>{name}</span>}
-              <span>{address || `Set your ${type} address`}</span>
-            </PlaceContent>
-          </PlaceButton>
-        </LinkContainerWithQuery>
-
-        {/* For fixed places, show Delete only if an address has been provided. */}
-        {(!isFixed || address)
-          ? (
-            <DeleteButton
-              aria-label={MESSAGES.DELETE}
-              onClick={onDelete}
-              title={MESSAGES.DELETE}
+            <PlaceButton
+              aria-label={ariaLabel}
+              title={ariaLabel}
             >
-              <GreyIcon name='trash-o' size='2x' />
-            </DeleteButton>
-          )
-          : <DeletePlaceholder />}
-      </Container>
-    )
-  } else {
+              <GreyIcon name={icon} size='2x' />
+              <PlaceContent>
+                {name && <span>{name}</span>}
+                <span>{address || `Set your ${type} address`}</span>
+              </PlaceContent>
+            </PlaceButton>
+          </LinkContainerWithQuery>
+
+          {/* For fixed places, show Delete only if an address has been provided. */}
+          {(!isFixed || address)
+            ? (
+              <DeleteButton
+                aria-label={MESSAGES.DELETE}
+                onClick={this._handleDelete}
+                title={MESSAGES.DELETE}
+              >
+                <GreyIcon name='trash-o' size='2x' />
+              </DeleteButton>
+            )
+            : <DeletePlaceholder />}
+        </Container>
+      )
+    } else {
     // If no place is passed, render the Add place button instead.
-    return (
-      <Container>
-        <LinkContainerWithQuery to={path}>
-          <PlaceButton>
-            <GreyIcon name='plus' size='2x' />
+      return (
+        <Container>
+          <LinkContainerWithQuery to={path}>
+            <PlaceButton>
+              <GreyIcon name='plus' size='2x' />
               Add another place
-          </PlaceButton>
-        </LinkContainerWithQuery>
-        <DeletePlaceholder />
-      </Container>
-    )
+            </PlaceButton>
+          </LinkContainerWithQuery>
+          <DeletePlaceholder />
+        </Container>
+      )
+    }
   }
 }
 
 FavoritePlaceRow.propTypes = {
-  /** Whether the place is fixed (e.g. 'Home', 'Work' are fixed.) */
+  /** Whether the place is shown, even if address is blank (e.g. 'Home', 'Work') */
   isFixed: PropTypes.bool,
-  /** Called when the delete button is clicked. */
-  onDelete: PropTypes.func,
+  /** Called when the "main" button is clicked. Takes precedence over the path prop. */
+  onClick: PropTypes.func,
   /** The path to navigate to on click. */
   path: PropTypes.string.isRequired,
   /** The place to render. */
@@ -127,4 +148,14 @@ FavoritePlaceRow.propTypes = {
   })
 }
 
-export default FavoritePlaceRow
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {}
+}
+
+const mapDispatchToProps = {
+  deleteUserPlace: userActions.deleteUserPlace
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlaceRow)
diff --git a/lib/components/user/places/favorite-places-list.js b/lib/components/user/places/favorite-places-list.js
index c73a1669c..604fea3db 100644
--- a/lib/components/user/places/favorite-places-list.js
+++ b/lib/components/user/places/favorite-places-list.js
@@ -2,7 +2,6 @@ import React from 'react'
 import { ControlLabel } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
-import * as userActions from '../../../actions/user'
 import { PLACES_PATH } from '../../../util/constants'
 import { isHomeOrWork } from '../../../util/user'
 import FavoritePlaceRow from './favorite-place-row'
@@ -11,7 +10,7 @@ import FavoritePlaceRow from './favorite-place-row'
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
  */
-const FavoritePlacesList = ({ deleteUserPlace, loggedInUser }) => {
+const FavoritePlacesList = ({ loggedInUser }) => {
   const { savedLocations } = loggedInUser
   return (
     <div>
@@ -21,7 +20,6 @@ const FavoritePlacesList = ({ deleteUserPlace, loggedInUser }) => {
         <FavoritePlaceRow
           isFixed={isHomeOrWork(place)}
           key={index}
-          onDelete={() => deleteUserPlace(index)}
           path={`${PLACES_PATH}/${index}`}
           place={place}
         />
@@ -42,8 +40,4 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-const mapDispatchToProps = {
-  deleteUserPlace: userActions.deleteUserPlace
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlacesList)
+export default connect(mapStateToProps)(FavoritePlacesList)
diff --git a/lib/util/user.js b/lib/util/user.js
index 041a74368..cb3589d84 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -80,3 +80,16 @@ export function positionHomeAndWorkFirst (userData) {
 
   userData.savedLocations = reorderedLocations
 }
+
+/**
+ * Convert an entry from persisted user savedLocations into LocationField locations:
+ * - The icon for "Work" places is changed to 'work',
+ * - The name attribute is filled with the place address if available.
+ */
+export function convertToLocationFieldLocation (place) {
+  return {
+    ...place,
+    icon: isWork(place) ? 'work' : place.icon,
+    name: place.address
+  }
+}

From 48184aba477c80f9561cb8a0100c3dc137125dbd Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 12 Feb 2021 11:49:05 -0500
Subject: [PATCH 006/270] refactor(user/places/place): Extract place components
 for main pnl/settings.

---
 lib/components/form/styled.js                 |   4 +
 lib/components/form/user-settings.js          |  29 ++--
 .../user/places/favorite-place-row.js         | 162 +++++-------------
 .../user/places/favorite-places-list.js       |  26 +--
 .../user/places/main-panel-place.js           |  56 ++++++
 lib/components/user/places/place.js           | 151 ++++++++++++++++
 6 files changed, 286 insertions(+), 142 deletions(-)
 create mode 100644 lib/components/user/places/main-panel-place.js
 create mode 100644 lib/components/user/places/place.js

diff --git a/lib/components/form/styled.js b/lib/components/form/styled.js
index c7ccb2e80..21bfbf3cf 100644
--- a/lib/components/form/styled.js
+++ b/lib/components/form/styled.js
@@ -324,3 +324,7 @@ export const StyledDateTimeSelector = styled(DateTimeSelector)`
     height: 35px;
   }
 `
+
+export const UnpaddedList = styled.ul`
+  padding: 0;
+`
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 4f43fc61a..2602f0640 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -9,8 +9,10 @@ import { forgetSearch, toggleTracking } from '../../actions/api'
 import { setQueryParam } from '../../actions/form'
 import { forgetPlace, forgetStop, setLocation } from '../../actions/map'
 import { setViewedStop } from '../../actions/ui'
+import { LinkWithQuery } from '../form/connected-links'
 import Icon from '../narrative/icon'
-import FavoritePlaceRow from '../user/places/favorite-place-row'
+import { UnpaddedList } from './styled' 
+import MainPanelPlace from '../user/places/main-panel-place'
 import { PLACES_PATH } from '../../util/constants'
 import { convertToLocationFieldLocation, isHomeOrWork } from '../../util/user'
 
@@ -61,7 +63,14 @@ class UserSettings extends Component {
 
     return (
       <div className='user-settings'>
-        <ul style={{ padding: 0 }}>
+        <div className='section-header'>
+          My saved places (
+          <LinkWithQuery to='/account/settings'>
+            manage
+          </LinkWithQuery>
+          )
+        </div>
+        <UnpaddedList>
           {/* Middleware locations */}
           {loggedInUserLocations.map((place, index) => {
             return (
@@ -77,40 +86,40 @@ class UserSettings extends Component {
           {sortedLocations.map((location, index) => {
             return <Place key={location.id} location={location} {...this.props} />
           })}
-        </ul>
+        </UnpaddedList>
         <hr />
         <div className='section-header'>Favorite stops</div>
-        <ul style={{ padding: 0 }}>
+        <UnpaddedList>
           {favoriteStops.length > 0
             ? favoriteStops.map(location => {
               return <Place key={location.id} location={location} {...this.props} />
             })
             : <small>No favorite stops </small>
           }
-        </ul>
+        </UnpaddedList>
         {trackRecent && recentPlaces.length > 0 &&
           <div className='recent-places-container'>
             <hr />
             <div className='section-header'>Recent places</div>
-            <ul style={{ padding: 0 }}>
+            <UnpaddedList>
               {recentPlaces.map(location => {
                 return <Place key={location.id} location={location} {...this.props} />
               })}
-            </ul>
+            </UnpaddedList>
           </div>
         }
         {trackRecent && recentSearches.length > 0 &&
           <div className='recent-searches-container'>
             <hr />
             <div className='section-header'>Recent searches</div>
-            <ul style={{ padding: 0 }}>
+            <UnpaddedList>
               {recentSearches
                 .sort((a, b) => b.timestamp - a.timestamp)
                 .map(search => {
                   return <RecentSearch key={search.id} search={search} {...this.props} />
                 })
               }
-            </ul>
+            </UnpaddedList>
           </div>
         }
         <hr />
@@ -169,7 +178,7 @@ class PlaceRow extends Component {
   render () {
     const { path, place } = this.props
     return (
-      <FavoritePlaceRow
+      <MainPanelPlace
         isFixed={isHomeOrWork(place)}
         onClick={place.address ? this._handleClick : null}
         path={path}
diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place-row.js
index 07c97f221..8c4b175c3 100644
--- a/lib/components/user/places/favorite-place-row.js
+++ b/lib/components/user/places/favorite-place-row.js
@@ -1,72 +1,54 @@
-import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 import * as userActions from '../../../actions/user'
-import { LinkContainerWithQuery } from '../../form/connected-links'
-import Icon from '../../narrative/icon'
+
+import Place, {
+  DeletePlaceholder,
+  PlaceButton,
+  PlaceContent,
+  PlaceDetail,
+  PlaceIcon
+} from './place'
 
 const FIELD_HEIGHT_PX = '60px'
 
-const Container = styled.div`
+const StyledPlace = styled(Place)`
   align-items: stretch;
   display: flex;
   height: ${FIELD_HEIGHT_PX};
   margin-bottom: 10px;
-`
-const PlaceButton = styled(Button)`
-  align-items: center;
-  background: none;
-  display: flex;
-  flex: 1 0 0;
-  overflow: hidden;
-  text-align: left;
-  width: inherit;
-`
-
-const GreyIcon = styled(Icon)`
-  color: #888;
-  flex-shrink: 0;
-  margin-right: 10px;
-`
 
-const PlaceContent = styled.span`
-  display: inline-block;
-
-  & * {
+  ${PlaceButton} {
+    align-items: center;
+    display: flex;
+    flex: 1 0 0;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+  }
+  ${PlaceContent} {
+    display: inline-block;
+    margin-left: 10px;
+  }
+  ${PlaceDetail} {
     color: #888;
     display: block;
   }
-
-  & *:first-child {
-    color: inherit;
+  ${PlaceIcon} {
+    color: #888;
+    flex-shrink: 0;
+  }
+  ${DeletePlaceholder} {
+    margin-left: 4px;
+    width: ${FIELD_HEIGHT_PX};
   }
 `
 
-const deleteCss = css`
-  margin-left: 4px;
-  width: ${FIELD_HEIGHT_PX};
-`
-
-const DeleteButton = styled(Button)`
-  ${deleteCss}
-  background: none;
-`
-
-const DeletePlaceholder = styled.span`
-  ${deleteCss}
-`
-
-const MESSAGES = {
-  DELETE: 'Delete this place',
-  EDIT: 'Edit this place'
-}
-
 /**
- * Renders a clickable button for editing a user's favorite place,
- * and lets the user delete the place.
+ * Wrapper for the Place component in FavoritePlacesList that
+ * handles deleting the place.
  */
 class FavoritePlaceRow extends Component {
   _handleDelete = () => {
@@ -75,79 +57,19 @@ class FavoritePlaceRow extends Component {
   }
 
   render () {
-    const { isFixed, onClick, path, place } = this.props
-    if (place) {
-      const { address, icon, name, type } = place
-      const to = onClick ? null : path
-      const ariaLabel = to && MESSAGES.EDIT //What should it be if onClick is defined?
-
-      return (
-        <Container>
-          <LinkContainerWithQuery
-          // Don't highlight component if 'to' is null.
-            activeClassName=''
-            onClick={onClick}
-            to={to}
-          >
-            <PlaceButton
-              aria-label={ariaLabel}
-              title={ariaLabel}
-            >
-              <GreyIcon name={icon} size='2x' />
-              <PlaceContent>
-                {name && <span>{name}</span>}
-                <span>{address || `Set your ${type} address`}</span>
-              </PlaceContent>
-            </PlaceButton>
-          </LinkContainerWithQuery>
-
-          {/* For fixed places, show Delete only if an address has been provided. */}
-          {(!isFixed || address)
-            ? (
-              <DeleteButton
-                aria-label={MESSAGES.DELETE}
-                onClick={this._handleDelete}
-                title={MESSAGES.DELETE}
-              >
-                <GreyIcon name='trash-o' size='2x' />
-              </DeleteButton>
-            )
-            : <DeletePlaceholder />}
-        </Container>
-      )
-    } else {
-    // If no place is passed, render the Add place button instead.
-      return (
-        <Container>
-          <LinkContainerWithQuery to={path}>
-            <PlaceButton>
-              <GreyIcon name='plus' size='2x' />
-              Add another place
-            </PlaceButton>
-          </LinkContainerWithQuery>
-          <DeletePlaceholder />
-        </Container>
-      )
-    }
+    const { isFixed, path, place } = this.props
+    return (
+      <StyledPlace
+        isFixed={isFixed}
+        largeIcon
+        onDelete={this._handleDelete}
+        path={path}
+        place={place}
+      />
+    )
   }
 }
 
-FavoritePlaceRow.propTypes = {
-  /** Whether the place is shown, even if address is blank (e.g. 'Home', 'Work') */
-  isFixed: PropTypes.bool,
-  /** Called when the "main" button is clicked. Takes precedence over the path prop. */
-  onClick: PropTypes.func,
-  /** The path to navigate to on click. */
-  path: PropTypes.string.isRequired,
-  /** The place to render. */
-  place: PropTypes.shape({
-    address: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    type: PropTypes.string.isRequired
-  })
-}
-
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {
diff --git a/lib/components/user/places/favorite-places-list.js b/lib/components/user/places/favorite-places-list.js
index 604fea3db..8c3de2302 100644
--- a/lib/components/user/places/favorite-places-list.js
+++ b/lib/components/user/places/favorite-places-list.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { ControlLabel } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
+import { UnpaddedList } from '../../form/styled'
 import { PLACES_PATH } from '../../../util/constants'
 import { isHomeOrWork } from '../../../util/user'
 import FavoritePlaceRow from './favorite-place-row'
@@ -15,19 +16,20 @@ const FavoritePlacesList = ({ loggedInUser }) => {
   return (
     <div>
       <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
+      <UnpaddedList>
+        {savedLocations.map((place, index) => (
+          <FavoritePlaceRow
+            isFixed={isHomeOrWork(place)}
+            key={index}
+            path={`${PLACES_PATH}/${index}`}
+            place={place}
+          />
+        )
+        )}
 
-      {savedLocations.map((place, index) => (
-        <FavoritePlaceRow
-          isFixed={isHomeOrWork(place)}
-          key={index}
-          path={`${PLACES_PATH}/${index}`}
-          place={place}
-        />
-      )
-      )}
-
-      {/* For adding a new place. */}
-      <FavoritePlaceRow path={`${PLACES_PATH}/new`} />
+        {/* For adding a new place. */}
+        <FavoritePlaceRow path={`${PLACES_PATH}/new`} />
+      </UnpaddedList>
     </div>
   )
 }
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
new file mode 100644
index 000000000..bcf27fd2e
--- /dev/null
+++ b/lib/components/user/places/main-panel-place.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import * as userActions from '../../../actions/user'
+
+import Place, { DeletePlaceholder, PlaceName } from './place'
+
+const StyledPlace = styled(Place)`
+  ${PlaceName} {
+    margin-left: 0.25em;
+  }
+  ${DeletePlaceholder} {
+    width: 40px;
+  }
+`
+
+/**
+ * Wrapper for the Place component in the main panel that
+ * handles deleting the place.
+ */
+class MainPanelPlace extends Component {
+  _handleDelete = () => {
+    const { deleteUserPlace, place } = this.props
+    deleteUserPlace(place)
+  }
+
+  render () {
+    const { isFixed, onClick, path, place } = this.props
+    return (
+      <StyledPlace
+        buttonStyle='link'
+        className='place-item'
+        isFixed={isFixed}
+        onClick={onClick}
+        onDelete={this._handleDelete}
+        path={path}
+        place={place}
+        placeDetailClassName='place-detail'
+        placeTextClassName='place-text'
+      />
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {}
+}
+
+const mapDispatchToProps = {
+  deleteUserPlace: userActions.deleteUserPlace
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MainPanelPlace)
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
new file mode 100644
index 000000000..678072912
--- /dev/null
+++ b/lib/components/user/places/place.js
@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import styled from 'styled-components'
+
+import { LinkContainerWithQuery } from '../../form/connected-links'
+import Icon from '../../narrative/icon'
+
+const Container = styled.li`
+  align-items: stretch;
+  display: flex;
+`
+export const PlaceButton = styled(Button)`
+  background: none;
+  flex: 1 0 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+`
+
+export const PlaceIcon = styled(Icon)``
+
+export const PlaceDetail = styled.span``
+
+export const PlaceContent = styled.span``
+
+export const PlaceName = styled.span``
+
+export const PlaceText = styled.span``
+
+const DeleteButton = styled(Button)`
+  background: none;
+  height: 100%;
+  width: 100%;
+`
+
+export const DeletePlaceholder = styled.span``
+
+const MESSAGES = {
+  DELETE: 'Delete this place',
+  EDIT: 'Edit this place'
+}
+
+/**
+ * Renders a clickable button for editing a user's favorite place,
+ * and a button to delete the place.
+ */
+const Place = ({
+  buttonStyle,
+  className,
+  isFixed,
+  largeIcon,
+  onClick,
+  onDelete,
+  path,
+  place,
+  placeDetailClassName,
+  placeTextClassName
+}) => {
+  if (place) {
+    const { address, icon, name, type } = place
+    const to = onClick ? null : path
+    const ariaLabel = to && MESSAGES.EDIT // What should it be if onClick is defined?
+
+    return (
+      <Container className={className}>
+        <LinkContainerWithQuery
+          // Don't highlight component if 'to' is null.
+          activeClassName=''
+          onClick={onClick}
+          to={to}
+        >
+          <PlaceButton
+            aria-label={ariaLabel}
+            bsStyle={buttonStyle}
+            title={ariaLabel}
+          >
+
+            {largeIcon && <PlaceIcon name={icon} size='2x' />}
+            <PlaceContent>
+              <PlaceText className={placeTextClassName}>
+                {!largeIcon && <PlaceIcon name={icon} />}
+                <PlaceName>{name || 'Unnamed place'}</PlaceName>
+              </PlaceText>
+              <PlaceDetail className={placeDetailClassName}>
+                {address || `Set your ${type} address`}
+              </PlaceDetail>
+            </PlaceContent>
+          </PlaceButton>
+        </LinkContainerWithQuery>
+
+        {/* For fixed places, show Delete only if an address has been provided. */}
+        <DeletePlaceholder>
+          {(!isFixed || address) && (
+            <DeleteButton
+              aria-label={MESSAGES.DELETE}
+              bsStyle={buttonStyle}
+              onClick={onDelete}
+              title={MESSAGES.DELETE}
+            >
+              <PlaceIcon name='trash-o' size={largeIcon && '2x'} />
+            </DeleteButton>
+          )}
+        </DeletePlaceholder>
+      </Container>
+    )
+  } else {
+    // If no place is passed, render the Add place button instead.
+    return (
+      <Container className={className}>
+        <LinkContainerWithQuery to={path}>
+          <PlaceButton>
+            <PlaceIcon name='plus' size={largeIcon && '2x'} />
+            <PlaceContent>
+                Add another place
+            </PlaceContent>
+          </PlaceButton>
+        </LinkContainerWithQuery>
+        <DeletePlaceholder />
+      </Container>
+    )
+  }
+}
+
+Place.propTypes = {
+  /** The Bootstrap style to apply to buttons. */
+  buttonStyle: PropTypes.string,
+  /** Whether the place is shown, even if address is blank (e.g. 'Home', 'Work') */
+  isFixed: PropTypes.bool,
+  /** Whether to render icons large. */
+  largeIcon: PropTypes.bool,
+  /** Called when the "main" button is clicked. Takes precedence over the path prop. */
+  onClick: PropTypes.func,
+  /** Called when the Delete button is clicked. */
+  onDelete: PropTypes.func,
+  /** The path to navigate to on click. */
+  path: PropTypes.string.isRequired,
+  /** The place to render. */
+  place: PropTypes.shape({
+    address: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    type: PropTypes.string.isRequired
+  }),
+  /** CSS class name for the place details. */
+  placeDetailClassName: PropTypes.string,
+  /** CSS class name for the place name. */
+  placeTextClassName: PropTypes.string
+}
+
+export default Place

From cfc1700b0aaf50d602cdc5ed8f19c4594968d458 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 12 Feb 2021 19:08:02 -0500
Subject: [PATCH 007/270] refactor(user-settings): Refactor actions for
 different places

---
 lib/components/form/connected-links.js        |  13 +-
 lib/components/form/user-settings.js          | 166 ++++++------------
 .../user/places/favorite-place-row.js         |  10 +-
 .../user/places/main-panel-place.js           |  48 ++---
 lib/components/user/places/place.js           |  61 ++++---
 lib/util/user.js                              |  20 +++
 6 files changed, 150 insertions(+), 168 deletions(-)

diff --git a/lib/components/form/connected-links.js b/lib/components/form/connected-links.js
index d7fd9da77..f37dc7b47 100644
--- a/lib/components/form/connected-links.js
+++ b/lib/components/form/connected-links.js
@@ -17,11 +17,14 @@ import { Link } from 'react-router-dom'
  *          the RoutingComponent's 'to' prop.
  */
 const withQueryParams = RoutingComponent =>
-  ({ children, queryParams, to, ...props }) => (
-    <RoutingComponent {...props} to={{ pathname: to, search: queryParams }}>
-      {children}
-    </RoutingComponent>
-  )
+  ({ children, queryParams, to, ...props }) =>
+    to
+      ? (
+        <RoutingComponent {...props} to={{ pathname: to, search: queryParams }}>
+          {children}
+        </RoutingComponent>
+      )
+      : children
 
 // For connecting to the redux store
 const mapStateToProps = (state, ownProps) => {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 2602f0640..a71e356db 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -9,18 +9,16 @@ import { forgetSearch, toggleTracking } from '../../actions/api'
 import { setQueryParam } from '../../actions/form'
 import { forgetPlace, forgetStop, setLocation } from '../../actions/map'
 import { setViewedStop } from '../../actions/ui'
+import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
-import Icon from '../narrative/icon'
 import { UnpaddedList } from './styled' 
 import MainPanelPlace from '../user/places/main-panel-place'
 import { PLACES_PATH } from '../../util/constants'
-import { convertToLocationFieldLocation, isHomeOrWork } from '../../util/user'
+import { convertToLocationFieldLocation, convertToPlace } from '../../util/user'
 
-const { getDetailText, formatStoredPlaceName, matchLatLon } = coreUtils.map
+const { matchLatLon } = coreUtils.map
 const { summarizeQuery } = coreUtils.query
 
-const BUTTON_WIDTH = 40
-
 class UserSettings extends Component {
   _disableTracking = () => {
     const { user, toggleTracking } = this.props
@@ -74,7 +72,7 @@ class UserSettings extends Component {
           {/* Middleware locations */}
           {loggedInUserLocations.map((place, index) => {
             return (
-              <PlaceRow
+              <SavedPlace
                 {...this.props}
                 key={index}
                 path={`${PLACES_PATH}/${index}`}
@@ -151,36 +149,46 @@ class UserSettings extends Component {
 }
 
 /**
- * Wraps FavoriteLocationRow with actions to set the to/from location.
+ * Sets the from or to location based on the query using the provided action.
+ */
+function setFromOrToLocation (location, setLocation, query) {
+  // If 'to' not set and 'from' does not match location, set as 'to'.
+  if (
+    !query.to && (
+      !query.from || !matchLatLon(location, query.from)
+    )
+  ) {
+    setLocation({ location, locationType: 'to' })
+  } else if (
+    // Vice versa for setting as 'from'.
+    !query.from &&
+      !matchLatLon(location, query.to)
+  ) {
+    setLocation({ location, locationType: 'from' })
+  }
+}
+
+/**
+ * Wraps MainPanelPlace for places saved from loggedInUser.
  */
-class PlaceRow extends Component {
+class SavedPlace extends Component {
+  _handleDelete = () => {
+    const { deleteUserPlace, place } = this.props
+    deleteUserPlace(place)
+  }
+
   _handleClick = () => {
     const { place, query, setLocation } = this.props
-
     const location = convertToLocationFieldLocation(place)
-    //NOTE: this is common with the Place component below.
-    // If 'to' not set and 'from' does not match location, set as 'to'.
-    if (
-      !query.to && (
-        !query.from || !matchLatLon(location, query.from)
-      )
-    ) {
-      setLocation({ location, locationType: 'to' })
-    } else if (
-      // Vice versa for setting as 'from'.
-      !query.from &&
-        !matchLatLon(location, query.to)
-    ) {
-      setLocation({ location, locationType: 'from' })
-    }
+    setFromOrToLocation(location, setLocation, query)
   }
 
   render () {
     const { path, place } = this.props
     return (
       <MainPanelPlace
-        isFixed={isHomeOrWork(place)}
         onClick={place.address ? this._handleClick : null}
+        onDelete={this._handleDelete}
         path={path}
         place={place}
       />
@@ -194,20 +202,7 @@ class Place extends Component {
     if (location.blank) {
       window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${location.type} location.`)
     } else {
-      // If 'to' not set and 'from' does not match location, set as 'to'.
-      if (
-        !query.to && (
-          !query.from || !matchLatLon(location, query.from)
-        )
-      ) {
-        setLocation({ location, locationType: 'to' })
-      } else if (
-        // Vice versa for setting as 'from'.
-        !query.from &&
-          !matchLatLon(location, query.to)
-      ) {
-        setLocation({ location, locationType: 'from' })
-      }
+      setFromOrToLocation(location, setLocation, query)
     }
   }
 
@@ -222,56 +217,15 @@ class Place extends Component {
     else forgetPlace(location.id)
   }
 
-  _isViewable = () => this.props.location.type === 'stop'
-
-  _isForgettable = () =>
-    ['stop', 'home', 'work', 'recent'].indexOf(this.props.location.type) !== -1
-
   render () {
     const { location } = this.props
-    const { blank, icon } = location
-    const showView = this._isViewable()
-    const showForget = this._isForgettable() && !blank
-    // Determine how much to offset width of main button (based on visibility of
-    // other buttons sharing the same line).
-    let offset = 0
-    if (showView) offset += BUTTON_WIDTH
-    if (showForget) offset += BUTTON_WIDTH
     return (
-      <li className='place-item'>
-        <Button
-          bsStyle='link'
-          className='place-button'
-          onClick={this._onSelect}
-          style={{ width: `calc(100% - ${offset}px)` }}
-          title={formatStoredPlaceName(location)}>
-          <span
-            className='place-text'>
-            <Icon type={icon} /> {formatStoredPlaceName(location, false)}
-          </span>
-          <span
-            className='place-detail'>
-            {getDetailText(location)}
-          </span>
-        </Button>
-        {showView &&
-          <Button
-            bsSize='xsmall'
-            bsStyle='link'
-            className='place-view'
-            onClick={this._onView}
-            style={{ width: `${BUTTON_WIDTH}px` }}
-            title='View stop'><Icon type='search' /></Button>
-        }
-        {showForget &&
-          <Button
-            bsSize='xsmall'
-            bsStyle='link'
-            className='place-clear'
-            onClick={this._onForget}
-            style={{ width: `${BUTTON_WIDTH}px` }}>Clear</Button>
-        }
-      </li>
+      <MainPanelPlace
+        onClick={this._onSelect}
+        onDelete={this._onForget}
+        onView={this._onView}
+        place={convertToPlace(location)}
+      />
     )
   }
 }
@@ -289,32 +243,21 @@ class RecentSearch extends Component {
     const { search, user } = this.props
     const { query, timestamp } = search
     const name = summarizeQuery(query, user.locations)
+    const timeInfo = moment(timestamp).fromNow()
+
+    const place = {
+      details: timeInfo,
+      icon: 'clock-o',
+      name,
+      title: `${name} (${timeInfo})`
+    }
+
     return (
-      <li className='place-item'>
-        <Button
-          bsStyle='link'
-          onClick={this._onSelect}
-          style={{
-            overflow: 'hidden',
-            padding: '5px 0 0 0',
-            textAlign: 'left',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            width: `calc(100% - ${BUTTON_WIDTH}px)`
-          }}
-          title={`${name} (${moment(timestamp).fromNow()})`}>
-          <span className='place-text'><Icon type='clock-o' /> {name} </span>
-          <span className='place-detail'>{moment(timestamp).fromNow()}</span>
-        </Button>
-        <Button
-          bsSize='xsmall'
-          bsStyle='link'
-          onClick={this._onForget}
-          style={{ paddingTop: '6px', width: `${BUTTON_WIDTH}px` }}
-        >
-          Clear
-        </Button>
-      </li>
+      <MainPanelPlace
+        onClick={this._onSelect}
+        onDelete={this._onForget}
+        place={place}
+      />
     )
   }
 }
@@ -336,6 +279,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
+  deleteUserPlace: userActions.deleteUserPlace,
   forgetPlace,
   forgetSearch,
   forgetStop,
diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place-row.js
index 8c4b175c3..6cdeae73f 100644
--- a/lib/components/user/places/favorite-place-row.js
+++ b/lib/components/user/places/favorite-place-row.js
@@ -57,10 +57,16 @@ class FavoritePlaceRow extends Component {
   }
 
   render () {
-    const { isFixed, path, place } = this.props
+    const { path, place } = this.props
+    const deleteAction = {
+      icon: 'trash-o',
+      onClick: this._handleDelete,
+      title: 'Delete place'
+    }
+
     return (
       <StyledPlace
-        isFixed={isFixed}
+        actions={[deleteAction]}
         largeIcon
         onDelete={this._handleDelete}
         path={path}
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
index bcf27fd2e..ec431e1ca 100644
--- a/lib/components/user/places/main-panel-place.js
+++ b/lib/components/user/places/main-panel-place.js
@@ -1,15 +1,17 @@
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import * as userActions from '../../../actions/user'
-
-import Place, { DeletePlaceholder, PlaceName } from './place'
+import { isHomeOrWork } from '../../../util/user'
+import Place, { DeletePlaceholder, PlaceDetail, PlaceName } from './place'
 
 const StyledPlace = styled(Place)`
   ${PlaceName} {
     margin-left: 0.25em;
   }
+  ${PlaceDetail} {
+    display: block;
+    height: 100%;
+  }
   ${DeletePlaceholder} {
     width: 40px;
   }
@@ -20,20 +22,30 @@ const StyledPlace = styled(Place)`
  * handles deleting the place.
  */
 class MainPanelPlace extends Component {
-  _handleDelete = () => {
-    const { deleteUserPlace, place } = this.props
-    deleteUserPlace(place)
-  }
-
   render () {
-    const { isFixed, onClick, path, place } = this.props
+    const { onClick, onDelete, onView, path, place } = this.props
+    const deleteAction = {
+      icon: 'trash-o',
+      onClick: onDelete,
+      title: 'Delete place'
+    }
+    const viewAction = {
+      icon: 'search',
+      onClick: onView,
+      title: 'View stop'
+    }
+
+    const actions = []
+    const isFixed = isHomeOrWork(place)
+    if (place.type === 'stop') actions.push(viewAction)
+    if (!isFixed || place.address) actions.push(deleteAction)
+
     return (
       <StyledPlace
+        actions={actions}
         buttonStyle='link'
         className='place-item'
-        isFixed={isFixed}
         onClick={onClick}
-        onDelete={this._handleDelete}
         path={path}
         place={place}
         placeDetailClassName='place-detail'
@@ -43,14 +55,4 @@ class MainPanelPlace extends Component {
   }
 }
 
-// connect to redux store
-
-const mapStateToProps = (state, ownProps) => {
-  return {}
-}
-
-const mapDispatchToProps = {
-  deleteUserPlace: userActions.deleteUserPlace
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(MainPanelPlace)
+export default MainPanelPlace
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 678072912..8e7b6271d 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -28,7 +28,7 @@ export const PlaceName = styled.span``
 
 export const PlaceText = styled.span``
 
-const DeleteButton = styled(Button)`
+const ActionButton = styled(Button)`
   background: none;
   height: 100%;
   width: 100%;
@@ -46,33 +46,33 @@ const MESSAGES = {
  * and a button to delete the place.
  */
 const Place = ({
+  actions,
   buttonStyle,
   className,
-  isFixed,
   largeIcon,
   onClick,
-  onDelete,
   path,
   place,
   placeDetailClassName,
   placeTextClassName
 }) => {
+  const to = onClick ? null : path
   if (place) {
-    const { address, icon, name, type } = place
-    const to = onClick ? null : path
-    const ariaLabel = to && MESSAGES.EDIT // What should it be if onClick is defined?
+    const { address, details, icon, name, title, type } = place
+    const ariaLabel = title || (to && MESSAGES.EDIT) 
+    //What should it be if onClick is defined?
 
     return (
       <Container className={className}>
         <LinkContainerWithQuery
           // Don't highlight component if 'to' is null.
           activeClassName=''
-          onClick={onClick}
           to={to}
         >
           <PlaceButton
             aria-label={ariaLabel}
             bsStyle={buttonStyle}
+            onClick={onClick}
             title={ariaLabel}
           >
 
@@ -80,36 +80,39 @@ const Place = ({
             <PlaceContent>
               <PlaceText className={placeTextClassName}>
                 {!largeIcon && <PlaceIcon name={icon} />}
-                <PlaceName>{name || 'Unnamed place'}</PlaceName>
+                <PlaceName>{name || address}</PlaceName>
               </PlaceText>
+              
               <PlaceDetail className={placeDetailClassName}>
-                {address || `Set your ${type} address`}
+                {name && (details || address || `Set your ${type} address`)}
               </PlaceDetail>
+              
             </PlaceContent>
           </PlaceButton>
         </LinkContainerWithQuery>
 
-        {/* For fixed places, show Delete only if an address has been provided. */}
-        <DeletePlaceholder>
-          {(!isFixed || address) && (
-            <DeleteButton
-              aria-label={MESSAGES.DELETE}
+        {/* Action buttons */}
+        {actions && actions.map(({ icon: actionIcon, onClick: onAction, title }, index) => (
+          <DeletePlaceholder key={index}>
+            <ActionButton
+              aria-label={title}
               bsStyle={buttonStyle}
-              onClick={onDelete}
-              title={MESSAGES.DELETE}
+              onClick={onAction}
+              title={title}
             >
-              <PlaceIcon name='trash-o' size={largeIcon && '2x'} />
-            </DeleteButton>
-          )}
-        </DeletePlaceholder>
+              <PlaceIcon name={actionIcon} size={largeIcon && '2x'} />
+            </ActionButton>
+          </DeletePlaceholder>
+        ))}
+
       </Container>
     )
   } else {
     // If no place is passed, render the Add place button instead.
     return (
       <Container className={className}>
-        <LinkContainerWithQuery to={path}>
-          <PlaceButton>
+        <LinkContainerWithQuery to={to}>
+          <PlaceButton onClick={onClick}>
             <PlaceIcon name='plus' size={largeIcon && '2x'} />
             <PlaceContent>
                 Add another place
@@ -123,23 +126,27 @@ const Place = ({
 }
 
 Place.propTypes = {
+  /** The action buttons for the place. */
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.string,
+    onClick: PropTypes.func,
+    title: PropTypes.string
+  })),
   /** The Bootstrap style to apply to buttons. */
   buttonStyle: PropTypes.string,
-  /** Whether the place is shown, even if address is blank (e.g. 'Home', 'Work') */
-  isFixed: PropTypes.bool,
   /** Whether to render icons large. */
   largeIcon: PropTypes.bool,
   /** Called when the "main" button is clicked. Takes precedence over the path prop. */
   onClick: PropTypes.func,
-  /** Called when the Delete button is clicked. */
-  onDelete: PropTypes.func,
   /** The path to navigate to on click. */
-  path: PropTypes.string.isRequired,
+  path: PropTypes.string,
   /** The place to render. */
   place: PropTypes.shape({
     address: PropTypes.string,
+    details: PropTypes.string,
     icon: PropTypes.string.isRequired,
     name: PropTypes.string,
+    title: PropTypes.string,
     type: PropTypes.string.isRequired
   }),
   /** CSS class name for the place details. */
diff --git a/lib/util/user.js b/lib/util/user.js
index cb3589d84..25e1c2814 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -1,3 +1,7 @@
+import coreUtils from '@opentripplanner/core-utils'
+
+const { getDetailText, formatStoredPlaceName } = coreUtils.map
+
 /**
  * Determines whether a loggedInUser is a new user
  * that needs to complete the new account wizard.
@@ -93,3 +97,19 @@ export function convertToLocationFieldLocation (place) {
     name: place.address
   }
 }
+
+/**
+ * Convert a LocationField entry to a persisted user savedLocations:
+ * - The icon for "Work" places is changed to 'briefcase',
+ * - The address attribute is filled with the 'name' if available.
+ */
+export function convertToPlace (location) {
+  return {
+    ...location,
+    address: location.name,
+    details: getDetailText(location),
+    icon: isWork(location) ? 'briefcase' : location.icon,
+    name: formatStoredPlaceName(location, false),
+    title: formatStoredPlaceName(location)
+  }
+}

From bf793ab8f73907e2262e53ad5fe28a30b8740306 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 12 Feb 2021 21:12:06 -0500
Subject: [PATCH 008/270] refactor(mastarm commit): user/place

Refactor actions. Rename files.
---
 lib/components/form/user-settings.js          |  30 +--
 .../user/existing-account-display.js          |   4 +-
 lib/components/user/new-account-wizard.js     |   4 +-
 ...-places-list.js => favorite-place-list.js} |  12 +-
 ...avorite-place-row.js => favorite-place.js} |  28 ++-
 .../user/places/main-panel-place.js           |  34 ++--
 lib/components/user/places/place.js           | 174 +++++++++++-------
 7 files changed, 160 insertions(+), 126 deletions(-)
 rename lib/components/user/places/{favorite-places-list.js => favorite-place-list.js} (73%)
 rename lib/components/user/places/{favorite-place-row.js => favorite-place.js} (77%)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index a71e356db..4d3ad4371 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -5,16 +5,16 @@ import React, { Component } from 'react'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
-import { forgetSearch, toggleTracking } from '../../actions/api'
-import { setQueryParam } from '../../actions/form'
-import { forgetPlace, forgetStop, setLocation } from '../../actions/map'
-import { setViewedStop } from '../../actions/ui'
+import * as apiActions from '../../actions/api'
+import * as formActions from '../../actions/form'
+import * as mapActions from '../../actions/map'
+import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
-import { UnpaddedList } from './styled' 
 import MainPanelPlace from '../user/places/main-panel-place'
 import { PLACES_PATH } from '../../util/constants'
 import { convertToLocationFieldLocation, convertToPlace } from '../../util/user'
+import { UnpaddedList } from './styled'
 
 const { matchLatLon } = coreUtils.map
 const { summarizeQuery } = coreUtils.query
@@ -196,6 +196,9 @@ class SavedPlace extends Component {
   }
 }
 
+/**
+ * Wraps MainPanelPlace for places from localStorage (recents, favorite stops...).
+ */
 class Place extends Component {
   _onSelect = () => {
     const { location, query, setLocation } = this.props
@@ -230,6 +233,9 @@ class Place extends Component {
   }
 }
 
+/**
+ * Wraps MainPanelPlace for recent trip requests.
+ */
 class RecentSearch extends Component {
   _onSelect = () => {
     const { search, setQueryParam } = this.props
@@ -280,13 +286,13 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = {
   deleteUserPlace: userActions.deleteUserPlace,
-  forgetPlace,
-  forgetSearch,
-  forgetStop,
-  setLocation,
-  setQueryParam,
-  setViewedStop,
-  toggleTracking
+  forgetPlace: mapActions.forgetPlace,
+  forgetSearch: apiActions.forgetSearch,
+  forgetStop: mapActions.forgetStop,
+  setLocation: mapActions.setLocation,
+  setQueryParam: formActions.setQueryParam,
+  setViewedStop: uiActions.setViewedStop,
+  toggleTracking: apiActions.toggleTracking
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(UserSettings)
diff --git a/lib/components/user/existing-account-display.js b/lib/components/user/existing-account-display.js
index 8ee8b2107..082163697 100644
--- a/lib/components/user/existing-account-display.js
+++ b/lib/components/user/existing-account-display.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import NotificationPrefsPane from './notification-prefs-pane'
-import FavoritePlacesList from './places/favorite-places-list'
+import FavoritePlaceList from './places/favorite-place-list'
 import StackedPaneDisplay from './stacked-pane-display'
 import TermsOfUsePane from './terms-of-use-pane'
 
@@ -16,7 +16,7 @@ const ExistingAccountDisplay = props => {
   const { onCancel } = props
   const paneSequence = [
     {
-      pane: FavoritePlacesList,
+      pane: FavoritePlaceList,
       props,
       title: 'My locations'
     },
diff --git a/lib/components/user/new-account-wizard.js b/lib/components/user/new-account-wizard.js
index 2ff4553c8..fa91ed659 100644
--- a/lib/components/user/new-account-wizard.js
+++ b/lib/components/user/new-account-wizard.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 
 import AccountSetupFinishPane from './account-setup-finish-pane'
 import NotificationPrefsPane from './notification-prefs-pane'
-import FavoritePlacesList from './places/favorite-places-list'
+import FavoritePlaceList from './places/favorite-place-list'
 import SequentialPaneDisplay from './sequential-pane-display'
 import TermsOfUsePane from './terms-of-use-pane'
 import VerifyEmailPane from './verify-email-pane'
@@ -62,7 +62,7 @@ class NewAccountWizard extends Component {
       },
       places: {
         nextId: 'finish',
-        pane: FavoritePlacesList,
+        pane: FavoritePlaceList,
         prevId: 'notifications',
         props,
         title: 'Add your locations'
diff --git a/lib/components/user/places/favorite-places-list.js b/lib/components/user/places/favorite-place-list.js
similarity index 73%
rename from lib/components/user/places/favorite-places-list.js
rename to lib/components/user/places/favorite-place-list.js
index 8c3de2302..3efc216a1 100644
--- a/lib/components/user/places/favorite-places-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -4,22 +4,20 @@ import { connect } from 'react-redux'
 
 import { UnpaddedList } from '../../form/styled'
 import { PLACES_PATH } from '../../../util/constants'
-import { isHomeOrWork } from '../../../util/user'
-import FavoritePlaceRow from './favorite-place-row'
+import FavoritePlace from './favorite-place'
 
 /**
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
  */
-const FavoritePlacesList = ({ loggedInUser }) => {
+const FavoritePlaceList = ({ loggedInUser }) => {
   const { savedLocations } = loggedInUser
   return (
     <div>
       <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
       <UnpaddedList>
         {savedLocations.map((place, index) => (
-          <FavoritePlaceRow
-            isFixed={isHomeOrWork(place)}
+          <FavoritePlace
             key={index}
             path={`${PLACES_PATH}/${index}`}
             place={place}
@@ -28,7 +26,7 @@ const FavoritePlacesList = ({ loggedInUser }) => {
         )}
 
         {/* For adding a new place. */}
-        <FavoritePlaceRow path={`${PLACES_PATH}/new`} />
+        <FavoritePlace path={`${PLACES_PATH}/new`} />
       </UnpaddedList>
     </div>
   )
@@ -42,4 +40,4 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-export default connect(mapStateToProps)(FavoritePlacesList)
+export default connect(mapStateToProps)(FavoritePlaceList)
diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place.js
similarity index 77%
rename from lib/components/user/places/favorite-place-row.js
rename to lib/components/user/places/favorite-place.js
index 6cdeae73f..57c104c42 100644
--- a/lib/components/user/places/favorite-place-row.js
+++ b/lib/components/user/places/favorite-place.js
@@ -3,13 +3,14 @@ import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import * as userActions from '../../../actions/user'
-
 import Place, {
-  DeletePlaceholder,
+  ActionButtonContainer,
+  EDIT_LABEL,
+  getActionsForPlace,
   PlaceButton,
   PlaceContent,
   PlaceDetail,
-  PlaceIcon
+  Icon
 } from './place'
 
 const FIELD_HEIGHT_PX = '60px'
@@ -36,21 +37,21 @@ const StyledPlace = styled(Place)`
     color: #888;
     display: block;
   }
-  ${PlaceIcon} {
+  ${Icon} {
     color: #888;
     flex-shrink: 0;
   }
-  ${DeletePlaceholder} {
+  ${ActionButtonContainer} {
     margin-left: 4px;
     width: ${FIELD_HEIGHT_PX};
   }
 `
 
 /**
- * Wrapper for the Place component in FavoritePlacesList that
+ * Wrapper for the Place component in FavoritePlaceList that
  * handles deleting the place.
  */
-class FavoritePlaceRow extends Component {
+class FavoritePlace extends Component {
   _handleDelete = () => {
     const { deleteUserPlace, place } = this.props
     deleteUserPlace(place)
@@ -58,19 +59,16 @@ class FavoritePlaceRow extends Component {
 
   render () {
     const { path, place } = this.props
-    const deleteAction = {
-      icon: 'trash-o',
-      onClick: this._handleDelete,
-      title: 'Delete place'
-    }
+    const label = place && EDIT_LABEL
 
     return (
       <StyledPlace
-        actions={[deleteAction]}
+        actions={getActionsForPlace(place, this._handleDelete)}
+        ariaLabel={label}
         largeIcon
-        onDelete={this._handleDelete}
         path={path}
         place={place}
+        title={label}
       />
     )
   }
@@ -86,4 +84,4 @@ const mapDispatchToProps = {
   deleteUserPlace: userActions.deleteUserPlace
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlaceRow)
+export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlace)
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
index ec431e1ca..905e18279 100644
--- a/lib/components/user/places/main-panel-place.js
+++ b/lib/components/user/places/main-panel-place.js
@@ -1,8 +1,13 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
-import { isHomeOrWork } from '../../../util/user'
-import Place, { DeletePlaceholder, PlaceDetail, PlaceName } from './place'
+import Place, {
+  ActionButtonContainer,
+  EDIT_LABEL,
+  getActionsForPlace,
+  PlaceDetail,
+  PlaceName
+} from './place'
 
 const StyledPlace = styled(Place)`
   ${PlaceName} {
@@ -12,7 +17,7 @@ const StyledPlace = styled(Place)`
     display: block;
     height: 100%;
   }
-  ${DeletePlaceholder} {
+  ${ActionButtonContainer} {
     width: 40px;
   }
 `
@@ -24,25 +29,17 @@ const StyledPlace = styled(Place)`
 class MainPanelPlace extends Component {
   render () {
     const { onClick, onDelete, onView, path, place } = this.props
-    const deleteAction = {
-      icon: 'trash-o',
-      onClick: onDelete,
-      title: 'Delete place'
-    }
-    const viewAction = {
-      icon: 'search',
-      onClick: onView,
-      title: 'View stop'
-    }
 
-    const actions = []
-    const isFixed = isHomeOrWork(place)
-    if (place.type === 'stop') actions.push(viewAction)
-    if (!isFixed || place.address) actions.push(deleteAction)
+    // Determine title and aria label.
+    const isPlanAction = !!onClick
+    const planLabel = 'Plan an itinerary using this place'
+    const label = isPlanAction ? planLabel : EDIT_LABEL
+    const title = isPlanAction ? `${place.title || place.address}\n${planLabel}` : EDIT_LABEL
 
     return (
       <StyledPlace
-        actions={actions}
+        actions={getActionsForPlace(place, onDelete, onView)}
+        ariaLabel={label}
         buttonStyle='link'
         className='place-item'
         onClick={onClick}
@@ -50,6 +47,7 @@ class MainPanelPlace extends Component {
         place={place}
         placeDetailClassName='place-detail'
         placeTextClassName='place-text'
+        title={title}
       />
     )
   }
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 8e7b6271d..249974c74 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -4,7 +4,8 @@ import { Button } from 'react-bootstrap'
 import styled from 'styled-components'
 
 import { LinkContainerWithQuery } from '../../form/connected-links'
-import Icon from '../../narrative/icon'
+import NarrativeIcon from '../../narrative/icon'
+import { isHomeOrWork } from '../../../util/user'
 
 const Container = styled.li`
   align-items: stretch;
@@ -18,7 +19,7 @@ export const PlaceButton = styled(Button)`
   text-overflow: ellipsis;
 `
 
-export const PlaceIcon = styled(Icon)``
+export const Icon = styled(NarrativeIcon)``
 
 export const PlaceDetail = styled.span``
 
@@ -34,19 +35,49 @@ const ActionButton = styled(Button)`
   width: 100%;
 `
 
-export const DeletePlaceholder = styled.span``
+export const ActionButtonContainer = styled.span``
 
-const MESSAGES = {
-  DELETE: 'Delete this place',
-  EDIT: 'Edit this place'
+export const EDIT_LABEL = 'Edit this place'
+
+/**
+ * Obtains the actions (e.g. delete, view) for the given place and handlers:
+ * - All places can be deleted, except Home and Work with empty addresses.
+ * - Only 'stop' locations can be 'viewed'.
+ */
+export function getActionsForPlace (place, onDelete, onView) {
+  if (!place) return []
+
+  const deleteAction = {
+    icon: 'trash-o',
+    onClick: onDelete,
+    title: 'Delete place'
+  }
+  const viewAction = {
+    icon: 'search',
+    onClick: onView,
+    title: 'View stop'
+  }
+
+  const actions = []
+
+  const isFixed = isHomeOrWork(place)
+  if (onView && place.type === 'stop') {
+    actions.push(viewAction)
+  }
+  if (onDelete && (!isFixed || place.address)) {
+    actions.push(deleteAction)
+  }
+
+  return actions
 }
 
 /**
  * Renders a clickable button for editing a user's favorite place,
- * and a button to delete the place.
+ * and buttons for the provided actions (e.g. view, delete).
  */
 const Place = ({
   actions,
+  ariaLabel,
   buttonStyle,
   className,
   largeIcon,
@@ -54,75 +85,74 @@ const Place = ({
   path,
   place,
   placeDetailClassName,
-  placeTextClassName
+  placeTextClassName,
+  title
 }) => {
   const to = onClick ? null : path
+  const iconSize = largeIcon && '2x'
+  let placeButton
   if (place) {
-    const { address, details, icon, name, title, type } = place
-    const ariaLabel = title || (to && MESSAGES.EDIT) 
-    //What should it be if onClick is defined?
-
-    return (
-      <Container className={className}>
-        <LinkContainerWithQuery
-          // Don't highlight component if 'to' is null.
-          activeClassName=''
-          to={to}
-        >
-          <PlaceButton
-            aria-label={ariaLabel}
-            bsStyle={buttonStyle}
-            onClick={onClick}
-            title={ariaLabel}
-          >
-
-            {largeIcon && <PlaceIcon name={icon} size='2x' />}
-            <PlaceContent>
-              <PlaceText className={placeTextClassName}>
-                {!largeIcon && <PlaceIcon name={icon} />}
-                <PlaceName>{name || address}</PlaceName>
-              </PlaceText>
-              
-              <PlaceDetail className={placeDetailClassName}>
-                {name && (details || address || `Set your ${type} address`)}
-              </PlaceDetail>
-              
-            </PlaceContent>
-          </PlaceButton>
-        </LinkContainerWithQuery>
-
-        {/* Action buttons */}
-        {actions && actions.map(({ icon: actionIcon, onClick: onAction, title }, index) => (
-          <DeletePlaceholder key={index}>
+    const { address, details, icon, name, type } = place
+    placeButton = (
+      <PlaceButton
+        aria-label={ariaLabel}
+        bsStyle={buttonStyle}
+        onClick={onClick}
+        title={title}
+      >
+
+        {largeIcon && <Icon name={icon} size='2x' />}
+        <PlaceContent>
+          <PlaceText className={placeTextClassName}>
+            {!largeIcon && <Icon name={icon} />}
+            <PlaceName>{name || address}</PlaceName>
+          </PlaceText>
+
+          <PlaceDetail className={placeDetailClassName}>
+            {name && (details || address || `Set your ${type} address`)}
+          </PlaceDetail>
+        </PlaceContent>
+      </PlaceButton>
+    )
+  } else {
+    placeButton = (
+      <PlaceButton onClick={onClick}>
+        <Icon name='plus' size={iconSize} />
+        <PlaceContent>
+          Add another place
+        </PlaceContent>
+      </PlaceButton>
+    )
+  }
+
+  return (
+    <Container className={className}>
+      <LinkContainerWithQuery
+        // Don't highlight component if 'to' is null.
+        activeClassName=''
+        to={to}
+      >
+        {placeButton}
+      </LinkContainerWithQuery>
+
+      {/* Action buttons. If none, render a placeholder. */}
+      {actions && actions.length
+        ? actions.map(({ icon: actionIcon, onClick: onAction, title: actionTitle }, index) => (
+          <ActionButtonContainer key={index}>
             <ActionButton
-              aria-label={title}
+              aria-label={actionTitle}
               bsStyle={buttonStyle}
               onClick={onAction}
-              title={title}
+              title={actionTitle}
             >
-              <PlaceIcon name={actionIcon} size={largeIcon && '2x'} />
+              <Icon name={actionIcon} size={iconSize} />
             </ActionButton>
-          </DeletePlaceholder>
-        ))}
-
-      </Container>
-    )
-  } else {
-    // If no place is passed, render the Add place button instead.
-    return (
-      <Container className={className}>
-        <LinkContainerWithQuery to={to}>
-          <PlaceButton onClick={onClick}>
-            <PlaceIcon name='plus' size={largeIcon && '2x'} />
-            <PlaceContent>
-                Add another place
-            </PlaceContent>
-          </PlaceButton>
-        </LinkContainerWithQuery>
-        <DeletePlaceholder />
-      </Container>
-    )
-  }
+          </ActionButtonContainer>
+        ))
+        : <ActionButtonContainer />
+      }
+    </Container>
+  )
 }
 
 Place.propTypes = {
@@ -132,6 +162,8 @@ Place.propTypes = {
     onClick: PropTypes.func,
     title: PropTypes.string
   })),
+  /** The aria-label for the main button */
+  ariaLabel: PropTypes.string,
   /** The Bootstrap style to apply to buttons. */
   buttonStyle: PropTypes.string,
   /** Whether to render icons large. */
@@ -147,12 +179,14 @@ Place.propTypes = {
     icon: PropTypes.string.isRequired,
     name: PropTypes.string,
     title: PropTypes.string,
-    type: PropTypes.string.isRequired
+    type: PropTypes.string
   }),
   /** CSS class name for the place details. */
   placeDetailClassName: PropTypes.string,
   /** CSS class name for the place name. */
-  placeTextClassName: PropTypes.string
+  placeTextClassName: PropTypes.string,
+  /** The title for the main button */
+  title: PropTypes.string
 }
 
 export default Place

From 71f1ad8e6626b7af1e8a8de9bd8ac6949953c454 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 12 Feb 2021 21:15:14 -0500
Subject: [PATCH 009/270] refactor(MainPanelPlace): Convert to func component

---
 .../user/places/main-panel-place.js           | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
index 905e18279..fc94a87ea 100644
--- a/lib/components/user/places/main-panel-place.js
+++ b/lib/components/user/places/main-panel-place.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 
 import Place, {
@@ -26,31 +26,33 @@ const StyledPlace = styled(Place)`
  * Wrapper for the Place component in the main panel that
  * handles deleting the place.
  */
-class MainPanelPlace extends Component {
-  render () {
-    const { onClick, onDelete, onView, path, place } = this.props
+const MainPanelPlace = ({
+  onClick,
+  onDelete,
+  onView,
+  path,
+  place
+}) => {
+  // Determine title and aria label.
+  const isPlanAction = !!onClick
+  const planLabel = 'Plan an itinerary using this place'
+  const label = isPlanAction ? planLabel : EDIT_LABEL
+  const title = isPlanAction ? `${place.title || place.address}\n${planLabel}` : EDIT_LABEL
 
-    // Determine title and aria label.
-    const isPlanAction = !!onClick
-    const planLabel = 'Plan an itinerary using this place'
-    const label = isPlanAction ? planLabel : EDIT_LABEL
-    const title = isPlanAction ? `${place.title || place.address}\n${planLabel}` : EDIT_LABEL
-
-    return (
-      <StyledPlace
-        actions={getActionsForPlace(place, onDelete, onView)}
-        ariaLabel={label}
-        buttonStyle='link'
-        className='place-item'
-        onClick={onClick}
-        path={path}
-        place={place}
-        placeDetailClassName='place-detail'
-        placeTextClassName='place-text'
-        title={title}
-      />
-    )
-  }
+  return (
+    <StyledPlace
+      actions={getActionsForPlace(place, onDelete, onView)}
+      ariaLabel={label}
+      buttonStyle='link'
+      className='place-item'
+      onClick={onClick}
+      path={path}
+      place={place}
+      placeDetailClassName='place-detail'
+      placeTextClassName='place-text'
+      title={title}
+    />
+  )
 }
 
 export default MainPanelPlace

From 2bdb282f6df674a210b45a5ceb4db9b7dd86130a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 17 Feb 2021 17:23:04 -0500
Subject: [PATCH 010/270] feat(UserSettings): Display loggedInUser's recent
 trip requests.

---
 lib/actions/user.js                  |  30 ++-
 lib/components/form/user-settings.js | 294 +++++++++++++++++----------
 lib/reducers/create-user-reducer.js  |   7 +
 3 files changed, 217 insertions(+), 114 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 8ebd6d3d0..9abb1597d 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -15,12 +15,14 @@ import { isNewUser, positionHomeAndWorkFirst } from '../util/user'
 
 // Middleware API paths.
 const API_MONITORED_TRIP_PATH = '/api/secure/monitoredtrip'
+const API_TRIP_HISTORY_PATH = '/api/secure/triprequests'
 const API_OTPUSER_PATH = '/api/secure/user'
 const API_OTPUSER_VERIFY_SMS_SUBPATH = '/verify_sms'
 
 const setAccessToken = createAction('SET_ACCESS_TOKEN')
 const setCurrentUser = createAction('SET_CURRENT_USER')
 const setCurrentUserMonitoredTrips = createAction('SET_CURRENT_USER_MONITORED_TRIPS')
+const setCurrentUserTripRequests = createAction('SET_CURRENT_USER_TRIP_REQUESTS')
 const setLastPhoneSmsRequest = createAction('SET_LAST_PHONE_SMS_REQUEST')
 export const setPathBeforeSignIn = createAction('SET_PATH_BEFORE_SIGNIN')
 export const clearItineraryExistence = createAction('CLEAR_ITINERARY_EXISTENCE')
@@ -95,6 +97,7 @@ function setUser (user, fetchTrips) {
 
     if (fetchTrips) {
       dispatch(fetchMonitoredTrips())
+      dispatch(fetchTripRequests())
     }
   }
 }
@@ -207,9 +210,30 @@ export function resendVerificationEmail () {
 }
 
 /**
- * Fetches the saved/monitored trips for a user.
- * We use the accessToken to fetch the data regardless of
- * whether the process to populate state.user is completed or not.
+ * Fetches the most recent (default 10) trip history for a user.
+ */
+export function fetchTripRequests () {
+  return async function (dispatch, getState) {
+    const { accessToken, apiBaseUrl, apiKey, loggedInUser } = getMiddlewareVariables(getState())
+    const requestUrl = `${apiBaseUrl}${API_TRIP_HISTORY_PATH}?userId=${loggedInUser.id}`
+
+    const { data: requests, status: emptyStatus } = await secureFetch(`${requestUrl}&limit=0`, accessToken, apiKey, 'GET')
+    const DEFAULT_LIMIT = 10
+
+    //Is .then() better?
+    //Also figure out whether to convert trip requests into search objects here.
+    //Also figure out a way to deal with batch ids and remove requests of the same batch.
+    if (emptyStatus === 'success') {
+      const { data: trips, status } = await secureFetch(`${requestUrl}&offset=${requests.total - DEFAULT_LIMIT}`, accessToken, apiKey, 'GET')
+      if (status === 'success') {
+        dispatch(setCurrentUserTripRequests(trips.data))
+      }
+    }
+  }
+}
+
+/**
+ * Fetches the most saved/monitored trips for a user.
  */
 export function fetchMonitoredTrips () {
   return async function (dispatch, getState) {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 4d3ad4371..6887c9538 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -1,6 +1,7 @@
-import clone from 'clone'
+/* eslint-disable complexity */
 import moment from 'moment'
 import coreUtils from '@opentripplanner/core-utils'
+import qs from 'qs'
 import React, { Component } from 'react'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
@@ -17,7 +18,7 @@ import { convertToLocationFieldLocation, convertToPlace } from '../../util/user'
 import { UnpaddedList } from './styled'
 
 const { matchLatLon } = coreUtils.map
-const { summarizeQuery } = coreUtils.query
+const { planParamsToQuery, summarizeQuery } = coreUtils.query
 
 class UserSettings extends Component {
   _disableTracking = () => {
@@ -35,116 +36,182 @@ class UserSettings extends Component {
 
   _enableTracking = () => !this.props.user.trackRecent && this.props.toggleTracking(true)
 
-  _getLocations = () => {
-      //see notes regarding persistence strategy
-      //refactor obtaining the locations.
-    const { loggedInUser, user } = this.props
-    return clone(user.locations)
-    // const savedLocations = loggedInUser ? clone(loggedInUser.savedLocations) : []
-    // Identify saved locations for non-'forgettability' purposes.
-    // savedLocations.forEach(l => { l.origin = 'loggedInUser' })
-
-    // return [...savedLocations, ...locations]
+  _getLocations = user => {
+    const locations = [...user.locations]
+    if (!locations.find(l => l.type === 'work')) {
+      locations.push({
+        blank: true,
+        icon: 'briefcase',
+        id: 'work',
+        name: 'click to add',
+        type: 'work'
+      })
+    }
+    if (!locations.find(l => l.type === 'home')) {
+      locations.push({
+        blank: true,
+        icon: 'home',
+        id: 'home',
+        name: 'click to add',
+        type: 'home'
+      })
+    }
+    return locations
   }
 
   render () {
-    const { loggedInUser, storageDisclaimer, user } = this.props
-    const { favoriteStops, trackRecent, recentPlaces, recentSearches } = user
-    // Clone locations in order to prevent blank locations from seeping into the
-    // app state/store.
-    const locations = this._getLocations()
-    const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
-    // Insert additional location types before 'custom' if needed.
-    const order = ['home', 'work', 'suggested', 'stop', 'recent']
-    const sortedLocations = locations
-      .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
+    const { config, loggedInUser, loggedInUserTripRequests, persistenceStrategy, storageDisclaimer, user } = this.props
+    console.log(loggedInUserTripRequests)
 
-    return (
-      <div className='user-settings'>
-        <div className='section-header'>
-          My saved places (
-          <LinkWithQuery to='/account/settings'>
-            manage
-          </LinkWithQuery>
-          )
-        </div>
-        <UnpaddedList>
-          {/* Middleware locations */}
-          {loggedInUserLocations.map((place, index) => {
-            return (
-              <SavedPlace
-                {...this.props}
-                key={index}
-                path={`${PLACES_PATH}/${index}`}
-                place={place}
-              />
-            )
+    if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
+      const { trackRecent, recentSearches } = user//remove this
+      const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
+      return (
+        <div className='user-settings'>
+          <div className='section-header'>
+              My saved places (
+            <LinkWithQuery to='/account/settings'>
+                manage
+            </LinkWithQuery>
+              )
+          </div>
+          <UnpaddedList>
+            {loggedInUserLocations.map((place, index) => {
+              return (
+                <SavedPlace
+                  {...this.props}
+                  key={index}
+                  path={`${PLACES_PATH}/${index}`}
+                  place={place}
+                />
+              )
+            }
+            )}
+          </UnpaddedList>
+
+          {/* Show the triprequests if middleware is enabled strategy and user has opted in. */}
+          <hr />
+          {loggedInUser.storeTripHistory && loggedInUserTripRequests && loggedInUserTripRequests.length > 0 &&
+            <div className='recent-searches-container'>
+              <hr />
+              <div className='section-header'>Recent searches</div>
+              <UnpaddedList>
+                {loggedInUserTripRequests
+                  .map(tripReq => ({
+                    id: tripReq.id,
+                    query: planParamsToQuery(qs.parse(tripReq.queryParams)),
+                    timestamp: tripReq.dateCreated,
+                    url: `${config.api.host}${config.api.path}/plan?${tripReq.queryParams}`
+                  }))
+                  .sort((a, b) => b.timestamp - a.timestamp)
+                  .map(search => {
+                    return <RecentSearch key={search.id} search={search} {...this.props} />
+                  })
+                }
+              </UnpaddedList>
+            </div>
           }
-          )}
-          {sortedLocations.map((location, index) => {
-            return <Place key={location.id} location={location} {...this.props} />
-          })}
-        </UnpaddedList>
-        <hr />
-        <div className='section-header'>Favorite stops</div>
-        <UnpaddedList>
-          {favoriteStops.length > 0
-            ? favoriteStops.map(location => {
-              return <Place key={location.id} location={location} {...this.props} />
-            })
-            : <small>No favorite stops </small>
+          {trackRecent && recentSearches.length > 0 &&
+            <div className='recent-searches-container'>
+              <hr />
+              <div className='section-header'>Recent searches</div>
+              <UnpaddedList>
+                {recentSearches
+                  .sort((a, b) => b.timestamp - a.timestamp)
+                  .map(search => {
+                    console.log(search)
+                    return <RecentSearch key={search.id} search={search} {...this.props} />
+                  })
+                }
+              </UnpaddedList>
+            </div>
           }
-        </UnpaddedList>
-        {trackRecent && recentPlaces.length > 0 &&
-          <div className='recent-places-container'>
-            <hr />
-            <div className='section-header'>Recent places</div>
-            <UnpaddedList>
-              {recentPlaces.map(location => {
-                return <Place key={location.id} location={location} {...this.props} />
-              })}
-            </UnpaddedList>
-          </div>
-        }
-        {trackRecent && recentSearches.length > 0 &&
-          <div className='recent-searches-container'>
-            <hr />
-            <div className='section-header'>Recent searches</div>
-            <UnpaddedList>
-              {recentSearches
-                .sort((a, b) => b.timestamp - a.timestamp)
-                .map(search => {
-                  return <RecentSearch key={search.id} search={search} {...this.props} />
-                })
-              }
-            </UnpaddedList>
-          </div>
-        }
-        <hr />
-        <div className='remember-settings'>
-          <div className='section-header'>My preferences</div>
-          <small>Remember recent searches/places?</small>
-          <Button
-            bsSize='xsmall'
-            bsStyle='link'
-            className={trackRecent ? 'active' : ''}
-            onClick={this._enableTracking}>Yes</Button>
-          <Button
-            bsSize='xsmall'
-            bsStyle='link'
-            className={!trackRecent ? 'active' : ''}
-            onClick={this._disableTracking}>No</Button>
         </div>
-        {storageDisclaimer &&
-          <div>
-            <hr />
-            <div className='disclaimer'>
-              {storageDisclaimer}
+      )
+    } else if (persistenceStrategy === 'localStorage') {
+      const { favoriteStops, trackRecent, recentPlaces, recentSearches } = user
+      // Clone locations in order to prevent blank locations from seeping into the
+      // app state/store.
+      const locations = this._getLocations(user)
+      // Insert additional location types before 'custom' if needed.
+      const order = ['home', 'work', 'suggested', 'stop', 'recent']
+      const sortedLocations = locations
+        .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
+      return (
+        <div className='user-settings'>
+          <div className='section-header'>
+              My saved places
+          </div>
+          <UnpaddedList>
+            {sortedLocations.map((location, index) => {
+              return <Place key={location.id} location={location} {...this.props} />
+            })}
+          </UnpaddedList>
+          <hr />
+
+          <div className='section-header'>Favorite stops</div>
+          <UnpaddedList>
+            {favoriteStops.length > 0
+              ? favoriteStops.map(location => {
+                return <Place key={location.id} location={location} {...this.props} />
+              })
+              : <small>No favorite stops </small>
+            }
+          </UnpaddedList>
+
+          {trackRecent && recentPlaces.length > 0 &&
+            <div className='recent-places-container'>
+              <hr />
+              <div className='section-header'>Recent places</div>
+              <UnpaddedList>
+                {recentPlaces.map(location => {
+                  return <Place key={location.id} location={location} {...this.props} />
+                })}
+              </UnpaddedList>
             </div>
+          }
+          {trackRecent && recentSearches.length > 0 &&
+            <div className='recent-searches-container'>
+              <hr />
+              <div className='section-header'>Recent searches</div>
+              <UnpaddedList>
+                {recentSearches
+                  .sort((a, b) => b.timestamp - a.timestamp)
+                  .map(search => {
+                    return <RecentSearch key={search.id} search={search} {...this.props} />
+                  })
+                }
+              </UnpaddedList>
+            </div>
+          }
+          <hr />
+          <div className='remember-settings'>
+            <div className='section-header'>My preferences</div>
+            <small>Remember recent searches/places?</small>
+            <Button
+              bsSize='xsmall'
+              bsStyle='link'
+              className={trackRecent ? 'active' : ''}
+              onClick={this._enableTracking}>Yes</Button>
+            <Button
+              bsSize='xsmall'
+              bsStyle='link'
+              className={!trackRecent ? 'active' : ''}
+              onClick={this._disableTracking}>No</Button>
           </div>
-        }
-      </div>
-    )
+          {storageDisclaimer &&
+            <div>
+              <hr />
+              <div className='disclaimer'>
+                {storageDisclaimer}
+              </div>
+            </div>
+          }
+        </div>
+      )
+    }
+
+    return null
   }
 }
 
@@ -271,16 +338,21 @@ class RecentSearch extends Component {
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {
+  const { config, currentQuery, location, transitIndex, user } = state.otp
+  const { language, persistence = {} } = config
+  console.log(config)
   return {
-    config: state.otp.config,
-    currentPosition: state.otp.location.currentPosition,
+    config,
+    currentPosition: location.currentPosition,
     loggedInUser: state.user.loggedInUser,
-    nearbyStops: state.otp.location.nearbyStops,
-    query: state.otp.currentQuery,
-    sessionSearches: state.otp.location.sessionSearches,
-    stopsIndex: state.otp.transitIndex.stops,
-    storageDisclaimer: state.otp.config.language.storageDisclaimer,
-    user: state.otp.user
+    loggedInUserTripRequests: state.user.loggedInUserTripRequests,
+    nearbyStops: location.nearbyStops,
+    persistenceStrategy: persistence.enabled && persistence.strategy,
+    query: currentQuery,
+    sessionSearches: location.sessionSearches,
+    stopsIndex: transitIndex.stops,
+    storageDisclaimer: language.storageDisclaimer,
+    user
   }
 }
 
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index a542ac625..f034d7252 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -12,6 +12,7 @@ function createUserReducer () {
     },
     loggedInUser: null,
     loggedInUserMonitoredTrips: null,
+    loggedInUserTripRequests: null,
     pathBeforeSignIn: null
   }
 
@@ -34,6 +35,12 @@ function createUserReducer () {
         })
       }
 
+      case 'SET_CURRENT_USER_TRIP_REQUESTS': {
+        return update(state, {
+          loggedInUserTripRequests: { $set: action.payload }
+        })
+      }
+
       case 'SET_PATH_BEFORE_SIGNIN': {
         return update(state, {
           pathBeforeSignIn: { $set: action.payload }

From f54b11151b633427cf6595a9d68c3ab23556de95 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 18 Feb 2021 16:00:33 -0500
Subject: [PATCH 011/270] refactor(actions/api): Log first trip request for
 batch mw inquiries.

---
 lib/actions/api.js                            |  7 +++++-
 lib/components/form/user-settings.js          | 22 +++-------------
 lib/components/user/places/favorite-place.js  |  5 ++--
 .../user/places/main-panel-place.js           |  6 ++---
 lib/components/user/places/place.js           | 25 ++++++++-----------
 5 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 2e5df722e..10a92d739 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -150,6 +150,11 @@ export function routingQuery (searchId = null) {
       //
       // The advantage of using non-realtime route is that the middleware will be able to
       // record and provide the theoretical itinerary summary without having to query OTP again.
+      //
+      // If storeTripHistory is enabled, we only send the token for logging for the first request,
+      // subsequent requests from the `iterations` variable are identical
+      // (except for the mode combinations -- they are regenerated for every inquiry).
+      //
       // FIXME: Interestingly, and this could be from a side effect elsewhere,
       // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
       // (state.user stays unpopulated until after this function is called).
@@ -159,7 +164,7 @@ export function routingQuery (searchId = null) {
         user.loggedInUser &&
         user.loggedInUser.storeTripHistory
 
-      fetch(constructRoutingQuery(otpState, true), getOtpFetchOptions(state, storeTripHistory))
+      fetch(constructRoutingQuery(otpState, true), getOtpFetchOptions(state, storeTripHistory && i === 0))
         .then(getJsonAndCheckResponse)
         .then(json => {
           // FIXME: This is only performed when ignoring realtimeupdates currently, just
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 6887c9538..adc20f926 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -64,7 +64,6 @@ class UserSettings extends Component {
     console.log(loggedInUserTripRequests)
 
     if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
-      const { trackRecent, recentSearches } = user//remove this
       const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
       return (
         <div className='user-settings'>
@@ -90,7 +89,6 @@ class UserSettings extends Component {
           </UnpaddedList>
 
           {/* Show the triprequests if middleware is enabled strategy and user has opted in. */}
-          <hr />
           {loggedInUser.storeTripHistory && loggedInUserTripRequests && loggedInUserTripRequests.length > 0 &&
             <div className='recent-searches-container'>
               <hr />
@@ -98,6 +96,7 @@ class UserSettings extends Component {
               <UnpaddedList>
                 {loggedInUserTripRequests
                   .map(tripReq => ({
+                    canDelete: false,
                     id: tripReq.id,
                     query: planParamsToQuery(qs.parse(tripReq.queryParams)),
                     timestamp: tripReq.dateCreated,
@@ -111,21 +110,6 @@ class UserSettings extends Component {
               </UnpaddedList>
             </div>
           }
-          {trackRecent && recentSearches.length > 0 &&
-            <div className='recent-searches-container'>
-              <hr />
-              <div className='section-header'>Recent searches</div>
-              <UnpaddedList>
-                {recentSearches
-                  .sort((a, b) => b.timestamp - a.timestamp)
-                  .map(search => {
-                    console.log(search)
-                    return <RecentSearch key={search.id} search={search} {...this.props} />
-                  })
-                }
-              </UnpaddedList>
-            </div>
-          }
         </div>
       )
     } else if (persistenceStrategy === 'localStorage') {
@@ -314,7 +298,7 @@ class RecentSearch extends Component {
 
   render () {
     const { search, user } = this.props
-    const { query, timestamp } = search
+    const { canDelete = true, query, timestamp } = search
     const name = summarizeQuery(query, user.locations)
     const timeInfo = moment(timestamp).fromNow()
 
@@ -328,7 +312,7 @@ class RecentSearch extends Component {
     return (
       <MainPanelPlace
         onClick={this._onSelect}
-        onDelete={this._onForget}
+        onDelete={canDelete && this._onForget}
         place={place}
       />
     )
diff --git a/lib/components/user/places/favorite-place.js b/lib/components/user/places/favorite-place.js
index 57c104c42..f75946552 100644
--- a/lib/components/user/places/favorite-place.js
+++ b/lib/components/user/places/favorite-place.js
@@ -4,7 +4,8 @@ import styled from 'styled-components'
 
 import * as userActions from '../../../actions/user'
 import Place, {
-  ActionButtonContainer,
+  ActionButton,
+  ActionButtonPlaceholder,
   EDIT_LABEL,
   getActionsForPlace,
   PlaceButton,
@@ -41,7 +42,7 @@ const StyledPlace = styled(Place)`
     color: #888;
     flex-shrink: 0;
   }
-  ${ActionButtonContainer} {
+  ${ActionButton}, ${ActionButtonPlaceholder} {
     margin-left: 4px;
     width: ${FIELD_HEIGHT_PX};
   }
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
index fc94a87ea..b7acf1a22 100644
--- a/lib/components/user/places/main-panel-place.js
+++ b/lib/components/user/places/main-panel-place.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import Place, {
-  ActionButtonContainer,
+  ActionButton,
   EDIT_LABEL,
   getActionsForPlace,
   PlaceDetail,
@@ -17,7 +17,7 @@ const StyledPlace = styled(Place)`
     display: block;
     height: 100%;
   }
-  ${ActionButtonContainer} {
+  ${ActionButton} {
     width: 40px;
   }
 `
@@ -35,7 +35,7 @@ const MainPanelPlace = ({
 }) => {
   // Determine title and aria label.
   const isPlanAction = !!onClick
-  const planLabel = 'Plan an itinerary using this place'
+  const planLabel = 'Plan an itinerary using this item'
   const label = isPlanAction ? planLabel : EDIT_LABEL
   const title = isPlanAction ? `${place.title || place.address}\n${planLabel}` : EDIT_LABEL
 
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 249974c74..0fd4468ad 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -29,13 +29,12 @@ export const PlaceName = styled.span``
 
 export const PlaceText = styled.span``
 
-const ActionButton = styled(Button)`
+export const ActionButton = styled(Button)`
   background: none;
   height: 100%;
-  width: 100%;
 `
 
-export const ActionButtonContainer = styled.span``
+export const ActionButtonPlaceholder = styled.span``
 
 export const EDIT_LABEL = 'Edit this place'
 
@@ -138,18 +137,16 @@ const Place = ({
       {/* Action buttons. If none, render a placeholder. */}
       {actions && actions.length
         ? actions.map(({ icon: actionIcon, onClick: onAction, title: actionTitle }, index) => (
-          <ActionButtonContainer key={index}>
-            <ActionButton
-              aria-label={actionTitle}
-              bsStyle={buttonStyle}
-              onClick={onAction}
-              title={actionTitle}
-            >
-              <Icon name={actionIcon} size={iconSize} />
-            </ActionButton>
-          </ActionButtonContainer>
+          <ActionButton
+            aria-label={actionTitle}
+            bsStyle={buttonStyle}
+            onClick={onAction}
+            title={actionTitle}
+          >
+            <Icon name={actionIcon} size={iconSize} />
+          </ActionButton>
         ))
-        : <ActionButtonContainer />
+        : <ActionButtonPlaceholder />
       }
     </Container>
   )

From a4c4326c4f6c5ef8b1f19bae321203800b13466e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 18 Feb 2021 21:21:37 -0500
Subject: [PATCH 012/270] refactor(create-user-reducer): Start merging local
 and middleware storage strategies.

---
 lib/actions/user.js                  |  24 ++++-
 lib/components/form/user-settings.js | 145 +++++++++++++++------------
 lib/reducers/create-user-reducer.js  |  66 +++++++++++-
 3 files changed, 165 insertions(+), 70 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 9abb1597d..2675ffe7a 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -209,6 +209,23 @@ export function resendVerificationEmail () {
   }
 }
 
+/**
+ * Converts a middleware trip request to the search format.
+ */
+function convertRequestToSearch (config) {
+  return function (tripRequest) {
+    const { id, dateCreated, queryParams } = tripRequest
+    const { host, path } = config.api
+    return {
+      canDelete: false,
+      id,
+      query: planParamsToQuery(qs.parse(queryParams)),
+      timestamp: dateCreated,
+      url: `${host}${path}/plan?${queryParams}`
+    }
+  }
+}
+
 /**
  * Fetches the most recent (default 10) trip history for a user.
  */
@@ -220,13 +237,12 @@ export function fetchTripRequests () {
     const { data: requests, status: emptyStatus } = await secureFetch(`${requestUrl}&limit=0`, accessToken, apiKey, 'GET')
     const DEFAULT_LIMIT = 10
 
-    //Is .then() better?
-    //Also figure out whether to convert trip requests into search objects here.
-    //Also figure out a way to deal with batch ids and remove requests of the same batch.
     if (emptyStatus === 'success') {
       const { data: trips, status } = await secureFetch(`${requestUrl}&offset=${requests.total - DEFAULT_LIMIT}`, accessToken, apiKey, 'GET')
       if (status === 'success') {
-        dispatch(setCurrentUserTripRequests(trips.data))
+        // Convert tripRequests to search format.
+        const convertedTrips = trips.data.map(convertRequestToSearch(getState().otp.config))
+        dispatch(setCurrentUserTripRequests(convertedTrips))
       }
     }
   }
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index adc20f926..32f4c2b27 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -1,7 +1,6 @@
 /* eslint-disable complexity */
 import moment from 'moment'
 import coreUtils from '@opentripplanner/core-utils'
-import qs from 'qs'
 import React, { Component } from 'react'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
@@ -14,17 +13,17 @@ import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
 import MainPanelPlace from '../user/places/main-panel-place'
 import { PLACES_PATH } from '../../util/constants'
-import { convertToLocationFieldLocation, convertToPlace } from '../../util/user'
+import { convertToLocationFieldLocation, convertToPlace, isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
 
 const { matchLatLon } = coreUtils.map
-const { planParamsToQuery, summarizeQuery } = coreUtils.query
+const { summarizeQuery } = coreUtils.query
 
 class UserSettings extends Component {
   _disableTracking = () => {
-    const { user, toggleTracking } = this.props
-    if (!user.trackRecent) return
-    const hasRecents = user.recentPlaces.length > 0 || user.recentSearches.length > 0
+    const { localUser, localUserTripRequests, toggleTracking } = this.props
+    if (!localUser.storeTripHistory) return
+    const hasRecents = localUser.recentPlaces.length > 0 || localUserTripRequests.length > 0
     // If user has recents and does not confirm deletion, return without doing
     // anything.
     if (hasRecents && !window.confirm('You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?')) {
@@ -34,11 +33,11 @@ class UserSettings extends Component {
     toggleTracking(false)
   }
 
-  _enableTracking = () => !this.props.user.trackRecent && this.props.toggleTracking(true)
+  _enableTracking = () => !this.props.localUser.storeTripHistory && this.props.toggleTracking(true)
 
   _getLocations = user => {
-    const locations = [...user.locations]
-    if (!locations.find(l => l.type === 'work')) {
+    const locations = [...user.savedLocations]
+    if (!locations.find(isWork)) {
       locations.push({
         blank: true,
         icon: 'briefcase',
@@ -47,7 +46,7 @@ class UserSettings extends Component {
         type: 'work'
       })
     }
-    if (!locations.find(l => l.type === 'home')) {
+    if (!locations.find(isHome)) {
       locations.push({
         blank: true,
         icon: 'home',
@@ -60,7 +59,17 @@ class UserSettings extends Component {
   }
 
   render () {
-    const { config, loggedInUser, loggedInUserTripRequests, persistenceStrategy, storageDisclaimer, user } = this.props
+    const {
+      forgetSearch,
+      localUser,
+      loggedInUser,
+      loggedInUserTripRequests,
+      persistenceStrategy,
+      setQueryParam,
+      storageDisclaimer,
+      tripRequests,
+      trueUser
+    } = this.props
     console.log(loggedInUserTripRequests)
 
     if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
@@ -88,35 +97,19 @@ class UserSettings extends Component {
             )}
           </UnpaddedList>
 
-          {/* Show the triprequests if middleware is enabled strategy and user has opted in. */}
-          {loggedInUser.storeTripHistory && loggedInUserTripRequests && loggedInUserTripRequests.length > 0 &&
-            <div className='recent-searches-container'>
-              <hr />
-              <div className='section-header'>Recent searches</div>
-              <UnpaddedList>
-                {loggedInUserTripRequests
-                  .map(tripReq => ({
-                    canDelete: false,
-                    id: tripReq.id,
-                    query: planParamsToQuery(qs.parse(tripReq.queryParams)),
-                    timestamp: tripReq.dateCreated,
-                    url: `${config.api.host}${config.api.path}/plan?${tripReq.queryParams}`
-                  }))
-                  .sort((a, b) => b.timestamp - a.timestamp)
-                  .map(search => {
-                    return <RecentSearch key={search.id} search={search} {...this.props} />
-                  })
-                }
-              </UnpaddedList>
-            </div>
-          }
+          <RecentTripRequests
+            forgetSearch={forgetSearch}
+            setQueryParam={setQueryParam}
+            tripRequests={tripRequests}
+            user={trueUser}
+          />
         </div>
       )
     } else if (persistenceStrategy === 'localStorage') {
-      const { favoriteStops, trackRecent, recentPlaces, recentSearches } = user
+      const { favoriteStops, storeTripHistory, recentPlaces } = localUser
       // Clone locations in order to prevent blank locations from seeping into the
       // app state/store.
-      const locations = this._getLocations(user)
+      const locations = this._getLocations(localUser)
       // Insert additional location types before 'custom' if needed.
       const order = ['home', 'work', 'suggested', 'stop', 'recent']
       const sortedLocations = locations
@@ -143,7 +136,7 @@ class UserSettings extends Component {
             }
           </UnpaddedList>
 
-          {trackRecent && recentPlaces.length > 0 &&
+          {storeTripHistory && recentPlaces.length > 0 &&
             <div className='recent-places-container'>
               <hr />
               <div className='section-header'>Recent places</div>
@@ -154,20 +147,14 @@ class UserSettings extends Component {
               </UnpaddedList>
             </div>
           }
-          {trackRecent && recentSearches.length > 0 &&
-            <div className='recent-searches-container'>
-              <hr />
-              <div className='section-header'>Recent searches</div>
-              <UnpaddedList>
-                {recentSearches
-                  .sort((a, b) => b.timestamp - a.timestamp)
-                  .map(search => {
-                    return <RecentSearch key={search.id} search={search} {...this.props} />
-                  })
-                }
-              </UnpaddedList>
-            </div>
-          }
+
+          <RecentTripRequests
+            forgetSearch={forgetSearch}
+            setQueryParam={setQueryParam}
+            tripRequests={tripRequests}
+            user={trueUser}
+          />
+
           <hr />
           <div className='remember-settings'>
             <div className='section-header'>My preferences</div>
@@ -175,12 +162,12 @@ class UserSettings extends Component {
             <Button
               bsSize='xsmall'
               bsStyle='link'
-              className={trackRecent ? 'active' : ''}
+              className={storeTripHistory ? 'active' : ''}
               onClick={this._enableTracking}>Yes</Button>
             <Button
               bsSize='xsmall'
               bsStyle='link'
-              className={!trackRecent ? 'active' : ''}
+              className={!storeTripHistory ? 'active' : ''}
               onClick={this._disableTracking}>No</Button>
           </div>
           {storageDisclaimer &&
@@ -287,19 +274,20 @@ class Place extends Component {
 /**
  * Wraps MainPanelPlace for recent trip requests.
  */
-class RecentSearch extends Component {
+class TripRequest extends Component {
   _onSelect = () => {
-    const { search, setQueryParam } = this.props
+    const { setQueryParam, tripRequest } = this.props
+    const { id, query } = tripRequest
     // Update query params and initiate search.
-    setQueryParam(search.query, search.id)
+    setQueryParam(query, id)
   }
 
-  _onForget = () => this.props.forgetSearch(this.props.search.id)
+  _onForget = () => this.props.forgetSearch(this.props.tripRequest.id)
 
   render () {
-    const { search, user } = this.props
-    const { canDelete = true, query, timestamp } = search
-    const name = summarizeQuery(query, user.locations)
+    const { tripRequest, user } = this.props
+    const { canDelete = true, query, timestamp } = tripRequest
+    const name = summarizeQuery(query, user.savedLocations)
     const timeInfo = moment(timestamp).fromNow()
 
     const place = {
@@ -319,24 +307,55 @@ class RecentSearch extends Component {
   }
 }
 
+/**
+ * Renders a list of recent trip requests, most recent first,
+ * if permitted by user.
+ */
+const RecentTripRequests = ({ forgetSearch, setQueryParam, tripRequests, user }) => (
+  user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
+    <div className='recent-searches-container'>
+      <hr />
+      <div className='section-header'>Recent searches</div>
+      <UnpaddedList>
+        {tripRequests
+          .sort((a, b) => b.timestamp - a.timestamp)
+          .map(tripReq => (
+            <TripRequest
+              forgetSearch={forgetSearch}
+              key={tripReq.id}
+              setQueryParam={setQueryParam}
+              tripRequest={tripReq}
+              user={user}
+            />
+          ))
+        }
+      </UnpaddedList>
+    </div>
+  )
+)
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {
-  const { config, currentQuery, location, transitIndex, user } = state.otp
+  const { config, currentQuery, location, transitIndex } = state.otp
   const { language, persistence = {} } = config
   console.log(config)
+
+  const { localUser, localUserTripRequests, loggedInUser, loggedInUserTripRequests } = state.user
   return {
     config,
     currentPosition: location.currentPosition,
-    loggedInUser: state.user.loggedInUser,
-    loggedInUserTripRequests: state.user.loggedInUserTripRequests,
+    localUser, // these users should be merged in mapStateToProps
+    localUserTripRequests,
+    loggedInUser,
+    loggedInUserTripRequests,
     nearbyStops: location.nearbyStops,
     persistenceStrategy: persistence.enabled && persistence.strategy,
     query: currentQuery,
     sessionSearches: location.sessionSearches,
     stopsIndex: transitIndex.stops,
     storageDisclaimer: language.storageDisclaimer,
-    user
+    tripRequests: loggedInUser ? loggedInUserTripRequests : localUserTripRequests,
+    trueUser: loggedInUser || localUser
   }
 }
 
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index f034d7252..07d012dfe 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -1,7 +1,66 @@
 import update from 'immutability-helper'
+import coreUtils from '@opentripplanner/core-utils'
+
+const { getItem } = coreUtils.storage
+
+/**
+ * Load select user settings stored locally if the persistence strategy is localStorage.
+ * Other settings not mentioned below are still loaded through createOtpReducer.
+ * The select user settings are:
+ * - Home and Work locations,
+ * - recent itinerary searches
+ * - whether recent searches and places should be tracked
+ * - recent places in trip plan searches,
+ * - favorite stops
+ *
+ * Note: If the persistence stragegy is otp_middleware, then user settings
+ * are fetched separately as soon as user login info is received
+ * (from one of the components that uses withLoggedInUserSupport).
+ */
+function loadUserFromLocalStoragePerConfig (config) {
+  const { persistence = {} } = config
+  const persistenceStrategy = persistence.enabled && persistence.strategy
+  if (persistenceStrategy === 'localStorage') {
+    // User's home and work locations
+    const home = getItem('home')
+    const work = getItem('work')
+    // Whether recent searches and places should be tracked in local storage.
+    const trackRecent = getItem('trackRecent', false)
+    const expandAdvanced = getItem('expandAdvanced', false)
+    // Recent places used in trip plan searches.
+    const recentPlaces = getItem('recent', [])
+    // List of user's favorite stops.
+    const favoriteStops = getItem('favoriteStops', [])
+    // Recent trip plan searches (excluding time/date parameters to avoid complexity).
+    const recentSearches = getItem('recentSearches', [])
+    // Filter valid locations found into locations list.
+    const locations = [home, work].filter(p => p)
+    // Add configurable locations to home and work locations
+    if (config.locations) {
+      locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
+    }
+
+    return {
+      localUser: {
+        expandAdvanced, // localUser only
+        favoriteStops, // localUser only - attn: legacy location format
+        recentPlaces, // localUser only - attn: legacy location format
+        savedLocations: locations, // attn: legacy location format
+        storeTripHistory: trackRecent
+      },
+      localUserTripRequests: recentSearches // attn: legacy search format
+    }
+  }
+
+  return {
+    localUser: null,
+    localUserTripRequests: null
+  }
+}
+
+function createUserReducer (config) {
+  const localStorageState = loadUserFromLocalStoragePerConfig(config)
 
-// TODO: port user-specific code from the otp reducer.
-function createUserReducer () {
   const initialState = {
     accessToken: null,
     itineraryExistence: null,
@@ -13,7 +72,8 @@ function createUserReducer () {
     loggedInUser: null,
     loggedInUserMonitoredTrips: null,
     loggedInUserTripRequests: null,
-    pathBeforeSignIn: null
+    pathBeforeSignIn: null,
+    ...localStorageState
   }
 
   return (state = initialState, action) => {

From 49f12f82ca1b59b1ca7d1e6d92e855ce1f4468e5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 19 Feb 2021 15:11:29 -0500
Subject: [PATCH 013/270] refactor(UserSettings): Merge local and middleware
 Place components.

---
 lib/actions/user.js                           |  12 +-
 lib/components/form/user-settings.js          | 112 +++++++++---------
 .../user/places/main-panel-place.js           |   2 +-
 lib/components/user/places/place.js           |   1 +
 lib/reducers/create-user-reducer.js           |  73 +++++++++++-
 5 files changed, 137 insertions(+), 63 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 2675ffe7a..7e93996d9 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -1,7 +1,6 @@
 import clone from 'clone'
 import moment from 'moment'
-import { planParamsToQuery } from '@opentripplanner/core-utils/lib/query'
-import { OTP_API_DATE_FORMAT } from '@opentripplanner/core-utils/lib/time'
+import coreUtils from '@opentripplanner/core-utils'
 import qs from 'qs'
 import { createAction } from 'redux-actions'
 
@@ -13,12 +12,16 @@ import { secureFetch } from '../util/middleware'
 import { isBlank } from '../util/ui'
 import { isNewUser, positionHomeAndWorkFirst } from '../util/user'
 
+const { planParamsToQuery } = coreUtils.query
+const { OTP_API_DATE_FORMAT } = coreUtils.time
+
 // Middleware API paths.
 const API_MONITORED_TRIP_PATH = '/api/secure/monitoredtrip'
 const API_TRIP_HISTORY_PATH = '/api/secure/triprequests'
 const API_OTPUSER_PATH = '/api/secure/user'
 const API_OTPUSER_VERIFY_SMS_SUBPATH = '/verify_sms'
 
+// Middleware user actions
 const setAccessToken = createAction('SET_ACCESS_TOKEN')
 const setCurrentUser = createAction('SET_CURRENT_USER')
 const setCurrentUserMonitoredTrips = createAction('SET_CURRENT_USER_MONITORED_TRIPS')
@@ -28,6 +31,11 @@ export const setPathBeforeSignIn = createAction('SET_PATH_BEFORE_SIGNIN')
 export const clearItineraryExistence = createAction('CLEAR_ITINERARY_EXISTENCE')
 const setitineraryExistence = createAction('SET_ITINERARY_EXISTENCE')
 
+// localStorage user actions
+export const deleteLocalUserRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
+export const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
+export const deleteLocalUserStop = createAction('DELETE_LOCAL_USER_STOP')
+
 function createNewUser (auth0User) {
   return {
     auth0UserId: auth0User.sub,
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 32f4c2b27..921c60796 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -13,7 +13,7 @@ import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
 import MainPanelPlace from '../user/places/main-panel-place'
 import { PLACES_PATH } from '../../util/constants'
-import { convertToLocationFieldLocation, convertToPlace, isHome, isWork } from '../../util/user'
+import { convertToPlace, isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
 
 const { matchLatLon } = coreUtils.map
@@ -60,17 +60,20 @@ class UserSettings extends Component {
 
   render () {
     const {
+      deleteLocalUserRecentPlace,
+      deleteLocalUserSavedPlace,
+      deleteLocalUserStop,
+      deleteUserPlace,
       forgetSearch,
       localUser,
       loggedInUser,
-      loggedInUserTripRequests,
       persistenceStrategy,
       setQueryParam,
+      setViewedStop,
       storageDisclaimer,
       tripRequests,
       trueUser
     } = this.props
-    console.log(loggedInUserTripRequests)
 
     if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
       const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
@@ -86,9 +89,11 @@ class UserSettings extends Component {
           <UnpaddedList>
             {loggedInUserLocations.map((place, index) => {
               return (
-                <SavedPlace
+                <Place
                   {...this.props}
+                  isMiddleware
                   key={index}
+                  onDelete={deleteUserPlace}
                   path={`${PLACES_PATH}/${index}`}
                   place={place}
                 />
@@ -110,7 +115,6 @@ class UserSettings extends Component {
       // Clone locations in order to prevent blank locations from seeping into the
       // app state/store.
       const locations = this._getLocations(localUser)
-      // Insert additional location types before 'custom' if needed.
       const order = ['home', 'work', 'suggested', 'stop', 'recent']
       const sortedLocations = locations
         .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
@@ -120,18 +124,28 @@ class UserSettings extends Component {
               My saved places
           </div>
           <UnpaddedList>
-            {sortedLocations.map((location, index) => {
-              return <Place key={location.id} location={location} {...this.props} />
-            })}
+            {sortedLocations.map(location => (
+              <Place
+                key={location.id}
+                onDelete={deleteLocalUserSavedPlace}
+                place={location}
+                {...this.props} />
+            ))}
           </UnpaddedList>
           <hr />
 
           <div className='section-header'>Favorite stops</div>
           <UnpaddedList>
             {favoriteStops.length > 0
-              ? favoriteStops.map(location => {
-                return <Place key={location.id} location={location} {...this.props} />
-              })
+              ? favoriteStops.map(location => (
+                <Place
+                  key={location.id}
+                  onDelete={deleteLocalUserStop}
+                  onView={setViewedStop}
+                  place={location}
+                  {...this.props}
+                />
+              ))
               : <small>No favorite stops </small>
             }
           </UnpaddedList>
@@ -141,9 +155,14 @@ class UserSettings extends Component {
               <hr />
               <div className='section-header'>Recent places</div>
               <UnpaddedList>
-                {recentPlaces.map(location => {
-                  return <Place key={location.id} location={location} {...this.props} />
-                })}
+                {recentPlaces.map(location => (
+                  <Place
+                    key={location.id}
+                    onDelete={deleteLocalUserRecentPlace}
+                    place={location}
+                    {...this.props} //expand this
+                  />
+                ))}
               </UnpaddedList>
             </div>
           }
@@ -206,66 +225,40 @@ function setFromOrToLocation (location, setLocation, query) {
   }
 }
 
-/**
- * Wraps MainPanelPlace for places saved from loggedInUser.
- */
-class SavedPlace extends Component {
-  _handleDelete = () => {
-    const { deleteUserPlace, place } = this.props
-    deleteUserPlace(place)
-  }
-
-  _handleClick = () => {
-    const { place, query, setLocation } = this.props
-    const location = convertToLocationFieldLocation(place)
-    setFromOrToLocation(location, setLocation, query)
-  }
-
-  render () {
-    const { path, place } = this.props
-    return (
-      <MainPanelPlace
-        onClick={place.address ? this._handleClick : null}
-        onDelete={this._handleDelete}
-        path={path}
-        place={place}
-      />
-    )
-  }
-}
-
 /**
  * Wraps MainPanelPlace for places from localStorage (recents, favorite stops...).
  */
 class Place extends Component {
   _onSelect = () => {
-    const { location, query, setLocation } = this.props
-    if (location.blank) {
-      window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${location.type} location.`)
+    const { place, query, setLocation } = this.props
+    if (place.blank) {
+      window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
     } else {
-      setFromOrToLocation(location, setLocation, query)
+      setFromOrToLocation(place, setLocation, query)
     }
   }
 
   _onView = () => {
-    const { location, setViewedStop } = this.props
-    setViewedStop({ stopId: location.id })
+    const { place, onView } = this.props
+    onView({ stopId: place.id })
   }
 
-  _onForget = () => {
-    const { forgetPlace, forgetStop, location } = this.props
-    if (location.type === 'stop') forgetStop(location.id)
-    else forgetPlace(location.id)
+  _onDelete = () => {
+    const { place, onDelete } = this.props
+    onDelete(place)
   }
 
   render () {
-    const { location } = this.props
+    const { isMiddleware, place, onDelete, onView, path } = this.props
+    // Needed to provide display details for localStorage places.
+    const placeWithDetails = isMiddleware ? place : convertToPlace(place)
     return (
       <MainPanelPlace
-        onClick={this._onSelect}
-        onDelete={this._onForget}
-        onView={this._onView}
-        place={convertToPlace(location)}
+        onClick={placeWithDetails.address && this._onSelect}
+        onDelete={onDelete && this._onDelete}
+        onView={onView && this._onView}
+        path={path}
+        place={placeWithDetails}
       />
     )
   }
@@ -360,10 +353,11 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
+  deleteLocalUserRecentPlace: userActions.deleteLocalUserRecentPlace,
+  deleteLocalUserSavedPlace: userActions.deleteLocalUserSavedPlace,
+  deleteLocalUserStop: userActions.deleteLocalUserStop,
   deleteUserPlace: userActions.deleteUserPlace,
-  forgetPlace: mapActions.forgetPlace,
   forgetSearch: apiActions.forgetSearch,
-  forgetStop: mapActions.forgetStop,
   setLocation: mapActions.setLocation,
   setQueryParam: formActions.setQueryParam,
   setViewedStop: uiActions.setViewedStop,
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
index b7acf1a22..5ad34ad69 100644
--- a/lib/components/user/places/main-panel-place.js
+++ b/lib/components/user/places/main-panel-place.js
@@ -35,7 +35,7 @@ const MainPanelPlace = ({
 }) => {
   // Determine title and aria label.
   const isPlanAction = !!onClick
-  const planLabel = 'Plan an itinerary using this item'
+  const planLabel = 'Plan an itinerary using this entry'
   const label = isPlanAction ? planLabel : EDIT_LABEL
   const title = isPlanAction ? `${place.title || place.address}\n${planLabel}` : EDIT_LABEL
 
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 0fd4468ad..544de0f01 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -140,6 +140,7 @@ const Place = ({
           <ActionButton
             aria-label={actionTitle}
             bsStyle={buttonStyle}
+            key={index}
             onClick={onAction}
             title={actionTitle}
           >
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 07d012dfe..b5451561e 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -1,7 +1,11 @@
+/* eslint-disable complexity */
+import clone from 'clone'
 import update from 'immutability-helper'
 import coreUtils from '@opentripplanner/core-utils'
 
-const { getItem } = coreUtils.storage
+const { getItem, removeItem, storeItem } = coreUtils.storage
+
+const MAX_RECENT_STORAGE = 5
 
 /**
  * Load select user settings stored locally if the persistence strategy is localStorage.
@@ -125,6 +129,73 @@ function createUserReducer (config) {
         })
       }
 
+      case 'DELETE_LOCAL_USER_RECENT_PLACE': {
+        if (!confirm('Would you like to remove this place?')) return state
+
+        // This is used to delete a local user's recent location.
+        const placeId = action.payload.id
+        const recentPlaces = clone(state.localUser.recentPlaces)
+        // Remove recent from list of recent places
+        const removeIndex = recentPlaces.findIndex(l => l.id === placeId)
+        recentPlaces.splice(removeIndex, 1)
+        storeItem('recent', recentPlaces)
+        return removeIndex !== -1
+          ? update(state, { localUser: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
+          : state
+      }
+
+      case 'DELETE_LOCAL_USER_SAVED_PLACE': {
+        if (!confirm('Would you like to remove this place?')) return state
+
+        // This is used to delete the local user's Home and Work (or other built-in) locations.
+        const placeId = action.payload.id
+        const removeIndex = state.localUser.savedLocations.findIndex(l => l.id === placeId)
+        removeItem(placeId)
+        return removeIndex !== -1
+          ? update(state, { localUser: { savedLocations: { $splice: [[removeIndex, 1]] } } })
+          : state
+      }
+
+      case 'DELETE_LOCAL_USER_STOP': {
+        const stopId = action.payload.id
+        const favoriteStops = clone(state.localUser.favoriteStops)
+        // Remove stop from favorites
+        const removeIndex = favoriteStops.findIndex(l => l.id === stopId)
+        favoriteStops.splice(removeIndex, 1)
+        storeItem('favoriteStops', favoriteStops)
+        return removeIndex !== -1
+          ? update(state, { localUser: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
+          : state
+      }
+      case 'REMEMBER_STOP': {
+        // Payload is stop data. We want to avoid saving other attributes that
+        // might be contained there (like lists of patterns).
+        const { id, name, lat, lon } = action.payload
+        const stop = {
+          icon: 'bus',
+          id,
+          lat,
+          lon,
+          name,
+          type: 'stop'
+        }
+        const favoriteStops = clone(state.localUser.favoriteStops)
+        if (favoriteStops.length >= MAX_RECENT_STORAGE) {
+          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          return state
+        }
+        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        // Do nothing if duplicate stop found.
+        if (index !== -1) {
+          console.warn(`Stop with id ${stop.id} already exists in favorites.`)
+          return state
+        } else {
+          favoriteStops.unshift(stop)
+        }
+        storeItem('favoriteStops', favoriteStops)
+        return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
+      }
+
       default:
         return state
     }

From f5de789f22fcad29218da5ff657cc26adca0eee3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 19 Feb 2021 16:15:48 -0500
Subject: [PATCH 014/270] refactor(PlaceShortcut): Extract from UserSettings.
 Refactor place lists.

---
 lib/components/form/user-settings.js         | 199 +++++++------------
 lib/components/user/places/place-shortcut.js |  84 ++++++++
 2 files changed, 155 insertions(+), 128 deletions(-)
 create mode 100644 lib/components/user/places/place-shortcut.js

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 921c60796..c8a531d35 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 import moment from 'moment'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
@@ -12,11 +11,11 @@ import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
 import MainPanelPlace from '../user/places/main-panel-place'
+import PlaceShortcut from '../user/places/place-shortcut'
 import { PLACES_PATH } from '../../util/constants'
-import { convertToPlace, isHome, isWork } from '../../util/user'
+import { isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
 
-const { matchLatLon } = coreUtils.map
 const { summarizeQuery } = coreUtils.query
 
 class UserSettings extends Component {
@@ -77,32 +76,28 @@ class UserSettings extends Component {
 
     if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
       const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
+      const savedPlacesHeader = (
+        <>
+          My saved places (
+          <LinkWithQuery to='/account/settings'>
+              manage
+          </LinkWithQuery>
+          )
+        </>
+      )
+
       return (
         <div className='user-settings'>
-          <div className='section-header'>
-              My saved places (
-            <LinkWithQuery to='/account/settings'>
-                manage
-            </LinkWithQuery>
-              )
-          </div>
-          <UnpaddedList>
-            {loggedInUserLocations.map((place, index) => {
-              return (
-                <Place
-                  {...this.props}
-                  isMiddleware
-                  key={index}
-                  onDelete={deleteUserPlace}
-                  path={`${PLACES_PATH}/${index}`}
-                  place={place}
-                />
-              )
-            }
-            )}
-          </UnpaddedList>
+          <Places
+            basePath={PLACES_PATH}
+            header={savedPlacesHeader}
+            isMiddleware
+            onDelete={deleteUserPlace}
+            places={loggedInUserLocations}
+            separator={false}
+          />
 
-          <RecentTripRequests
+          <RecentTrips
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
             tripRequests={tripRequests}
@@ -120,54 +115,27 @@ class UserSettings extends Component {
         .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
       return (
         <div className='user-settings'>
-          <div className='section-header'>
-              My saved places
-          </div>
-          <UnpaddedList>
-            {sortedLocations.map(location => (
-              <Place
-                key={location.id}
-                onDelete={deleteLocalUserSavedPlace}
-                place={location}
-                {...this.props} />
-            ))}
-          </UnpaddedList>
-          <hr />
+          <Places
+            onDelete={deleteLocalUserSavedPlace}
+            places={sortedLocations}
+            separator={false}
+          />
 
-          <div className='section-header'>Favorite stops</div>
-          <UnpaddedList>
-            {favoriteStops.length > 0
-              ? favoriteStops.map(location => (
-                <Place
-                  key={location.id}
-                  onDelete={deleteLocalUserStop}
-                  onView={setViewedStop}
-                  place={location}
-                  {...this.props}
-                />
-              ))
-              : <small>No favorite stops </small>
-            }
-          </UnpaddedList>
+          <Places
+            header='Favorite stops'
+            onDelete={deleteLocalUserStop}
+            onView={setViewedStop}
+            places={favoriteStops}
+            textIfEmpty='No favorite stops'
+          />
 
-          {storeTripHistory && recentPlaces.length > 0 &&
-            <div className='recent-places-container'>
-              <hr />
-              <div className='section-header'>Recent places</div>
-              <UnpaddedList>
-                {recentPlaces.map(location => (
-                  <Place
-                    key={location.id}
-                    onDelete={deleteLocalUserRecentPlace}
-                    place={location}
-                    {...this.props} //expand this
-                  />
-                ))}
-              </UnpaddedList>
-            </div>
-          }
+          {storeTripHistory && <Places
+            header='Recent places'
+            onDelete={deleteLocalUserRecentPlace}
+            places={recentPlaces}
+          />}
 
-          <RecentTripRequests
+          <RecentTrips
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
             tripRequests={tripRequests}
@@ -206,63 +174,38 @@ class UserSettings extends Component {
 }
 
 /**
- * Sets the from or to location based on the query using the provided action.
- */
-function setFromOrToLocation (location, setLocation, query) {
-  // If 'to' not set and 'from' does not match location, set as 'to'.
-  if (
-    !query.to && (
-      !query.from || !matchLatLon(location, query.from)
-    )
-  ) {
-    setLocation({ location, locationType: 'to' })
-  } else if (
-    // Vice versa for setting as 'from'.
-    !query.from &&
-      !matchLatLon(location, query.to)
-  ) {
-    setLocation({ location, locationType: 'from' })
-  }
-}
-
-/**
- * Wraps MainPanelPlace for places from localStorage (recents, favorite stops...).
+ * Displays a list of places with a header.
  */
-class Place extends Component {
-  _onSelect = () => {
-    const { place, query, setLocation } = this.props
-    if (place.blank) {
-      window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
-    } else {
-      setFromOrToLocation(place, setLocation, query)
-    }
-  }
-
-  _onView = () => {
-    const { place, onView } = this.props
-    onView({ stopId: place.id })
-  }
-
-  _onDelete = () => {
-    const { place, onDelete } = this.props
-    onDelete(place)
-  }
-
-  render () {
-    const { isMiddleware, place, onDelete, onView, path } = this.props
-    // Needed to provide display details for localStorage places.
-    const placeWithDetails = isMiddleware ? place : convertToPlace(place)
-    return (
-      <MainPanelPlace
-        onClick={placeWithDetails.address && this._onSelect}
-        onDelete={onDelete && this._onDelete}
-        onView={onView && this._onView}
-        path={path}
-        place={placeWithDetails}
-      />
-    )
-  }
-}
+const Places = ({
+  basePath,
+  header,
+  isMiddleware,
+  onDelete,
+  onView,
+  places,
+  separator = true,
+  textIfEmpty
+}) => (
+  <>
+    {separator && <hr />}
+    {header && <div className='section-header'>{header}</div>}
+    <UnpaddedList>
+      {places.length > 0
+        ? places.map((location, index) => (
+          <PlaceShortcut
+            isMiddleware
+            key={location.id || index}
+            onDelete={onDelete}
+            onView={onView}
+            path={basePath && `${basePath}/${index}`}
+            place={location}
+          />
+        ))
+        : textIfEmpty && <small>{textIfEmpty}</small>
+      }
+    </UnpaddedList>
+  </>
+)
 
 /**
  * Wraps MainPanelPlace for recent trip requests.
@@ -304,7 +247,7 @@ class TripRequest extends Component {
  * Renders a list of recent trip requests, most recent first,
  * if permitted by user.
  */
-const RecentTripRequests = ({ forgetSearch, setQueryParam, tripRequests, user }) => (
+const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests, user }) => (
   user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
     <div className='recent-searches-container'>
       <hr />
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
new file mode 100644
index 000000000..c9514416d
--- /dev/null
+++ b/lib/components/user/places/place-shortcut.js
@@ -0,0 +1,84 @@
+import coreUtils from '@opentripplanner/core-utils'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import * as mapActions from '../../../actions/map'
+import { convertToPlace } from '../../../util/user'
+import MainPanelPlace from './main-panel-place'
+
+const { matchLatLon } = coreUtils.map
+
+/**
+ * A shortcut button that sets the provided place as the 'from' or 'to' Place.
+ * It wraps MainPanelPlace to let the user edit, view or delete the place.
+ */
+class PlaceShortcut extends Component {
+  /**
+   * Sets the from or to location based on the query using the provided action.
+   */
+  _setFromOrToLocation = location => {
+    const { query, setLocation } = this.props
+    // If 'to' not set and 'from' does not match location, set as 'to'.
+    if (
+      !query.to && (
+        !query.from || !matchLatLon(location, query.from)
+      )
+    ) {
+      setLocation({ location, locationType: 'to' })
+    } else if (
+      // Vice versa for setting as 'from'.
+      !query.from &&
+        !matchLatLon(location, query.to)
+    ) {
+      setLocation({ location, locationType: 'from' })
+    }
+  }
+
+  _onSelect = () => {
+    const { place } = this.props
+    if (place.blank) {
+      window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
+    } else {
+      this._setFromOrToLocation(place)
+    }
+  }
+
+  _onView = () => {
+    const { place, onView } = this.props
+    onView({ stopId: place.id })
+  }
+
+  _onDelete = () => {
+    const { place, onDelete } = this.props
+    onDelete(place)
+  }
+
+  render () {
+    const { isMiddleware, place, onDelete, onView, path } = this.props
+    // Provide display details for localStorage places.
+    const placeWithDetails = isMiddleware ? place : convertToPlace(place)
+    return (
+      <MainPanelPlace
+        onClick={placeWithDetails.address ? this._onSelect : null}
+        onDelete={onDelete && this._onDelete}
+        onView={onView && this._onView}
+        path={path}
+        place={placeWithDetails}
+      />
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    query: state.otp.currentQuery
+  }
+}
+
+const mapDispatchToProps = {
+  setLocation: mapActions.setLocation
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlaceShortcut)

From b4c0ba5b444e3911ca2149019b7c42264d83ed9a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 19 Feb 2021 16:37:22 -0500
Subject: [PATCH 015/270] refactor(PlaceShortcut): Remove redundant prop

---
 lib/components/form/user-settings.js         |  3 ---
 lib/components/user/places/place-shortcut.js | 11 ++++++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index c8a531d35..fbe6a9f6e 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -91,7 +91,6 @@ class UserSettings extends Component {
           <Places
             basePath={PLACES_PATH}
             header={savedPlacesHeader}
-            isMiddleware
             onDelete={deleteUserPlace}
             places={loggedInUserLocations}
             separator={false}
@@ -179,7 +178,6 @@ class UserSettings extends Component {
 const Places = ({
   basePath,
   header,
-  isMiddleware,
   onDelete,
   onView,
   places,
@@ -193,7 +191,6 @@ const Places = ({
       {places.length > 0
         ? places.map((location, index) => (
           <PlaceShortcut
-            isMiddleware
             key={location.id || index}
             onDelete={onDelete}
             onView={onView}
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index c9514416d..963ac9589 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -54,16 +54,17 @@ class PlaceShortcut extends Component {
   }
 
   render () {
-    const { isMiddleware, place, onDelete, onView, path } = this.props
-    // Provide display details for localStorage places.
-    const placeWithDetails = isMiddleware ? place : convertToPlace(place)
+    const { place, onDelete, onView, path } = this.props
+    // localStorage places (where path is not provided) need to be converted,
+    // so the correct fields are passed to MainPanelPlace.
+    const convertedPlace = path ? place : convertToPlace(place)
     return (
       <MainPanelPlace
-        onClick={placeWithDetails.address ? this._onSelect : null}
+        onClick={convertedPlace.address ? this._onSelect : null}
         onDelete={onDelete && this._onDelete}
         onView={onView && this._onView}
         path={path}
-        place={placeWithDetails}
+        place={convertedPlace}
       />
     )
   }

From f63acdd6f7b788265ab79ebb21dc6c0d2eefda12 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 19 Feb 2021 20:10:14 -0500
Subject: [PATCH 016/270] refactor(user reducer): Move more actions from top to
 user reducer.

---
 lib/actions/map.js                            |  23 +++-
 lib/actions/user.js                           |   3 +-
 lib/components/form/user-settings.js          |  73 +++++++-----
 .../map/connected-endpoints-overlay.js        |   3 +-
 lib/components/user/places/place-shortcut.js  |   8 +-
 lib/components/viewers/stop-viewer.js         |   2 +-
 lib/reducers/create-otp-reducer.js            | 107 ------------------
 lib/reducers/create-user-reducer.js           |  72 ++++++++++--
 8 files changed, 131 insertions(+), 160 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 26cbcbcef..9fdeda78b 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -19,12 +19,27 @@ import { clearActiveSearch } from './form'
 // Private actions
 const clearingLocation = createAction('CLEAR_LOCATION')
 const settingLocation = createAction('SET_LOCATION')
+const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
+const deleteSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
 
 // Public actions
-export const forgetPlace = createAction('FORGET_PLACE')
-export const rememberPlace = createAction('REMEMBER_PLACE')
-export const forgetStop = createAction('FORGET_STOP')
-export const rememberStop = createAction('REMEMBER_STOP')
+export const rememberPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
+export const forgetStop = createAction('DELETE_LOCAL_USER_STOP')
+export const rememberStop = createAction('REMEMBER_LOCAL_USER_STOP')
+
+/**
+ * Dispatches the action to delete a recent place or a saved place from localStorage
+ */
+export function forgetPlace (placeId) {
+  return function (dispatch, getState) {
+    // Recent place IDs contain the string literal 'recent'.
+    if (placeId.indexOf('recent') !== -1) {
+      dispatch(deleteRecentPlace(placeId))
+    } else {
+      dispatch(deleteSavedPlace(placeId))
+    }
+  }
+}
 
 export function clearLocation (payload) {
   return function (dispatch, getState) {
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 7e93996d9..11496ecf8 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -501,12 +501,11 @@ export function saveUserPlace (placeToSave, placeIndex) {
 /**
  * Delete the place data at the specified index for the logged-in user.
  */
-export function deleteUserPlace (place) {
+export function deleteUserPlace (placeIndex) {
   return function (dispatch, getState) {
     if (!confirm('Would you like to remove this place?')) return
 
     const { loggedInUser } = getState().user
-    const placeIndex = loggedInUser.savedLocations.indexOf(place)
     loggedInUser.savedLocations.splice(placeIndex, 1)
 
     dispatch(createOrUpdateUser(loggedInUser, true))
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index fbe6a9f6e..cfbab141e 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -14,6 +14,7 @@ import MainPanelPlace from '../user/places/main-panel-place'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { PLACES_PATH } from '../../util/constants'
 import { isHome, isWork } from '../../util/user'
+
 import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
@@ -22,7 +23,8 @@ class UserSettings extends Component {
   _disableTracking = () => {
     const { localUser, localUserTripRequests, toggleTracking } = this.props
     if (!localUser.storeTripHistory) return
-    const hasRecents = localUser.recentPlaces.length > 0 || localUserTripRequests.length > 0
+    const hasRecents = (localUser.recentPlaces && localUser.recentPlaces.length > 0) ||
+      (localUserTripRequests && localUserTripRequests.length > 0)
     // If user has recents and does not confirm deletion, return without doing
     // anything.
     if (hasRecents && !window.confirm('You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?')) {
@@ -74,8 +76,12 @@ class UserSettings extends Component {
       trueUser
     } = this.props
 
-    if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
-      const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
+    if (loggedInUser && persistenceStrategy === 'otp_middleware') { // use constants
+      // Add id attribute using index, that will be used to call deleteUserPlace.
+      const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
+        ...loc,
+        id: index
+      }))
       const savedPlacesHeader = (
         <>
           My saved places (
@@ -114,12 +120,14 @@ class UserSettings extends Component {
         .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
       return (
         <div className='user-settings'>
+          {/* Sorted locations are shown regardless of tracking. */}
           <Places
             onDelete={deleteLocalUserSavedPlace}
             places={sortedLocations}
             separator={false}
           />
 
+          {/* Favorite stops are shown regardless of tracking. */}
           <Places
             header='Favorite stops'
             onDelete={deleteLocalUserStop}
@@ -128,11 +136,13 @@ class UserSettings extends Component {
             textIfEmpty='No favorite stops'
           />
 
-          {storeTripHistory && <Places
-            header='Recent places'
-            onDelete={deleteLocalUserRecentPlace}
-            places={recentPlaces}
-          />}
+          {storeTripHistory && (
+            <Places
+              header='Recent places'
+              onDelete={deleteLocalUserRecentPlace}
+              places={recentPlaces}
+            />
+          )}
 
           <RecentTrips
             forgetSearch={forgetSearch}
@@ -183,26 +193,29 @@ const Places = ({
   places,
   separator = true,
   textIfEmpty
-}) => (
-  <>
-    {separator && <hr />}
-    {header && <div className='section-header'>{header}</div>}
-    <UnpaddedList>
-      {places.length > 0
-        ? places.map((location, index) => (
-          <PlaceShortcut
-            key={location.id || index}
-            onDelete={onDelete}
-            onView={onView}
-            path={basePath && `${basePath}/${index}`}
-            place={location}
-          />
-        ))
-        : textIfEmpty && <small>{textIfEmpty}</small>
-      }
-    </UnpaddedList>
-  </>
-)
+}) => {
+  const shouldRender = textIfEmpty || (places && places.length > 0)
+  return shouldRender && (
+    <>
+      {separator && <hr />}
+      {header && <div className='section-header'>{header}</div>}
+      <UnpaddedList>
+        {places.length > 0
+          ? places.map((location, index) => (
+            <PlaceShortcut
+              key={location.id || index}
+              onDelete={onDelete}
+              onView={onView}
+              path={basePath && `${basePath}/${index}`}
+              place={location}
+            />
+          ))
+          : textIfEmpty && <small>{textIfEmpty}</small>
+        }
+      </UnpaddedList>
+    </>
+  )
+}
 
 /**
  * Wraps MainPanelPlace for recent trip requests.
@@ -244,7 +257,9 @@ class TripRequest extends Component {
  * Renders a list of recent trip requests, most recent first,
  * if permitted by user.
  */
-const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests, user }) => (
+const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user }) => (
+  // Note: tripRequests can be undefined,
+  // so we have to coerce it to null to make a valid render.
   user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
     <div className='recent-searches-container'>
       <hr />
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index 0e85d3d80..e41526550 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -21,10 +21,11 @@ const mapStateToProps = (state, ownProps) => {
   // Intermediate places doesn't trigger a re-plan, so for now default to
   // current query. FIXME: Determine with TriMet if this is desired behavior.
   const places = state.otp.currentQuery.intermediatePlaces.filter(p => p)
+  const user = state.user.trueUser
   return {
     fromLocation: from,
     intermediatePlaces: places,
-    locations: state.otp.user.locations,
+    locations: user ? user.savedLocations : [],
     showUserSettings,
     toLocation: to,
     visible: true
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 963ac9589..452a4bb46 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -44,17 +44,17 @@ class PlaceShortcut extends Component {
   }
 
   _onView = () => {
-    const { place, onView } = this.props
+    const { onView, place } = this.props
     onView({ stopId: place.id })
   }
 
   _onDelete = () => {
-    const { place, onDelete } = this.props
-    onDelete(place)
+    const { onDelete, place } = this.props
+    onDelete(place.id)
   }
 
   render () {
-    const { place, onDelete, onView, path } = this.props
+    const { onDelete, onView, path, place } = this.props
     // localStorage places (where path is not provided) need to be converted,
     // so the correct fields are passed to MainPanelPlace.
     const convertedPlace = path ? place : convertToPlace(place)
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 5efc37347..e7c1bcd45 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -356,7 +356,7 @@ const mapStateToProps = (state, ownProps) => {
   const stopViewerConfig = getStopViewerConfig(state.otp)
   return {
     autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
-    favoriteStops: state.otp.user.favoriteStops,
+    favoriteStops: state.user.localUser.favoriteStops,
     homeTimezone: state.otp.config.homeTimezone,
     viewedStop: state.otp.ui.viewedStop,
     showUserSettings,
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 559c10bf0..0fb75cb82 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -9,7 +9,6 @@ import {getTimestamp} from '../util/state'
 import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { isTransit, getTransitModes } = coreUtils.itinerary
-const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
 const {
   ensureSingleAccessMode,
@@ -444,95 +443,6 @@ function createOtpReducer (config, initialQuery) {
       case 'STORE_DEFAULT_SETTINGS':
         storeItem('defaultQuery', action.payload)
         return update(state, { user: { defaults: { $set: action.payload } } })
-      case 'FORGET_PLACE': {
-        // Payload is the place ID.
-        // Recent place IDs contain the string literal 'recent'.
-        if (action.payload.indexOf('recent') !== -1) {
-          const recentPlaces = clone(state.user.recentPlaces)
-          // Remove recent from list of recent places
-          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
-          recentPlaces.splice(removeIndex, 1)
-          storeItem('recent', recentPlaces)
-          return removeIndex !== -1
-            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
-            : state
-        } else {
-          const locations = clone(state.user.locations)
-          const removeIndex = locations.findIndex(l => l.id === action.payload)
-          removeItem(action.payload)
-          return removeIndex !== -1
-            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
-            : state
-        }
-      }
-      case 'REMEMBER_PLACE': {
-        const { location, type } = action.payload
-        switch (type) {
-          case 'recent': {
-            const recentPlaces = clone(state.user.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
-            // Replace recent place if duplicate found or add to list.
-            if (index !== -1) recentPlaces.splice(index, 1, location)
-            else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
-            // Only keep up to 5 recent locations
-            // FIXME: Check for duplicates
-            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
-              sortedPlaces.splice(MAX_RECENT_STORAGE)
-            }
-            storeItem('recent', recentPlaces)
-            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
-          }
-          default: {
-            const locations = clone(state.user.locations)
-            // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
-            if (index !== -1) locations.splice(index, 1, location)
-            else locations.push(location)
-            storeItem(type, location)
-            return update(state, { user: { locations: { $set: locations } } })
-          }
-        }
-      }
-      case 'FORGET_STOP': {
-        // Payload is the stop ID.
-        const favoriteStops = clone(state.user.favoriteStops)
-        // Remove stop from favorites
-        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
-        favoriteStops.splice(removeIndex, 1)
-        storeItem('favoriteStops', favoriteStops)
-        return removeIndex !== -1
-          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
-          : state
-      }
-      case 'REMEMBER_STOP': {
-        // Payload is stop data. We want to avoid saving other attributes that
-        // might be contained there (like lists of patterns).
-        const { id, name, lat, lon } = action.payload
-        const stop = {
-          type: 'stop',
-          icon: 'bus',
-          id,
-          name,
-          lat,
-          lon
-        }
-        const favoriteStops = clone(state.user.favoriteStops)
-        if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
-          return state
-        }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
-        // Do nothing if duplicate stop found.
-        if (index !== -1) {
-          console.warn(`Stop with id ${stop.id} already exists in favorites.`)
-          return state
-        } else {
-          favoriteStops.unshift(stop)
-        }
-        storeItem('favoriteStops', favoriteStops)
-        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
-      }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
@@ -540,23 +450,6 @@ function createOtpReducer (config, initialQuery) {
         return update(state, { user: {
           expandAdvanced: { $set: action.payload }
         } })
-      case 'TOGGLE_TRACKING': {
-        storeItem('trackRecent', action.payload)
-        let recentPlaces = clone(state.user.recentPlaces)
-        let recentSearches = clone(state.user.recentSearches)
-        if (!action.payload) {
-          // If user disables tracking, remove recent searches and locations.
-          recentPlaces = []
-          recentSearches = []
-          removeItem('recent')
-          removeItem('recentSearches')
-        }
-        return update(state, { user: {
-          trackRecent: { $set: action.payload },
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches }
-        } })
-      }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
         const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index b5451561e..1f87f5ac0 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -4,6 +4,7 @@ import update from 'immutability-helper'
 import coreUtils from '@opentripplanner/core-utils'
 
 const { getItem, removeItem, storeItem } = coreUtils.storage
+const { matchLatLon } = coreUtils.map
 
 const MAX_RECENT_STORAGE = 5
 
@@ -49,10 +50,10 @@ function loadUserFromLocalStoragePerConfig (config) {
         expandAdvanced, // localUser only
         favoriteStops, // localUser only - attn: legacy location format
         recentPlaces, // localUser only - attn: legacy location format
-        savedLocations: locations, // attn: legacy location format
+        savedLocations: locations,
         storeTripHistory: trackRecent
       },
-      localUserTripRequests: recentSearches // attn: legacy search format
+      localUserTripRequests: recentSearches
     }
   }
 
@@ -130,10 +131,8 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_RECENT_PLACE': {
-        if (!confirm('Would you like to remove this place?')) return state
-
-        // This is used to delete a local user's recent location.
-        const placeId = action.payload.id
+        // This is used to delete the local user's recent location that matches the provided id.
+        const placeId = action.payload
         const recentPlaces = clone(state.localUser.recentPlaces)
         // Remove recent from list of recent places
         const removeIndex = recentPlaces.findIndex(l => l.id === placeId)
@@ -145,10 +144,9 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_SAVED_PLACE': {
-        if (!confirm('Would you like to remove this place?')) return state
-
-        // This is used to delete the local user's Home and Work (or other built-in) locations.
-        const placeId = action.payload.id
+        // This is used to delete the local user's Home and Work (or other built-in)
+        // location that matches the provided id.
+        const placeId = action.payload
         const removeIndex = state.localUser.savedLocations.findIndex(l => l.id === placeId)
         removeItem(placeId)
         return removeIndex !== -1
@@ -157,7 +155,8 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_STOP': {
-        const stopId = action.payload.id
+        // This is used to delete the local user's favorite stop that matches the provided id.
+        const stopId = action.payload
         const favoriteStops = clone(state.localUser.favoriteStops)
         // Remove stop from favorites
         const removeIndex = favoriteStops.findIndex(l => l.id === stopId)
@@ -167,7 +166,7 @@ function createUserReducer (config) {
           ? update(state, { localUser: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
           : state
       }
-      case 'REMEMBER_STOP': {
+      case 'REMEMBER_LOCAL_USER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that
         // might be contained there (like lists of patterns).
         const { id, name, lat, lon } = action.payload
@@ -196,6 +195,55 @@ function createUserReducer (config) {
         return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
       }
 
+      case 'REMEMBER_LOCAL_USER_PLACE': {
+        const { location, type } = action.payload
+        switch (type) {
+          case 'recent': {
+            const recentPlaces = clone(state.localUser.recentPlaces)
+            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            // Replace recent place if duplicate found or add to list.
+            if (index !== -1) recentPlaces.splice(index, 1, location)
+            else recentPlaces.push(location)
+            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            // Only keep up to 5 recent locations
+            // FIXME: Check for duplicates
+            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
+              sortedPlaces.splice(MAX_RECENT_STORAGE)
+            }
+            storeItem('recent', recentPlaces)
+            return update(state, { localUser: { recentPlaces: { $set: sortedPlaces } } })
+          }
+          default: {
+            const locations = clone(state.localUser.savedLocations)
+            // Determine if location type (e.g., home or work) already exists in list
+            const index = locations.findIndex(l => l.type === type)
+            if (index !== -1) locations.splice(index, 1, location)
+            else locations.push(location)
+            storeItem(type, location)
+            return update(state, { localUser: { locations: { $set: locations } } })
+          }
+        }
+      }
+
+      case 'TOGGLE_TRACKING': {
+        storeItem('trackRecent', action.payload)
+        let recentPlaces = clone(state.localUser.recentPlaces)
+        let recentSearches = clone(state.localUser.recentSearches)
+        if (!action.payload) {
+          // If user disables tracking, remove recent searches and locations.
+          recentPlaces = []
+          recentSearches = []
+          removeItem('recent')
+          removeItem('recentSearches')
+        }
+        return update(state, {
+          localUser: {
+            recentPlaces: { $set: recentPlaces },
+            storeTripHistory: { $set: action.payload }
+          },
+          localUserTripRequests: { $set: recentSearches } })
+      }
+
       default:
         return state
     }

From fef91f66de453ff1ccfd9cbcd0537e0bafe1c157 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 22 Feb 2021 15:17:16 -0500
Subject: [PATCH 017/270] Revert "refactor(user reducer): Move more actions
 from top to user reducer."

This reverts commit f63acdd6f7b788265ab79ebb21dc6c0d2eefda12.
---
 lib/actions/map.js                            |  23 +---
 lib/actions/user.js                           |   3 +-
 lib/components/form/user-settings.js          |  73 +++++-------
 .../map/connected-endpoints-overlay.js        |   3 +-
 lib/components/user/places/place-shortcut.js  |   8 +-
 lib/components/viewers/stop-viewer.js         |   2 +-
 lib/reducers/create-otp-reducer.js            | 107 ++++++++++++++++++
 lib/reducers/create-user-reducer.js           |  72 ++----------
 8 files changed, 160 insertions(+), 131 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 9fdeda78b..26cbcbcef 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -19,27 +19,12 @@ import { clearActiveSearch } from './form'
 // Private actions
 const clearingLocation = createAction('CLEAR_LOCATION')
 const settingLocation = createAction('SET_LOCATION')
-const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
-const deleteSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
 
 // Public actions
-export const rememberPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
-export const forgetStop = createAction('DELETE_LOCAL_USER_STOP')
-export const rememberStop = createAction('REMEMBER_LOCAL_USER_STOP')
-
-/**
- * Dispatches the action to delete a recent place or a saved place from localStorage
- */
-export function forgetPlace (placeId) {
-  return function (dispatch, getState) {
-    // Recent place IDs contain the string literal 'recent'.
-    if (placeId.indexOf('recent') !== -1) {
-      dispatch(deleteRecentPlace(placeId))
-    } else {
-      dispatch(deleteSavedPlace(placeId))
-    }
-  }
-}
+export const forgetPlace = createAction('FORGET_PLACE')
+export const rememberPlace = createAction('REMEMBER_PLACE')
+export const forgetStop = createAction('FORGET_STOP')
+export const rememberStop = createAction('REMEMBER_STOP')
 
 export function clearLocation (payload) {
   return function (dispatch, getState) {
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 11496ecf8..7e93996d9 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -501,11 +501,12 @@ export function saveUserPlace (placeToSave, placeIndex) {
 /**
  * Delete the place data at the specified index for the logged-in user.
  */
-export function deleteUserPlace (placeIndex) {
+export function deleteUserPlace (place) {
   return function (dispatch, getState) {
     if (!confirm('Would you like to remove this place?')) return
 
     const { loggedInUser } = getState().user
+    const placeIndex = loggedInUser.savedLocations.indexOf(place)
     loggedInUser.savedLocations.splice(placeIndex, 1)
 
     dispatch(createOrUpdateUser(loggedInUser, true))
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index cfbab141e..fbe6a9f6e 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -14,7 +14,6 @@ import MainPanelPlace from '../user/places/main-panel-place'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { PLACES_PATH } from '../../util/constants'
 import { isHome, isWork } from '../../util/user'
-
 import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
@@ -23,8 +22,7 @@ class UserSettings extends Component {
   _disableTracking = () => {
     const { localUser, localUserTripRequests, toggleTracking } = this.props
     if (!localUser.storeTripHistory) return
-    const hasRecents = (localUser.recentPlaces && localUser.recentPlaces.length > 0) ||
-      (localUserTripRequests && localUserTripRequests.length > 0)
+    const hasRecents = localUser.recentPlaces.length > 0 || localUserTripRequests.length > 0
     // If user has recents and does not confirm deletion, return without doing
     // anything.
     if (hasRecents && !window.confirm('You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?')) {
@@ -76,12 +74,8 @@ class UserSettings extends Component {
       trueUser
     } = this.props
 
-    if (loggedInUser && persistenceStrategy === 'otp_middleware') { // use constants
-      // Add id attribute using index, that will be used to call deleteUserPlace.
-      const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
-        ...loc,
-        id: index
-      }))
+    if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
+      const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
       const savedPlacesHeader = (
         <>
           My saved places (
@@ -120,14 +114,12 @@ class UserSettings extends Component {
         .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
       return (
         <div className='user-settings'>
-          {/* Sorted locations are shown regardless of tracking. */}
           <Places
             onDelete={deleteLocalUserSavedPlace}
             places={sortedLocations}
             separator={false}
           />
 
-          {/* Favorite stops are shown regardless of tracking. */}
           <Places
             header='Favorite stops'
             onDelete={deleteLocalUserStop}
@@ -136,13 +128,11 @@ class UserSettings extends Component {
             textIfEmpty='No favorite stops'
           />
 
-          {storeTripHistory && (
-            <Places
-              header='Recent places'
-              onDelete={deleteLocalUserRecentPlace}
-              places={recentPlaces}
-            />
-          )}
+          {storeTripHistory && <Places
+            header='Recent places'
+            onDelete={deleteLocalUserRecentPlace}
+            places={recentPlaces}
+          />}
 
           <RecentTrips
             forgetSearch={forgetSearch}
@@ -193,29 +183,26 @@ const Places = ({
   places,
   separator = true,
   textIfEmpty
-}) => {
-  const shouldRender = textIfEmpty || (places && places.length > 0)
-  return shouldRender && (
-    <>
-      {separator && <hr />}
-      {header && <div className='section-header'>{header}</div>}
-      <UnpaddedList>
-        {places.length > 0
-          ? places.map((location, index) => (
-            <PlaceShortcut
-              key={location.id || index}
-              onDelete={onDelete}
-              onView={onView}
-              path={basePath && `${basePath}/${index}`}
-              place={location}
-            />
-          ))
-          : textIfEmpty && <small>{textIfEmpty}</small>
-        }
-      </UnpaddedList>
-    </>
-  )
-}
+}) => (
+  <>
+    {separator && <hr />}
+    {header && <div className='section-header'>{header}</div>}
+    <UnpaddedList>
+      {places.length > 0
+        ? places.map((location, index) => (
+          <PlaceShortcut
+            key={location.id || index}
+            onDelete={onDelete}
+            onView={onView}
+            path={basePath && `${basePath}/${index}`}
+            place={location}
+          />
+        ))
+        : textIfEmpty && <small>{textIfEmpty}</small>
+      }
+    </UnpaddedList>
+  </>
+)
 
 /**
  * Wraps MainPanelPlace for recent trip requests.
@@ -257,9 +244,7 @@ class TripRequest extends Component {
  * Renders a list of recent trip requests, most recent first,
  * if permitted by user.
  */
-const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user }) => (
-  // Note: tripRequests can be undefined,
-  // so we have to coerce it to null to make a valid render.
+const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests, user }) => (
   user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
     <div className='recent-searches-container'>
       <hr />
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index e41526550..0e85d3d80 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -21,11 +21,10 @@ const mapStateToProps = (state, ownProps) => {
   // Intermediate places doesn't trigger a re-plan, so for now default to
   // current query. FIXME: Determine with TriMet if this is desired behavior.
   const places = state.otp.currentQuery.intermediatePlaces.filter(p => p)
-  const user = state.user.trueUser
   return {
     fromLocation: from,
     intermediatePlaces: places,
-    locations: user ? user.savedLocations : [],
+    locations: state.otp.user.locations,
     showUserSettings,
     toLocation: to,
     visible: true
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 452a4bb46..963ac9589 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -44,17 +44,17 @@ class PlaceShortcut extends Component {
   }
 
   _onView = () => {
-    const { onView, place } = this.props
+    const { place, onView } = this.props
     onView({ stopId: place.id })
   }
 
   _onDelete = () => {
-    const { onDelete, place } = this.props
-    onDelete(place.id)
+    const { place, onDelete } = this.props
+    onDelete(place)
   }
 
   render () {
-    const { onDelete, onView, path, place } = this.props
+    const { place, onDelete, onView, path } = this.props
     // localStorage places (where path is not provided) need to be converted,
     // so the correct fields are passed to MainPanelPlace.
     const convertedPlace = path ? place : convertToPlace(place)
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index e7c1bcd45..5efc37347 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -356,7 +356,7 @@ const mapStateToProps = (state, ownProps) => {
   const stopViewerConfig = getStopViewerConfig(state.otp)
   return {
     autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
-    favoriteStops: state.user.localUser.favoriteStops,
+    favoriteStops: state.otp.user.favoriteStops,
     homeTimezone: state.otp.config.homeTimezone,
     viewedStop: state.otp.ui.viewedStop,
     showUserSettings,
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 0fb75cb82..559c10bf0 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -9,6 +9,7 @@ import {getTimestamp} from '../util/state'
 import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { isTransit, getTransitModes } = coreUtils.itinerary
+const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
 const {
   ensureSingleAccessMode,
@@ -443,6 +444,95 @@ function createOtpReducer (config, initialQuery) {
       case 'STORE_DEFAULT_SETTINGS':
         storeItem('defaultQuery', action.payload)
         return update(state, { user: { defaults: { $set: action.payload } } })
+      case 'FORGET_PLACE': {
+        // Payload is the place ID.
+        // Recent place IDs contain the string literal 'recent'.
+        if (action.payload.indexOf('recent') !== -1) {
+          const recentPlaces = clone(state.user.recentPlaces)
+          // Remove recent from list of recent places
+          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
+          recentPlaces.splice(removeIndex, 1)
+          storeItem('recent', recentPlaces)
+          return removeIndex !== -1
+            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
+            : state
+        } else {
+          const locations = clone(state.user.locations)
+          const removeIndex = locations.findIndex(l => l.id === action.payload)
+          removeItem(action.payload)
+          return removeIndex !== -1
+            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
+            : state
+        }
+      }
+      case 'REMEMBER_PLACE': {
+        const { location, type } = action.payload
+        switch (type) {
+          case 'recent': {
+            const recentPlaces = clone(state.user.recentPlaces)
+            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            // Replace recent place if duplicate found or add to list.
+            if (index !== -1) recentPlaces.splice(index, 1, location)
+            else recentPlaces.push(location)
+            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            // Only keep up to 5 recent locations
+            // FIXME: Check for duplicates
+            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
+              sortedPlaces.splice(MAX_RECENT_STORAGE)
+            }
+            storeItem('recent', recentPlaces)
+            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
+          }
+          default: {
+            const locations = clone(state.user.locations)
+            // Determine if location type (e.g., home or work) already exists in list
+            const index = locations.findIndex(l => l.type === type)
+            if (index !== -1) locations.splice(index, 1, location)
+            else locations.push(location)
+            storeItem(type, location)
+            return update(state, { user: { locations: { $set: locations } } })
+          }
+        }
+      }
+      case 'FORGET_STOP': {
+        // Payload is the stop ID.
+        const favoriteStops = clone(state.user.favoriteStops)
+        // Remove stop from favorites
+        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
+        favoriteStops.splice(removeIndex, 1)
+        storeItem('favoriteStops', favoriteStops)
+        return removeIndex !== -1
+          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
+          : state
+      }
+      case 'REMEMBER_STOP': {
+        // Payload is stop data. We want to avoid saving other attributes that
+        // might be contained there (like lists of patterns).
+        const { id, name, lat, lon } = action.payload
+        const stop = {
+          type: 'stop',
+          icon: 'bus',
+          id,
+          name,
+          lat,
+          lon
+        }
+        const favoriteStops = clone(state.user.favoriteStops)
+        if (favoriteStops.length >= MAX_RECENT_STORAGE) {
+          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          return state
+        }
+        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        // Do nothing if duplicate stop found.
+        if (index !== -1) {
+          console.warn(`Stop with id ${stop.id} already exists in favorites.`)
+          return state
+        } else {
+          favoriteStops.unshift(stop)
+        }
+        storeItem('favoriteStops', favoriteStops)
+        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
+      }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
@@ -450,6 +540,23 @@ function createOtpReducer (config, initialQuery) {
         return update(state, { user: {
           expandAdvanced: { $set: action.payload }
         } })
+      case 'TOGGLE_TRACKING': {
+        storeItem('trackRecent', action.payload)
+        let recentPlaces = clone(state.user.recentPlaces)
+        let recentSearches = clone(state.user.recentSearches)
+        if (!action.payload) {
+          // If user disables tracking, remove recent searches and locations.
+          recentPlaces = []
+          recentSearches = []
+          removeItem('recent')
+          removeItem('recentSearches')
+        }
+        return update(state, { user: {
+          trackRecent: { $set: action.payload },
+          recentPlaces: { $set: recentPlaces },
+          recentSearches: { $set: recentSearches }
+        } })
+      }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
         const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 1f87f5ac0..b5451561e 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -4,7 +4,6 @@ import update from 'immutability-helper'
 import coreUtils from '@opentripplanner/core-utils'
 
 const { getItem, removeItem, storeItem } = coreUtils.storage
-const { matchLatLon } = coreUtils.map
 
 const MAX_RECENT_STORAGE = 5
 
@@ -50,10 +49,10 @@ function loadUserFromLocalStoragePerConfig (config) {
         expandAdvanced, // localUser only
         favoriteStops, // localUser only - attn: legacy location format
         recentPlaces, // localUser only - attn: legacy location format
-        savedLocations: locations,
+        savedLocations: locations, // attn: legacy location format
         storeTripHistory: trackRecent
       },
-      localUserTripRequests: recentSearches
+      localUserTripRequests: recentSearches // attn: legacy search format
     }
   }
 
@@ -131,8 +130,10 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_RECENT_PLACE': {
-        // This is used to delete the local user's recent location that matches the provided id.
-        const placeId = action.payload
+        if (!confirm('Would you like to remove this place?')) return state
+
+        // This is used to delete a local user's recent location.
+        const placeId = action.payload.id
         const recentPlaces = clone(state.localUser.recentPlaces)
         // Remove recent from list of recent places
         const removeIndex = recentPlaces.findIndex(l => l.id === placeId)
@@ -144,9 +145,10 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_SAVED_PLACE': {
-        // This is used to delete the local user's Home and Work (or other built-in)
-        // location that matches the provided id.
-        const placeId = action.payload
+        if (!confirm('Would you like to remove this place?')) return state
+
+        // This is used to delete the local user's Home and Work (or other built-in) locations.
+        const placeId = action.payload.id
         const removeIndex = state.localUser.savedLocations.findIndex(l => l.id === placeId)
         removeItem(placeId)
         return removeIndex !== -1
@@ -155,8 +157,7 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_STOP': {
-        // This is used to delete the local user's favorite stop that matches the provided id.
-        const stopId = action.payload
+        const stopId = action.payload.id
         const favoriteStops = clone(state.localUser.favoriteStops)
         // Remove stop from favorites
         const removeIndex = favoriteStops.findIndex(l => l.id === stopId)
@@ -166,7 +167,7 @@ function createUserReducer (config) {
           ? update(state, { localUser: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
           : state
       }
-      case 'REMEMBER_LOCAL_USER_STOP': {
+      case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that
         // might be contained there (like lists of patterns).
         const { id, name, lat, lon } = action.payload
@@ -195,55 +196,6 @@ function createUserReducer (config) {
         return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
       }
 
-      case 'REMEMBER_LOCAL_USER_PLACE': {
-        const { location, type } = action.payload
-        switch (type) {
-          case 'recent': {
-            const recentPlaces = clone(state.localUser.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
-            // Replace recent place if duplicate found or add to list.
-            if (index !== -1) recentPlaces.splice(index, 1, location)
-            else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
-            // Only keep up to 5 recent locations
-            // FIXME: Check for duplicates
-            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
-              sortedPlaces.splice(MAX_RECENT_STORAGE)
-            }
-            storeItem('recent', recentPlaces)
-            return update(state, { localUser: { recentPlaces: { $set: sortedPlaces } } })
-          }
-          default: {
-            const locations = clone(state.localUser.savedLocations)
-            // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
-            if (index !== -1) locations.splice(index, 1, location)
-            else locations.push(location)
-            storeItem(type, location)
-            return update(state, { localUser: { locations: { $set: locations } } })
-          }
-        }
-      }
-
-      case 'TOGGLE_TRACKING': {
-        storeItem('trackRecent', action.payload)
-        let recentPlaces = clone(state.localUser.recentPlaces)
-        let recentSearches = clone(state.localUser.recentSearches)
-        if (!action.payload) {
-          // If user disables tracking, remove recent searches and locations.
-          recentPlaces = []
-          recentSearches = []
-          removeItem('recent')
-          removeItem('recentSearches')
-        }
-        return update(state, {
-          localUser: {
-            recentPlaces: { $set: recentPlaces },
-            storeTripHistory: { $set: action.payload }
-          },
-          localUserTripRequests: { $set: recentSearches } })
-      }
-
       default:
         return state
     }

From 41b39796f7597e7fd8067f320f7c9ae4cfe5cb73 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 22 Feb 2021 16:29:20 -0500
Subject: [PATCH 018/270] refactor(user-settings): Delete recent search,
 refactor delete places.

---
 lib/actions/user.js                          |  5 +-
 lib/components/form/user-settings.js         | 61 ++++++++++++--------
 lib/components/user/places/favorite-place.js |  2 +-
 lib/components/user/places/place-shortcut.js |  8 +--
 lib/components/user/places/place.js          |  2 +-
 lib/components/viewers/stop-viewer.js        |  2 +-
 lib/reducers/create-otp-reducer.js           | 49 ----------------
 lib/reducers/create-user-reducer.js          | 37 +++++++-----
 8 files changed, 70 insertions(+), 96 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 7e93996d9..f31db421e 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -34,7 +34,7 @@ const setitineraryExistence = createAction('SET_ITINERARY_EXISTENCE')
 // localStorage user actions
 export const deleteLocalUserRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
 export const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
-export const deleteLocalUserStop = createAction('DELETE_LOCAL_USER_STOP')
+export const deleteLocalUserStop = createAction('FORGET_STOP')
 
 function createNewUser (auth0User) {
   return {
@@ -501,12 +501,11 @@ export function saveUserPlace (placeToSave, placeIndex) {
 /**
  * Delete the place data at the specified index for the logged-in user.
  */
-export function deleteUserPlace (place) {
+export function deleteUserPlace (placeIndex) {
   return function (dispatch, getState) {
     if (!confirm('Would you like to remove this place?')) return
 
     const { loggedInUser } = getState().user
-    const placeIndex = loggedInUser.savedLocations.indexOf(place)
     loggedInUser.savedLocations.splice(placeIndex, 1)
 
     dispatch(createOrUpdateUser(loggedInUser, true))
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index fbe6a9f6e..28346b84f 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -22,7 +22,9 @@ class UserSettings extends Component {
   _disableTracking = () => {
     const { localUser, localUserTripRequests, toggleTracking } = this.props
     if (!localUser.storeTripHistory) return
-    const hasRecents = localUser.recentPlaces.length > 0 || localUserTripRequests.length > 0
+    const hasRecents = (localUser.recentPlaces && localUser.recentPlaces.length > 0) ||
+      (localUserTripRequests && localUserTripRequests.length > 0)
+
     // If user has recents and does not confirm deletion, return without doing
     // anything.
     if (hasRecents && !window.confirm('You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?')) {
@@ -74,8 +76,12 @@ class UserSettings extends Component {
       trueUser
     } = this.props
 
-    if (loggedInUser && persistenceStrategy === 'otp_middleware') { //use constants
-      const loggedInUserLocations = loggedInUser ? loggedInUser.savedLocations : []
+    if (loggedInUser && persistenceStrategy === 'otp_middleware') { // use constants
+      // Add id attribute using index, that will be used to call deleteUserPlace.
+      const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
+        ...loc,
+        id: index
+      }))
       const savedPlacesHeader = (
         <>
           My saved places (
@@ -114,12 +120,14 @@ class UserSettings extends Component {
         .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
       return (
         <div className='user-settings'>
+          {/* Sorted locations are shown regardless of tracking. */}
           <Places
             onDelete={deleteLocalUserSavedPlace}
             places={sortedLocations}
             separator={false}
           />
 
+          {/* Favorite stops are shown regardless of tracking. */}
           <Places
             header='Favorite stops'
             onDelete={deleteLocalUserStop}
@@ -183,26 +191,29 @@ const Places = ({
   places,
   separator = true,
   textIfEmpty
-}) => (
-  <>
-    {separator && <hr />}
-    {header && <div className='section-header'>{header}</div>}
-    <UnpaddedList>
-      {places.length > 0
-        ? places.map((location, index) => (
-          <PlaceShortcut
-            key={location.id || index}
-            onDelete={onDelete}
-            onView={onView}
-            path={basePath && `${basePath}/${index}`}
-            place={location}
-          />
-        ))
-        : textIfEmpty && <small>{textIfEmpty}</small>
-      }
-    </UnpaddedList>
-  </>
-)
+}) => {
+  const shouldRender = textIfEmpty || (places && places.length > 0)
+  return shouldRender && (
+    <>
+      {separator && <hr />}
+      {header && <div className='section-header'>{header}</div>}
+      <UnpaddedList>
+        {places.length > 0
+          ? places.map((location, index) => (
+            <PlaceShortcut
+              key={location.id || index}
+              onDelete={onDelete}
+              onView={onView}
+              path={basePath && `${basePath}/${index}`}
+              place={location}
+            />
+          ))
+          : textIfEmpty && <small>{textIfEmpty}</small>
+        }
+      </UnpaddedList>
+    </>
+  )
+}
 
 /**
  * Wraps MainPanelPlace for recent trip requests.
@@ -244,7 +255,9 @@ class TripRequest extends Component {
  * Renders a list of recent trip requests, most recent first,
  * if permitted by user.
  */
-const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests, user }) => (
+const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user }) => (
+  // Note: tripRequests can be undefined,
+  // so we have to coerce it to null to make a valid render.
   user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
     <div className='recent-searches-container'>
       <hr />
diff --git a/lib/components/user/places/favorite-place.js b/lib/components/user/places/favorite-place.js
index f75946552..b8e587d68 100644
--- a/lib/components/user/places/favorite-place.js
+++ b/lib/components/user/places/favorite-place.js
@@ -55,7 +55,7 @@ const StyledPlace = styled(Place)`
 class FavoritePlace extends Component {
   _handleDelete = () => {
     const { deleteUserPlace, place } = this.props
-    deleteUserPlace(place)
+    deleteUserPlace(place.id)
   }
 
   render () {
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 963ac9589..452a4bb46 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -44,17 +44,17 @@ class PlaceShortcut extends Component {
   }
 
   _onView = () => {
-    const { place, onView } = this.props
+    const { onView, place } = this.props
     onView({ stopId: place.id })
   }
 
   _onDelete = () => {
-    const { place, onDelete } = this.props
-    onDelete(place)
+    const { onDelete, place } = this.props
+    onDelete(place.id)
   }
 
   render () {
-    const { place, onDelete, onView, path } = this.props
+    const { onDelete, onView, path, place } = this.props
     // localStorage places (where path is not provided) need to be converted,
     // so the correct fields are passed to MainPanelPlace.
     const convertedPlace = path ? place : convertToPlace(place)
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 544de0f01..08ad7677d 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -63,7 +63,7 @@ export function getActionsForPlace (place, onDelete, onView) {
   if (onView && place.type === 'stop') {
     actions.push(viewAction)
   }
-  if (onDelete && (!isFixed || place.address)) {
+  if (onDelete && !place.blank && (!isFixed || place.address)) {
     actions.push(deleteAction)
   }
 
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 5efc37347..e7c1bcd45 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -356,7 +356,7 @@ const mapStateToProps = (state, ownProps) => {
   const stopViewerConfig = getStopViewerConfig(state.otp)
   return {
     autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
-    favoriteStops: state.otp.user.favoriteStops,
+    favoriteStops: state.user.localUser.favoriteStops,
     homeTimezone: state.otp.config.homeTimezone,
     viewedStop: state.otp.ui.viewedStop,
     showUserSettings,
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 559c10bf0..79259d81d 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -494,45 +494,6 @@ function createOtpReducer (config, initialQuery) {
           }
         }
       }
-      case 'FORGET_STOP': {
-        // Payload is the stop ID.
-        const favoriteStops = clone(state.user.favoriteStops)
-        // Remove stop from favorites
-        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
-        favoriteStops.splice(removeIndex, 1)
-        storeItem('favoriteStops', favoriteStops)
-        return removeIndex !== -1
-          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
-          : state
-      }
-      case 'REMEMBER_STOP': {
-        // Payload is stop data. We want to avoid saving other attributes that
-        // might be contained there (like lists of patterns).
-        const { id, name, lat, lon } = action.payload
-        const stop = {
-          type: 'stop',
-          icon: 'bus',
-          id,
-          name,
-          lat,
-          lon
-        }
-        const favoriteStops = clone(state.user.favoriteStops)
-        if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
-          return state
-        }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
-        // Do nothing if duplicate stop found.
-        if (index !== -1) {
-          console.warn(`Stop with id ${stop.id} already exists in favorites.`)
-          return state
-        } else {
-          favoriteStops.unshift(stop)
-        }
-        storeItem('favoriteStops', favoriteStops)
-        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
-      }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
@@ -570,16 +531,6 @@ function createOtpReducer (config, initialQuery) {
         }
         storeItem('recentSearches', sortedSearches)
         return update(state, { user: { searches: { $set: sortedSearches } } })
-      case 'FORGET_SEARCH': {
-        const recentSearches = clone(state.user.recentSearches)
-        const index = recentSearches.findIndex(l => l.id === action.payload)
-        // Remove item from list of recent searches
-        recentSearches.splice(index, 1)
-        storeItem('recentSearches', recentSearches)
-        return index !== -1
-          ? update(state, { user: { recentSearches: { $splice: [[index, 1]] } } })
-          : state
-      }
       case 'SET_AUTOPLAN':
         return update(state, {
           config: { autoPlan: { $set: action.payload.autoPlan } }
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index b5451561e..8f1f13eff 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -47,12 +47,12 @@ function loadUserFromLocalStoragePerConfig (config) {
     return {
       localUser: {
         expandAdvanced, // localUser only
-        favoriteStops, // localUser only - attn: legacy location format
-        recentPlaces, // localUser only - attn: legacy location format
-        savedLocations: locations, // attn: legacy location format
+        favoriteStops, // localUser only
+        recentPlaces, // localUser only
+        savedLocations: locations,
         storeTripHistory: trackRecent
       },
-      localUserTripRequests: recentSearches // attn: legacy search format
+      localUserTripRequests: recentSearches
     }
   }
 
@@ -132,8 +132,8 @@ function createUserReducer (config) {
       case 'DELETE_LOCAL_USER_RECENT_PLACE': {
         if (!confirm('Would you like to remove this place?')) return state
 
-        // This is used to delete a local user's recent location.
-        const placeId = action.payload.id
+        // This is used to delete the local user's recent location that matches the provided id.
+        const placeId = action.payload
         const recentPlaces = clone(state.localUser.recentPlaces)
         // Remove recent from list of recent places
         const removeIndex = recentPlaces.findIndex(l => l.id === placeId)
@@ -145,10 +145,9 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_SAVED_PLACE': {
-        if (!confirm('Would you like to remove this place?')) return state
-
-        // This is used to delete the local user's Home and Work (or other built-in) locations.
-        const placeId = action.payload.id
+        // This is used to delete the local user's Home and Work (or other built-in)
+        // location that matches the provided id.
+        const placeId = action.payload
         const removeIndex = state.localUser.savedLocations.findIndex(l => l.id === placeId)
         removeItem(placeId)
         return removeIndex !== -1
@@ -156,10 +155,11 @@ function createUserReducer (config) {
           : state
       }
 
-      case 'DELETE_LOCAL_USER_STOP': {
-        const stopId = action.payload.id
+      case 'FORGET_STOP': {
+        const stopId = action.payload
         const favoriteStops = clone(state.localUser.favoriteStops)
-        // Remove stop from favorites
+
+        // This is used to delete the local user's favorite stop that matches the provided id.
         const removeIndex = favoriteStops.findIndex(l => l.id === stopId)
         favoriteStops.splice(removeIndex, 1)
         storeItem('favoriteStops', favoriteStops)
@@ -196,6 +196,17 @@ function createUserReducer (config) {
         return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
       }
 
+      case 'FORGET_SEARCH': {
+        const recentSearches = clone(state.localUserTripRequests)
+        const index = recentSearches.findIndex(l => l.id === action.payload)
+        // Remove item from list of recent searches
+        recentSearches.splice(index, 1)
+        storeItem('recentSearches', recentSearches)
+        return index !== -1
+          ? update(state, { localUserTripRequests: { $splice: [[index, 1]] } })
+          : state
+      }
+
       default:
         return state
     }

From 5404e816cff8707a2df0a1f09c8f2a39f468cda5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 22 Feb 2021 17:00:53 -0500
Subject: [PATCH 019/270] refactor(BatchRoutingPanel): Integrate UserSettings.

---
 example.js                                |  8 +++----
 lib/components/app/batch-routing-panel.js | 29 +++++++++++++----------
 lib/components/form/user-settings.js      |  5 ++--
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/example.js b/example.js
index 1845f3ee5..48b3982bf 100644
--- a/example.js
+++ b/example.js
@@ -77,8 +77,8 @@ const store = createStore(
   combineReducers({
     callTaker: createCallTakerReducer(),
     otp: createOtpReducer(otpConfig, initialQuery),
-    user: createUserReducer(),
-    router: connectRouter(history)
+    router: connectRouter(history),
+    user: createUserReducer(otpConfig)
   }),
   compose(applyMiddleware(...middleware))
 )
@@ -92,7 +92,7 @@ class OtpRRExample extends Component {
         <DesktopNav />
         <Grid>
           <Row className='main-row'>
-            <Col sm={6} md={4} className='sidebar'>
+            <Col className='sidebar' md={4} sm={6}>
               {/*
                 Note: the main tag provides a way for users of screen readers
                 to skip to the primary page content.
@@ -109,7 +109,7 @@ class OtpRRExample extends Component {
               </main>
             </Col>
             {otpConfig.datastoreUrl ? <CallTakerControls /> : null}
-            <Col sm={6} md={8} className='map-container'>
+            <Col className='map-container' md={8} sm={6}>
               {otpConfig.datastoreUrl ? <CallTakerWindows /> : null}
               <Map />
             </Col>
diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 93d2e1975..8e62f1d8c 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -9,7 +9,7 @@ import BatchSettingsPanel from '../form/batch-settings-panel'
 import LocationField from '../form/connected-location-field'
 import DateTimeModal from '../form/date-time-modal'
 import ModeButtons, {MODE_OPTIONS, StyledModeButton} from '../form/mode-buttons'
-// import UserSettings from '../form/user-settings'
+import UserSettings from '../form/user-settings'
 import Icon from '../narrative/icon'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
 import {
@@ -93,6 +93,13 @@ const NarrativeContainer = styled.div`
   }
 `
 
+// Remove extra margins around UserSettings.
+// !important is needed otherwise the OTP CSS classes are applied.
+const StyledUserSettings = styled(UserSettings)`
+  margin-left: 0!important;
+  margin-right: 0!important;
+`
+
 /**
  * Main panel for the batch/trip comparison form.
  */
@@ -145,7 +152,7 @@ class BatchRoutingPanel extends Component {
   _toggleSettings = () => this.setState(this._updateExpanded('SETTINGS'))
 
   render () {
-    const {config, currentQuery, mobile} = this.props
+    const {activeSearch, config, currentQuery, mobile, showUserSettings} = this.props
     const {expanded, selectedModes} = this.state
     const actionText = mobile ? 'tap' : 'click'
     return (
@@ -175,7 +182,7 @@ class BatchRoutingPanel extends Component {
             {coreUtils.query.isNotDefaultQuery(currentQuery, config) &&
               <Dot className='dot' />
             }
-            <Icon type='cog' className='fa-2x' />
+            <Icon className='fa-2x' type='cog' />
           </SettingsPreview>
           <StyledDateTimePreview
             // as='button'
@@ -193,7 +200,7 @@ class BatchRoutingPanel extends Component {
             onClick={this._planTrip}
             title='Plan trip'
           >
-            <Icon type='search' className='fa-2x' />
+            <Icon className='fa-2x' type='search' />
           </PlanTripButton>
         </MainSettingsRow>
         {expanded === 'DATE_TIME' &&
@@ -206,21 +213,19 @@ class BatchRoutingPanel extends Component {
             <BatchSettingsPanel />
           </BatchSettingsPanelContainer>
         }
-        {/* FIXME: Add back user settings (home, work, etc.) once connected to
-            the middleware persistence.
-          !activeSearch && showUserSettings &&
-          <UserSettings />
-        */}
+        {!activeSearch && showUserSettings &&
+          <StyledUserSettings />
+        }
         {/* TODO: Implement mobile view */}
         <NarrativeContainer className='desktop-narrative-container'>
           <NarrativeItineraries
             containerStyle={{
+              bottom: '0',
               display: 'flex',
               flexDirection: 'column',
-              position: 'absolute',
-              right: '0',
               left: '0',
-              bottom: '0'
+              position: 'absolute',
+              right: '0'
             }}
           />
         </NarrativeContainer>
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 28346b84f..cbc3d8fae 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -61,6 +61,7 @@ class UserSettings extends Component {
 
   render () {
     const {
+      className,
       deleteLocalUserRecentPlace,
       deleteLocalUserSavedPlace,
       deleteLocalUserStop,
@@ -93,7 +94,7 @@ class UserSettings extends Component {
       )
 
       return (
-        <div className='user-settings'>
+        <div className={`user-settings ${className}`}>
           <Places
             basePath={PLACES_PATH}
             header={savedPlacesHeader}
@@ -119,7 +120,7 @@ class UserSettings extends Component {
       const sortedLocations = locations
         .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
       return (
-        <div className='user-settings'>
+        <div className={`user-settings ${className}`}>
           {/* Sorted locations are shown regardless of tracking. */}
           <Places
             onDelete={deleteLocalUserSavedPlace}

From 17b49449104683f30b78dd00b745e1cc53a15577 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 22 Feb 2021 17:27:27 -0500
Subject: [PATCH 020/270] refactor(StopViewer): Make tests pass

---
 __tests__/test-utils/mock-data/store.js |  6 ++++--
 lib/components/viewers/stop-viewer.js   |  2 +-
 lib/reducers/create-user-reducer.js     | 23 ++++++++++++++++-------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/__tests__/test-utils/mock-data/store.js b/__tests__/test-utils/mock-data/store.js
index 90e7a696e..b0e073caf 100644
--- a/__tests__/test-utils/mock-data/store.js
+++ b/__tests__/test-utils/mock-data/store.js
@@ -8,7 +8,8 @@ import { Provider } from 'react-redux'
 import configureStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 
-import {getInitialState} from '../../../lib/reducers/create-otp-reducer'
+import { getInitialState } from '../../../lib/reducers/create-otp-reducer'
+import { getUserInitialState } from '../../../lib/reducers/create-user-reducer'
 
 Enzyme.configure({ adapter: new EnzymeReactAdapter() })
 
@@ -26,7 +27,8 @@ export function getMockInitialState () {
   const mockInitialQuery = {}
   return clone({
     otp: getInitialState(mockConfig, mockInitialQuery),
-    router: connectRouter(history)
+    router: connectRouter(history),
+    user: getUserInitialState(mockConfig)
   })
 }
 
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index e7c1bcd45..c6f9cfbba 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -356,7 +356,7 @@ const mapStateToProps = (state, ownProps) => {
   const stopViewerConfig = getStopViewerConfig(state.otp)
   return {
     autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
-    favoriteStops: state.user.localUser.favoriteStops,
+    favoriteStops: (state.user.localUser && state.user.localUser.favoriteStops) || [],
     homeTimezone: state.otp.config.homeTimezone,
     viewedStop: state.otp.ui.viewedStop,
     showUserSettings,
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 8f1f13eff..9e8bb6aa0 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -21,8 +21,9 @@ const MAX_RECENT_STORAGE = 5
  * are fetched separately as soon as user login info is received
  * (from one of the components that uses withLoggedInUserSupport).
  */
-function loadUserFromLocalStoragePerConfig (config) {
-  const { persistence = {} } = config
+function loadUserFromLocalStorage (config) {
+  const { locations: configLocations = null, persistence = {} } = config
+
   const persistenceStrategy = persistence.enabled && persistence.strategy
   if (persistenceStrategy === 'localStorage') {
     // User's home and work locations
@@ -40,8 +41,8 @@ function loadUserFromLocalStoragePerConfig (config) {
     // Filter valid locations found into locations list.
     const locations = [home, work].filter(p => p)
     // Add configurable locations to home and work locations
-    if (config.locations) {
-      locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
+    if (configLocations) {
+      locations.push(...configLocations.map(l => ({ ...l, type: 'suggested' })))
     }
 
     return {
@@ -62,10 +63,14 @@ function loadUserFromLocalStoragePerConfig (config) {
   }
 }
 
-function createUserReducer (config) {
-  const localStorageState = loadUserFromLocalStoragePerConfig(config)
+/**
+ * Create the initial user state of otp-react-redux using the provided config, any
+ * and the user stored in localStorage.
+ */
+export function getUserInitialState (config) {
+  const localStorageState = loadUserFromLocalStorage(config)
 
-  const initialState = {
+  return {
     accessToken: null,
     itineraryExistence: null,
     lastPhoneSmsRequest: {
@@ -79,6 +84,10 @@ function createUserReducer (config) {
     pathBeforeSignIn: null,
     ...localStorageState
   }
+}
+
+function createUserReducer (config) {
+  const initialState = getUserInitialState(config)
 
   return (state = initialState, action) => {
     switch (action.type) {

From cb06ae592244905d4679e0781008ad6ade80bd29 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 22 Feb 2021 18:01:28 -0500
Subject: [PATCH 021/270] docs(create-user-reducer): Fix typo

---
 lib/reducers/create-user-reducer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 9e8bb6aa0..d7dfbb4ce 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -17,7 +17,7 @@ const MAX_RECENT_STORAGE = 5
  * - recent places in trip plan searches,
  * - favorite stops
  *
- * Note: If the persistence stragegy is otp_middleware, then user settings
+ * Note: If the persistence strategy is otp_middleware, then user settings
  * are fetched separately as soon as user login info is received
  * (from one of the components that uses withLoggedInUserSupport).
  */

From ca5e7107cfed74b17e848d92822d1ef916840cc5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 23 Feb 2021 11:11:15 -0500
Subject: [PATCH 022/270] refactor(connect-location-field): Show places
 according to persistence strategy.

---
 lib/components/form/connect-location-field.js | 52 +++++++++++++------
 lib/components/form/user-settings.js          | 18 ++++---
 lib/reducers/create-otp-reducer.js            |  4 +-
 lib/reducers/create-user-reducer.js           |  9 ++--
 lib/util/auth.js                              | 15 +++---
 lib/util/constants.js                         |  3 +-
 lib/util/user.js                              | 23 ++++----
 7 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index 1b3597322..dd257e9b1 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -3,9 +3,10 @@ import { connect } from 'react-redux'
 import * as apiActions from '../../actions/api'
 import * as locationActions from '../../actions/location'
 import Icon from '../narrative/icon'
+import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import { isBlank } from '../../util/ui'
-import { convertToLocationFieldLocation } from '../../util/user'
+import { getPersistenceStrategy, isWork } from '../../util/user'
 
 /**
  * Custom icon component that renders based on the user location icon prop.
@@ -19,6 +20,19 @@ const UserLocationIcon = ({ userLocation }) => {
   return <Icon name={finalIcon} />
 }
 
+/**
+ * Convert an entry from persisted user savedLocations into LocationField locations:
+ * - The icon for "Work" places is changed to 'work',
+ * - The name attribute is filled with the place address if available.
+ */
+function convertToLocationFieldLocation (place) {
+  return {
+    ...place,
+    icon: isWork(place) ? 'work' : place.icon,
+    name: place.address
+  }
+}
+
 /**
  * This higher-order component connects the target (styled) LocationField to the
  * redux store.
@@ -43,21 +57,27 @@ export default function connectLocationField (StyledLocationField, options = {})
     const { currentPosition, nearbyStops, sessionSearches } = location
     const activeSearch = getActiveSearch(state.otp)
     const query = activeSearch ? activeSearch.query : currentQuery
+    const { persistence } = config
+    const persistenceStrategy = getPersistenceStrategy(persistence)
 
-    // Clone loggedInUserLocations with changes to conform to LocationField requirements:
-    // - locations with blank addresses are removed.
-    // - "Work" location icon name is changed to 'work',
-    // - location.name is filled with the location address if available.
-    const loggedInUserLocations = loggedInUser
-      ? loggedInUser.savedLocations
-        .filter(loc => !isBlank(loc.address))
-        .map(convertToLocationFieldLocation)
-      : []
-
-    // Holds saved locations unless excluded in options.
-    // see notes regarding persistence strategy
-    // refactor obtaining the locations.
-    const userSavedLocations = !excludeSavedLocations ? [...loggedInUserLocations, ...user.locations] : []
+    // Display saved locations and recent places according to the configured persistence strategy,
+    // unless displaying user locations is disabled via prop.
+    let userSavedLocations = []
+    let recentPlaces = []
+    if (!excludeSavedLocations) {
+      if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
+        // Remove locations with blank addresses, and
+        // modify loggedInUserLocations to conform to LocationField requirements.
+        userSavedLocations = loggedInUser
+          ? loggedInUser.savedLocations
+            .filter(loc => !isBlank(loc.address))
+            .map(convertToLocationFieldLocation)
+          : []
+      } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
+        userSavedLocations = user.locations
+        recentPlaces = user.recentPlaces
+      }
+    }
 
     const stateToProps = {
       currentPosition,
@@ -67,7 +87,7 @@ export default function connectLocationField (StyledLocationField, options = {})
       showUserSettings: getShowUserSettings(state.otp),
       stopsIndex: transitIndex.stops,
       UserLocationIconComponent: UserLocationIcon,
-      userLocationsAndRecentPlaces: [...userSavedLocations, ...user.recentPlaces]
+      userLocationsAndRecentPlaces: [...userSavedLocations, ...recentPlaces]
     }
     // Set the location prop only if includeLocation is specified, else leave unset.
     // Otherwise, the StyledLocationField component will use the fixed undefined/null value as location
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index cbc3d8fae..cd056370b 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -12,8 +12,12 @@ import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
 import MainPanelPlace from '../user/places/main-panel-place'
 import PlaceShortcut from '../user/places/place-shortcut'
-import { PLACES_PATH } from '../../util/constants'
-import { isHome, isWork } from '../../util/user'
+import {
+  PERSIST_TO_LOCAL_STORAGE,
+  PERSIST_TO_OTP_MIDDLEWARE,
+  PLACES_PATH
+} from '../../util/constants'
+import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
@@ -77,7 +81,7 @@ class UserSettings extends Component {
       trueUser
     } = this.props
 
-    if (loggedInUser && persistenceStrategy === 'otp_middleware') { // use constants
+    if (loggedInUser && persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
       // Add id attribute using index, that will be used to call deleteUserPlace.
       const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
         ...loc,
@@ -111,7 +115,7 @@ class UserSettings extends Component {
           />
         </div>
       )
-    } else if (persistenceStrategy === 'localStorage') {
+    } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
       const { favoriteStops, storeTripHistory, recentPlaces } = localUser
       // Clone locations in order to prevent blank locations from seeping into the
       // app state/store.
@@ -284,9 +288,7 @@ const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user })
 
 const mapStateToProps = (state, ownProps) => {
   const { config, currentQuery, location, transitIndex } = state.otp
-  const { language, persistence = {} } = config
-  console.log(config)
-
+  const { language, persistence } = config
   const { localUser, localUserTripRequests, loggedInUser, loggedInUserTripRequests } = state.user
   return {
     config,
@@ -296,7 +298,7 @@ const mapStateToProps = (state, ownProps) => {
     loggedInUser,
     loggedInUserTripRequests,
     nearbyStops: location.nearbyStops,
-    persistenceStrategy: persistence.enabled && persistence.strategy,
+    persistenceStrategy: getPersistenceStrategy(persistence),
     query: currentQuery,
     sessionSearches: location.sessionSearches,
     stopsIndex: transitIndex.stops,
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index cc85a6989..feaf214a2 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -5,7 +5,7 @@ import objectPath from 'object-path'
 import coreUtils from '@opentripplanner/core-utils'
 
 import { MainPanelContent, MobileScreens } from '../actions/ui'
-import {FETCH_STATUS} from '../util/constants'
+import {FETCH_STATUS, PERSIST_TO_LOCAL_STORAGE} from '../util/constants'
 import {getTimestamp} from '../util/state'
 import {isBatchRoutingEnabled} from '../util/itinerary'
 
@@ -42,7 +42,7 @@ function validateInitialState (initialState) {
   // See https://developers.arcgis.com/rest/geocode/api-reference/geocoding-free-vs-paid.htm
   if (
     objectPath.get(config, 'persistence.enabled') &&
-    objectPath.get(config, 'persistence.strategy') === 'localStorage' &&
+    objectPath.get(config, 'persistence.strategy') === PERSIST_TO_LOCAL_STORAGE &&
     objectPath.get(config, 'geocoder.type') === 'ARCGIS'
   ) {
     errors.push(new Error('Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'))
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index d7dfbb4ce..e967f126a 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -3,6 +3,9 @@ import clone from 'clone'
 import update from 'immutability-helper'
 import coreUtils from '@opentripplanner/core-utils'
 
+import { PERSIST_TO_LOCAL_STORAGE } from '../util/constants'
+import { getPersistenceStrategy } from '../util/user'
+
 const { getItem, removeItem, storeItem } = coreUtils.storage
 
 const MAX_RECENT_STORAGE = 5
@@ -22,10 +25,10 @@ const MAX_RECENT_STORAGE = 5
  * (from one of the components that uses withLoggedInUserSupport).
  */
 function loadUserFromLocalStorage (config) {
-  const { locations: configLocations = null, persistence = {} } = config
+  const { locations: configLocations = null, persistence } = config
 
-  const persistenceStrategy = persistence.enabled && persistence.strategy
-  if (persistenceStrategy === 'localStorage') {
+  const persistenceStrategy = getPersistenceStrategy(persistence)
+  if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
     // User's home and work locations
     const home = getItem('home')
     const work = getItem('work')
diff --git a/lib/util/auth.js b/lib/util/auth.js
index 1da8e5e08..3cf333482 100644
--- a/lib/util/auth.js
+++ b/lib/util/auth.js
@@ -1,4 +1,5 @@
-import { ACCOUNT_PATH, PERSISTENCE_STRATEGY_OTP_MIDDLEWARE } from './constants'
+import { ACCOUNT_PATH, PERSIST_TO_OTP_MIDDLEWARE } from './constants'
+import { getPersistenceStrategy } from './user'
 
 /**
  * Custom links under the user account dropdown.
@@ -20,17 +21,13 @@ export const accountLinks = [
 
 /**
  * Obtains the Auth0 {domain, audience, clientId} configuration, if the following applies in config.yml:
- * - persistence is defined,
- * - persistence.enabled is true,
- * - persistence.strategy is 'otp_middleware',
+ * - persistence.strategy is 'otp_middleware' (and persistence is enabled),
  * - persistence.auth0 is defined.
  * @param persistence The OTP persistence configuration from config.yml.
  * @returns The Auth0 configuration, or null if the conditions are not met.
  */
 export function getAuth0Config (persistence) {
-  if (persistence) {
-    const { enabled = false, strategy = null, auth0 = null } = persistence
-    return (enabled && strategy === PERSISTENCE_STRATEGY_OTP_MIDDLEWARE) ? auth0 : null
-  }
-  return null
+  return getPersistenceStrategy(persistence) === PERSIST_TO_OTP_MIDDLEWARE
+    ? persistence.auth0
+    : null
 }
diff --git a/lib/util/constants.js b/lib/util/constants.js
index 2d5f69964..c656fa5db 100644
--- a/lib/util/constants.js
+++ b/lib/util/constants.js
@@ -2,7 +2,8 @@ export const AUTH0_AUDIENCE = 'https://otp-middleware'
 // This should match the value expected in otp-middleware OtpUser#AUTH0_SCOPE
 export const AUTH0_SCOPE = 'otp-user'
 export const DEFAULT_APP_TITLE = 'OpenTripPlanner'
-export const PERSISTENCE_STRATEGY_OTP_MIDDLEWARE = 'otp_middleware'
+export const PERSIST_TO_LOCAL_STORAGE = 'localStorage'
+export const PERSIST_TO_OTP_MIDDLEWARE = 'otp_middleware'
 
 export const FETCH_STATUS = {
   UNFETCHED: 0,
diff --git a/lib/util/user.js b/lib/util/user.js
index 25e1c2814..87efb6b80 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -85,19 +85,6 @@ export function positionHomeAndWorkFirst (userData) {
   userData.savedLocations = reorderedLocations
 }
 
-/**
- * Convert an entry from persisted user savedLocations into LocationField locations:
- * - The icon for "Work" places is changed to 'work',
- * - The name attribute is filled with the place address if available.
- */
-export function convertToLocationFieldLocation (place) {
-  return {
-    ...place,
-    icon: isWork(place) ? 'work' : place.icon,
-    name: place.address
-  }
-}
-
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
  * - The icon for "Work" places is changed to 'briefcase',
@@ -113,3 +100,13 @@ export function convertToPlace (location) {
     title: formatStoredPlaceName(location)
   }
 }
+
+/**
+ * Returns the persistence.strategy string if the following apply in config.yml, null otherwise:
+ * - persistence is defined,
+ * - persistence.enabled is true,
+ * - persistence.strategy is defined.
+ */
+export function getPersistenceStrategy (persistence) {
+  return persistence && persistence.enabled && persistence.strategy
+}

From 15a58dd1b1538139f1d874b36c7a30a22c73b6d7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 23 Feb 2021 16:34:59 -0500
Subject: [PATCH 023/270] refactor(user reducer): Move TOGGLE_TRACKING action
 to user reducer.

---
 lib/reducers/create-otp-reducer.js  | 17 -----------------
 lib/reducers/create-user-reducer.js | 18 +++++++++++++++++-
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index feaf214a2..aa949a68b 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -505,23 +505,6 @@ function createOtpReducer (config, initialQuery) {
         return update(state, { user: {
           expandAdvanced: { $set: action.payload }
         } })
-      case 'TOGGLE_TRACKING': {
-        storeItem('trackRecent', action.payload)
-        let recentPlaces = clone(state.user.recentPlaces)
-        let recentSearches = clone(state.user.recentSearches)
-        if (!action.payload) {
-          // If user disables tracking, remove recent searches and locations.
-          recentPlaces = []
-          recentSearches = []
-          removeItem('recent')
-          removeItem('recentSearches')
-        }
-        return update(state, { user: {
-          trackRecent: { $set: action.payload },
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches }
-        } })
-      }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
         const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index e967f126a..5a38531c6 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -207,7 +207,6 @@ function createUserReducer (config) {
         storeItem('favoriteStops', favoriteStops)
         return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
       }
-
       case 'FORGET_SEARCH': {
         const recentSearches = clone(state.localUserTripRequests)
         const index = recentSearches.findIndex(l => l.id === action.payload)
@@ -218,6 +217,23 @@ function createUserReducer (config) {
           ? update(state, { localUserTripRequests: { $splice: [[index, 1]] } })
           : state
       }
+      case 'TOGGLE_TRACKING': {
+        storeItem('trackRecent', action.payload)
+        let recentPlaces = clone(state.localUser.recentPlaces)
+        let recentSearches = clone(state.localUser.recentSearches)
+        if (!action.payload) {
+          // If user disables tracking, remove recent searches and locations.
+          recentPlaces = []
+          recentSearches = []
+          removeItem('recent')
+          removeItem('recentSearches')
+        }
+        return update(state, { localUser: {
+          recentPlaces: { $set: recentPlaces },
+          recentSearches: { $set: recentSearches },
+          storeTripHistory: { $set: action.payload }
+        } })
+      }
 
       default:
         return state

From bf8548cf8d80bc62c777c26ee6e0b14c908f8fa7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 23 Feb 2021 16:53:28 -0500
Subject: [PATCH 024/270] refactor(user reducer): Move REMEMBER_SEARCH to user
 reducer

---
 lib/reducers/create-otp-reducer.js  | 14 --------------
 lib/reducers/create-user-reducer.js | 19 +++++++++++++++++++
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index aa949a68b..2f4311d98 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -1,6 +1,5 @@
 import clone from 'clone'
 import update from 'immutability-helper'
-import isEqual from 'lodash.isequal'
 import objectPath from 'object-path'
 import coreUtils from '@opentripplanner/core-utils'
 
@@ -505,19 +504,6 @@ function createOtpReducer (config, initialQuery) {
         return update(state, { user: {
           expandAdvanced: { $set: action.payload }
         } })
-      case 'REMEMBER_SEARCH':
-        const searches = clone(state.user.recentSearches)
-        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
-        // Overwrite duplicate search (so that new timestamp is stored).
-        if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
-        else searches.unshift(action.payload)
-        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
-        // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
-        if (sortedSearches.length >= MAX_RECENT_STORAGE) {
-          sortedSearches.splice(MAX_RECENT_STORAGE)
-        }
-        storeItem('recentSearches', sortedSearches)
-        return update(state, { user: { searches: { $set: sortedSearches } } })
       case 'SET_AUTOPLAN':
         return update(state, {
           config: { autoPlan: { $set: action.payload.autoPlan } }
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 5a38531c6..e8c4fdcf4 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -1,6 +1,7 @@
 /* eslint-disable complexity */
 import clone from 'clone'
 import update from 'immutability-helper'
+import isEqual from 'lodash.isequal'
 import coreUtils from '@opentripplanner/core-utils'
 
 import { PERSIST_TO_LOCAL_STORAGE } from '../util/constants'
@@ -179,6 +180,7 @@ function createUserReducer (config) {
           ? update(state, { localUser: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
           : state
       }
+
       case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that
         // might be contained there (like lists of patterns).
@@ -207,6 +209,7 @@ function createUserReducer (config) {
         storeItem('favoriteStops', favoriteStops)
         return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
       }
+
       case 'FORGET_SEARCH': {
         const recentSearches = clone(state.localUserTripRequests)
         const index = recentSearches.findIndex(l => l.id === action.payload)
@@ -217,6 +220,22 @@ function createUserReducer (config) {
           ? update(state, { localUserTripRequests: { $splice: [[index, 1]] } })
           : state
       }
+
+      case 'REMEMBER_SEARCH': {
+        const searches = clone(state.localUserTripRequests)
+        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
+        // Overwrite duplicate search (so that new timestamp is stored).
+        if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
+        else searches.unshift(action.payload)
+        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
+        // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
+        if (sortedSearches.length >= MAX_RECENT_STORAGE) {
+          sortedSearches.splice(MAX_RECENT_STORAGE)
+        }
+        storeItem('recentSearches', sortedSearches)
+        return update(state, { localUserTripRequests: { $set: sortedSearches } })
+      }
+
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)
         let recentPlaces = clone(state.localUser.recentPlaces)

From 487466783fdf906d956929b9a76fdad4a934602b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 23 Feb 2021 17:39:44 -0500
Subject: [PATCH 025/270] refactor(user reducer): Move FORGET_PLACE,
 REMEMBER_PLACE to user reducer.

---
 lib/actions/map.js                            | 43 ++++++++++-----
 .../map/connected-endpoints-overlay.js        |  9 ++--
 lib/reducers/create-otp-reducer.js            | 53 -------------------
 lib/reducers/create-user-reducer.js           | 31 +++++++++++
 4 files changed, 66 insertions(+), 70 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 26cbcbcef..4ab38ceaa 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -19,12 +19,27 @@ import { clearActiveSearch } from './form'
 // Private actions
 const clearingLocation = createAction('CLEAR_LOCATION')
 const settingLocation = createAction('SET_LOCATION')
+const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
+const deleteSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
 
 // Public actions
-export const forgetPlace = createAction('FORGET_PLACE')
-export const rememberPlace = createAction('REMEMBER_PLACE')
-export const forgetStop = createAction('FORGET_STOP')
-export const rememberStop = createAction('REMEMBER_STOP')
+export const rememberPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
+export const forgetStop = createAction('DELETE_LOCAL_USER_STOP')
+export const rememberStop = createAction('REMEMBER_LOCAL_USER_STOP')
+
+/**
+ * Dispatches the action to delete a saved or recent place from localStorage.
+ */
+export function forgetPlace (placeId) {
+  return function (dispatch, getState) {
+    // Recent place IDs contain the string literal 'recent'.
+    if (placeId.indexOf('recent') !== -1) {
+      dispatch(deleteRecentPlace(placeId))
+    } else {
+      dispatch(deleteSavedPlace(placeId))
+    }
+  }
+}
 
 export function clearLocation (payload) {
   return function (dispatch, getState) {
@@ -59,13 +74,13 @@ export function setLocation (payload) {
         .reverse({ point: payload.location })
         .then((location) => {
           dispatch(settingLocation({
-            locationType: payload.locationType,
-            location
+            location,
+            locationType: payload.locationType
           }))
         }).catch(err => {
           dispatch(settingLocation({
-            locationType: payload.locationType,
-            location: payload.location
+            location: payload.location,
+            locationType: payload.locationType
           }))
           console.warn(err)
         })
@@ -83,10 +98,10 @@ export function setLocationToCurrent (payload) {
     const currentPosition = getState().otp.location.currentPosition
     if (currentPosition.error || !currentPosition.coords) return
     payload.location = {
+      category: 'CURRENT_LOCATION',
       lat: currentPosition.coords.latitude,
       lon: currentPosition.coords.longitude,
-      name: '(Current Location)',
-      category: 'CURRENT_LOCATION'
+      name: '(Current Location)'
     }
     dispatch(settingLocation(payload))
   }
@@ -97,12 +112,12 @@ export function switchLocations () {
     const { from, to } = getState().otp.currentQuery
     // First, reverse the locations.
     dispatch(settingLocation({
-      locationType: 'from',
-      location: to
+      location: to,
+      locationType: 'from'
     }))
     dispatch(settingLocation({
-      locationType: 'to',
-      location: from
+      location: from,
+      locationType: 'to'
     }))
     // Then kick off a routing query (if the query is invalid, search will abort).
     dispatch(routingQuery())
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index 0e85d3d80..ce4e7a465 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -21,10 +21,13 @@ const mapStateToProps = (state, ownProps) => {
   // Intermediate places doesn't trigger a re-plan, so for now default to
   // current query. FIXME: Determine with TriMet if this is desired behavior.
   const places = state.otp.currentQuery.intermediatePlaces.filter(p => p)
+  const { localUser, loggedInUser } = state.user
+  const trueUser = loggedInUser || localUser
+
   return {
     fromLocation: from,
     intermediatePlaces: places,
-    locations: state.otp.user.locations,
+    locations: trueUser.savedLocations,
     showUserSettings,
     toLocation: to,
     visible: true
@@ -32,10 +35,10 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
+  clearLocation,
   forgetPlace,
   rememberPlace,
-  setLocation,
-  clearLocation
+  setLocation
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(EndpointsOverlay)
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 2f4311d98..4a185db9b 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -9,7 +9,6 @@ import {getTimestamp} from '../util/state'
 import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { isTransit, getTransitModes } = coreUtils.itinerary
-const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
 const {
   ensureSingleAccessMode,
@@ -19,8 +18,6 @@ const {
 const { getItem, removeItem, storeItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
-const MAX_RECENT_STORAGE = 5
-
 // TODO: fire planTrip action if default query is complete/error-free
 
 /**
@@ -447,56 +444,6 @@ function createOtpReducer (config, initialQuery) {
       case 'STORE_DEFAULT_SETTINGS':
         storeItem('defaultQuery', action.payload)
         return update(state, { user: { defaults: { $set: action.payload } } })
-      case 'FORGET_PLACE': {
-        // Payload is the place ID.
-        // Recent place IDs contain the string literal 'recent'.
-        if (action.payload.indexOf('recent') !== -1) {
-          const recentPlaces = clone(state.user.recentPlaces)
-          // Remove recent from list of recent places
-          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
-          recentPlaces.splice(removeIndex, 1)
-          storeItem('recent', recentPlaces)
-          return removeIndex !== -1
-            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
-            : state
-        } else {
-          const locations = clone(state.user.locations)
-          const removeIndex = locations.findIndex(l => l.id === action.payload)
-          removeItem(action.payload)
-          return removeIndex !== -1
-            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
-            : state
-        }
-      }
-      case 'REMEMBER_PLACE': {
-        const { location, type } = action.payload
-        switch (type) {
-          case 'recent': {
-            const recentPlaces = clone(state.user.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
-            // Replace recent place if duplicate found or add to list.
-            if (index !== -1) recentPlaces.splice(index, 1, location)
-            else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
-            // Only keep up to 5 recent locations
-            // FIXME: Check for duplicates
-            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
-              sortedPlaces.splice(MAX_RECENT_STORAGE)
-            }
-            storeItem('recent', recentPlaces)
-            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
-          }
-          default: {
-            const locations = clone(state.user.locations)
-            // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
-            if (index !== -1) locations.splice(index, 1, location)
-            else locations.push(location)
-            storeItem(type, location)
-            return update(state, { user: { locations: { $set: locations } } })
-          }
-        }
-      }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index e8c4fdcf4..af4326595 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -7,6 +7,7 @@ import coreUtils from '@opentripplanner/core-utils'
 import { PERSIST_TO_LOCAL_STORAGE } from '../util/constants'
 import { getPersistenceStrategy } from '../util/user'
 
+const { matchLatLon } = coreUtils.map
 const { getItem, removeItem, storeItem } = coreUtils.storage
 
 const MAX_RECENT_STORAGE = 5
@@ -168,6 +169,36 @@ function createUserReducer (config) {
           : state
       }
 
+      case 'REMEMBER_LOCAL_USER_PLACE': {
+        const { location, type } = action.payload
+        switch (type) {
+          case 'recent': {
+            const recentPlaces = clone(state.localUser.recentPlaces)
+            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            // Replace recent place if duplicate found or add to list.
+            if (index !== -1) recentPlaces.splice(index, 1, location)
+            else recentPlaces.push(location)
+            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            // Only keep up to 5 recent locations
+            // FIXME: Check for duplicates
+            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
+              sortedPlaces.splice(MAX_RECENT_STORAGE)
+            }
+            storeItem('recent', recentPlaces)
+            return update(state, { localUser: { recentPlaces: { $set: sortedPlaces } } })
+          }
+          default: {
+            const locations = clone(state.localUser.savedLocations)
+            // Determine if location type (e.g., home or work) already exists in list
+            const index = locations.findIndex(l => l.type === type)
+            if (index !== -1) locations.splice(index, 1, location)
+            else locations.push(location)
+            storeItem(type, location)
+            return update(state, { localUser: { savedLocations: { $set: locations } } })
+          }
+        }
+      }
+
       case 'FORGET_STOP': {
         const stopId = action.payload
         const favoriteStops = clone(state.localUser.favoriteStops)

From 452627e90e28743b6f111ae1cecbeb6aef338827 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 23 Feb 2021 17:40:46 -0500
Subject: [PATCH 026/270] refactor(user reducer): Remove redundant prompt to
 delete localStorage place

---
 lib/reducers/create-user-reducer.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index af4326595..0bf36c01c 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -144,8 +144,6 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_RECENT_PLACE': {
-        if (!confirm('Would you like to remove this place?')) return state
-
         // This is used to delete the local user's recent location that matches the provided id.
         const placeId = action.payload
         const recentPlaces = clone(state.localUser.recentPlaces)

From 13d811d3ddb824925d61d3a8a8fd3f35e50379df Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 24 Feb 2021 12:12:56 -0500
Subject: [PATCH 027/270] refactor(user reducer): Refactor deletion from place
 list.

---
 lib/reducers/create-user-reducer.js | 53 +++++++++++++----------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 0bf36c01c..ccfd7de94 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -12,6 +12,23 @@ const { getItem, removeItem, storeItem } = coreUtils.storage
 
 const MAX_RECENT_STORAGE = 5
 
+/**
+ * Removes a place by id from the specified localUser state and optional persistence setting.
+ */
+function removeLocalUserPlace (id, state, fieldName, settingName) {
+  const originalArray = state.localUser[fieldName]
+  const removeIndex = originalArray.findIndex(l => l.id === id)
+  // If a persistence setting is provided, create a new array without the specified element.
+  if (settingName) {
+    const newArray = clone(originalArray)
+    newArray.splice(removeIndex, 1)
+    storeItem(settingName, newArray)
+  }
+  return removeIndex !== -1
+    ? update(state, { localUser: { [fieldName]: { $splice: [[removeIndex, 1]] } } })
+    : state
+}
+
 /**
  * Load select user settings stored locally if the persistence strategy is localStorage.
  * Other settings not mentioned below are still loaded through createOtpReducer.
@@ -101,6 +118,7 @@ function createUserReducer (config) {
           accessToken: { $set: action.payload }
         })
       }
+
       case 'SET_CURRENT_USER': {
         return update(state, {
           loggedInUser: { $set: action.payload }
@@ -143,28 +161,15 @@ function createUserReducer (config) {
         })
       }
 
-      case 'DELETE_LOCAL_USER_RECENT_PLACE': {
+      case 'DELETE_LOCAL_USER_RECENT_PLACE':
         // This is used to delete the local user's recent location that matches the provided id.
-        const placeId = action.payload
-        const recentPlaces = clone(state.localUser.recentPlaces)
-        // Remove recent from list of recent places
-        const removeIndex = recentPlaces.findIndex(l => l.id === placeId)
-        recentPlaces.splice(removeIndex, 1)
-        storeItem('recent', recentPlaces)
-        return removeIndex !== -1
-          ? update(state, { localUser: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
-          : state
-      }
+        return removeLocalUserPlace(action.payload, state, 'recentPlaces', 'recent')
 
       case 'DELETE_LOCAL_USER_SAVED_PLACE': {
         // This is used to delete the local user's Home and Work (or other built-in)
         // location that matches the provided id.
-        const placeId = action.payload
-        const removeIndex = state.localUser.savedLocations.findIndex(l => l.id === placeId)
-        removeItem(placeId)
-        return removeIndex !== -1
-          ? update(state, { localUser: { savedLocations: { $splice: [[removeIndex, 1]] } } })
-          : state
+        removeItem(action.payload)
+        return removeLocalUserPlace(action.payload, state, 'savedLocations')
       }
 
       case 'REMEMBER_LOCAL_USER_PLACE': {
@@ -197,18 +202,8 @@ function createUserReducer (config) {
         }
       }
 
-      case 'FORGET_STOP': {
-        const stopId = action.payload
-        const favoriteStops = clone(state.localUser.favoriteStops)
-
-        // This is used to delete the local user's favorite stop that matches the provided id.
-        const removeIndex = favoriteStops.findIndex(l => l.id === stopId)
-        favoriteStops.splice(removeIndex, 1)
-        storeItem('favoriteStops', favoriteStops)
-        return removeIndex !== -1
-          ? update(state, { localUser: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
-          : state
-      }
+      case 'FORGET_STOP':
+        return removeLocalUserPlace(action.payload, state, 'favoriteStops', 'favoriteStops')
 
       case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that

From f6acf45c7a9e08e7782a995635f4bdf7358d3615 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 24 Feb 2021 17:13:20 -0500
Subject: [PATCH 028/270] refactor: Make Save/Forget locations from map work
 again.

---
 lib/actions/api.js                            |  6 +-
 lib/actions/map.js                            |  7 +-
 lib/actions/user.js                           | 68 ++++++++++++++++++-
 lib/components/form/connect-location-field.js | 38 +++--------
 lib/components/form/user-settings.js          |  8 +--
 .../map/connected-endpoints-overlay.js        | 16 ++++-
 lib/components/user/places/favorite-place.js  |  6 +-
 lib/components/user/places/place-shortcut.js  | 24 +++++--
 lib/util/user.js                              | 44 ++++++++++--
 9 files changed, 158 insertions(+), 59 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 5e901d58b..8951de93d 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -8,7 +8,7 @@ import queryParams from '@opentripplanner/core-utils/lib/query-params'
 import { createAction } from 'redux-actions'
 import qs from 'qs'
 
-import { rememberPlace } from './map'
+import { rememberPlace } from './user'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
 import { getSecureFetchOptions } from '../util/middleware'
 
@@ -84,7 +84,7 @@ export function routingQuery (searchId = null) {
   return async function (dispatch, getState) {
     // FIXME: batchId is searchId for now.
     const state = getState()
-    const otpState = state.otp
+    const { otp: otpState, user: userState } = state
 
     const isNewSearch = !searchId
     if (isNewSearch) searchId = randId()
@@ -112,7 +112,7 @@ export function routingQuery (searchId = null) {
           dispatch(routingResponse({ response: json, requestId, searchId }))
           // If tracking is enabled, store locations and search after successful
           // search is completed.
-          if (otpState.user.trackRecent) {
+          if (userState.trueUser && userState.trueUser.storeTripHistory) {
             const { from, to } = otpState.currentQuery
             if (!isStoredPlace(from)) {
               dispatch(rememberPlace({ type: 'recent', location: formatRecentPlace(from) }))
diff --git a/lib/actions/map.js b/lib/actions/map.js
index 4ab38ceaa..f2912acb4 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -4,6 +4,7 @@ import { createAction } from 'redux-actions'
 
 import { routingQuery } from './api'
 import { clearActiveSearch } from './form'
+import { deleteUserPlace } from './user'
 
 /* SET_LOCATION action creator. Updates a from or to location in the store
  *
@@ -20,10 +21,8 @@ import { clearActiveSearch } from './form'
 const clearingLocation = createAction('CLEAR_LOCATION')
 const settingLocation = createAction('SET_LOCATION')
 const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
-const deleteSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
 
 // Public actions
-export const rememberPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
 export const forgetStop = createAction('DELETE_LOCAL_USER_STOP')
 export const rememberStop = createAction('REMEMBER_LOCAL_USER_STOP')
 
@@ -32,11 +31,11 @@ export const rememberStop = createAction('REMEMBER_LOCAL_USER_STOP')
  */
 export function forgetPlace (placeId) {
   return function (dispatch, getState) {
-    // Recent place IDs contain the string literal 'recent'.
+    // localStorage only: Recent place IDs contain the string literal 'recent'.
     if (placeId.indexOf('recent') !== -1) {
       dispatch(deleteRecentPlace(placeId))
     } else {
-      dispatch(deleteSavedPlace(placeId))
+      dispatch(deleteUserPlace(placeId))
     }
   }
 }
diff --git a/lib/actions/user.js b/lib/actions/user.js
index f31db421e..8324fef9b 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -7,10 +7,14 @@ import { createAction } from 'redux-actions'
 import { routingQuery } from './api'
 import { setQueryParam } from './form'
 import { routeTo } from './ui'
-import { TRIPS_PATH } from '../util/constants'
+import {
+  PERSIST_TO_LOCAL_STORAGE,
+  PERSIST_TO_OTP_MIDDLEWARE,
+  TRIPS_PATH
+} from '../util/constants'
 import { secureFetch } from '../util/middleware'
 import { isBlank } from '../util/ui'
-import { isNewUser, positionHomeAndWorkFirst } from '../util/user'
+import { convertToPlace, getPersistenceStrategy, isHomeOrWork, isNewUser, positionHomeAndWorkFirst } from '../util/user'
 
 const { planParamsToQuery } = coreUtils.query
 const { OTP_API_DATE_FORMAT } = coreUtils.time
@@ -35,6 +39,7 @@ const setitineraryExistence = createAction('SET_ITINERARY_EXISTENCE')
 export const deleteLocalUserRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
 export const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
 export const deleteLocalUserStop = createAction('FORGET_STOP')
+const rememberLocalUserPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
 
 function createNewUser (auth0User) {
   return {
@@ -501,7 +506,7 @@ export function saveUserPlace (placeToSave, placeIndex) {
 /**
  * Delete the place data at the specified index for the logged-in user.
  */
-export function deleteUserPlace (placeIndex) {
+export function deleteLoggedInUserPlace (placeIndex) {
   return function (dispatch, getState) {
     if (!confirm('Would you like to remove this place?')) return
 
@@ -511,3 +516,60 @@ export function deleteUserPlace (placeIndex) {
     dispatch(createOrUpdateUser(loggedInUser, true))
   }
 }
+
+//Is there any way to do a factory interface??
+//If not, simplify the dispatch returns (remove dispatch).
+/**
+ * Delete place data by id for the logged-in or local user
+ * according to the persistence strategy.
+ */
+export function deleteUserPlace (placeId) {
+  return function (dispatch, getState) {
+    const { otp, user } = getState()
+    const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
+    const { loggedInUser } = user
+
+    if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE && loggedInUser) {
+      // For middleware loggedInUsers, this method should only be triggered by the
+      // 'Forget home' or 'Forget work' links from OTP UI's EndPointOverlay/EndPoint,
+      // with placeId set to 'home' or 'work'.
+      if (isHomeOrWork({ type: placeId })) {
+        // Find the index of the place in the loggedInUser.savedLocations
+        const placeIndex = loggedInUser.savedLocations.findIndex(loc => loc.type === placeId)
+        if (placeIndex > -1) {
+          dispatch(deleteLoggedInUserPlace(placeIndex))
+        }
+      }
+    } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
+      dispatch(deleteLocalUserSavedPlace(placeId))
+    }
+  }
+}
+
+/**
+ * Remembers a place for the logged-in or local user
+ * according to the persistence strategy.
+ */
+export function rememberPlace (placeTypeLocation) {
+  return function (dispatch, getState) {
+    const { otp, user } = getState()
+    const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
+    const { loggedInUser } = user
+
+    if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE && loggedInUser) {
+      // For middleware loggedInUsers, this method should only be triggered by the
+      // 'Save as home' or 'Save as work' links from OTP UI's EndPointOverlay/EndPoint.
+      const { location } = placeTypeLocation
+      if (isHomeOrWork(location)) {
+        // Find the index of the place in the loggedInUser.savedLocations
+        const placeIndex = loggedInUser.savedLocations.findIndex(loc => loc.type === location.type)
+        if (placeIndex > -1) {
+          // Convert to loggedInUser saved place
+          dispatch(saveUserPlace(convertToPlace(location), placeIndex))
+        }
+      }
+    } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
+      dispatch(rememberLocalUserPlace(placeTypeLocation))
+    }
+  }
+}
diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index dd257e9b1..60f10a63a 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -5,8 +5,7 @@ import * as locationActions from '../../actions/location'
 import Icon from '../narrative/icon'
 import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
-import { isBlank } from '../../util/ui'
-import { getPersistenceStrategy, isWork } from '../../util/user'
+import { getOtpUiLocations, getPersistenceStrategy } from '../../util/user'
 
 /**
  * Custom icon component that renders based on the user location icon prop.
@@ -20,19 +19,6 @@ const UserLocationIcon = ({ userLocation }) => {
   return <Icon name={finalIcon} />
 }
 
-/**
- * Convert an entry from persisted user savedLocations into LocationField locations:
- * - The icon for "Work" places is changed to 'work',
- * - The name attribute is filled with the place address if available.
- */
-function convertToLocationFieldLocation (place) {
-  return {
-    ...place,
-    icon: isWork(place) ? 'work' : place.icon,
-    name: place.address
-  }
-}
-
 /**
  * This higher-order component connects the target (styled) LocationField to the
  * redux store.
@@ -52,30 +38,24 @@ export default function connectLocationField (StyledLocationField, options = {})
     includeLocation = false
   } = options
   const mapStateToProps = (state, ownProps) => {
-    const { config, currentQuery, location, transitIndex, user } = state.otp
-    const { loggedInUser } = state.user
+    const { config, currentQuery, location, transitIndex } = state.otp
     const { currentPosition, nearbyStops, sessionSearches } = location
     const activeSearch = getActiveSearch(state.otp)
     const query = activeSearch ? activeSearch.query : currentQuery
-    const { persistence } = config
-    const persistenceStrategy = getPersistenceStrategy(persistence)
 
     // Display saved locations and recent places according to the configured persistence strategy,
-    // unless displaying user locations is disabled via prop.
+    // unless displaying user locations is disabled via prop (e.g. in the saved-place editor
+    // when the loggedInUser defines their saved locations).
     let userSavedLocations = []
     let recentPlaces = []
     if (!excludeSavedLocations) {
+      const { localUser, loggedInUser } = state.user
+      const persistenceStrategy = getPersistenceStrategy(config.persistence)
       if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
-        // Remove locations with blank addresses, and
-        // modify loggedInUserLocations to conform to LocationField requirements.
-        userSavedLocations = loggedInUser
-          ? loggedInUser.savedLocations
-            .filter(loc => !isBlank(loc.address))
-            .map(convertToLocationFieldLocation)
-          : []
+        userSavedLocations = getOtpUiLocations(loggedInUser)
       } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-        userSavedLocations = user.locations
-        recentPlaces = user.recentPlaces
+        userSavedLocations = localUser.locations
+        recentPlaces = localUser.recentPlaces
       }
     }
 
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index cd056370b..9adf31725 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -69,7 +69,7 @@ class UserSettings extends Component {
       deleteLocalUserRecentPlace,
       deleteLocalUserSavedPlace,
       deleteLocalUserStop,
-      deleteUserPlace,
+      deleteLoggedInUserPlace,
       forgetSearch,
       localUser,
       loggedInUser,
@@ -82,7 +82,7 @@ class UserSettings extends Component {
     } = this.props
 
     if (loggedInUser && persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
-      // Add id attribute using index, that will be used to call deleteUserPlace.
+      // Add id attribute using index, that will be used to call deleteLoggedInUserPlace.
       const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
         ...loc,
         id: index
@@ -102,7 +102,7 @@ class UserSettings extends Component {
           <Places
             basePath={PLACES_PATH}
             header={savedPlacesHeader}
-            onDelete={deleteUserPlace}
+            onDelete={deleteLoggedInUserPlace}
             places={loggedInUserLocations}
             separator={false}
           />
@@ -312,7 +312,7 @@ const mapDispatchToProps = {
   deleteLocalUserRecentPlace: userActions.deleteLocalUserRecentPlace,
   deleteLocalUserSavedPlace: userActions.deleteLocalUserSavedPlace,
   deleteLocalUserStop: userActions.deleteLocalUserStop,
-  deleteUserPlace: userActions.deleteUserPlace,
+  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace,
   forgetSearch: apiActions.forgetSearch,
   setLocation: mapActions.setLocation,
   setQueryParam: formActions.setQueryParam,
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index ce4e7a465..267b371d2 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -4,10 +4,12 @@ import { connect } from 'react-redux'
 import {
   clearLocation,
   forgetPlace,
-  rememberPlace,
   setLocation
 } from '../../actions/map'
+import { rememberPlace } from '../../actions/user'
+import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
+import { getOtpUiLocations, getPersistenceStrategy } from '../../util/user'
 
 // connect to the redux store
 
@@ -22,12 +24,20 @@ const mapStateToProps = (state, ownProps) => {
   // current query. FIXME: Determine with TriMet if this is desired behavior.
   const places = state.otp.currentQuery.intermediatePlaces.filter(p => p)
   const { localUser, loggedInUser } = state.user
-  const trueUser = loggedInUser || localUser
+
+  const { persistence } = state.otp.config
+  const persistenceStrategy = getPersistenceStrategy(persistence)
+  let userSavedLocations = []
+  if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
+    userSavedLocations = getOtpUiLocations(loggedInUser)
+  } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
+    userSavedLocations = localUser.locations
+  }
 
   return {
     fromLocation: from,
     intermediatePlaces: places,
-    locations: trueUser.savedLocations,
+    locations: userSavedLocations,
     showUserSettings,
     toLocation: to,
     visible: true
diff --git a/lib/components/user/places/favorite-place.js b/lib/components/user/places/favorite-place.js
index b8e587d68..c47edf0da 100644
--- a/lib/components/user/places/favorite-place.js
+++ b/lib/components/user/places/favorite-place.js
@@ -54,8 +54,8 @@ const StyledPlace = styled(Place)`
  */
 class FavoritePlace extends Component {
   _handleDelete = () => {
-    const { deleteUserPlace, place } = this.props
-    deleteUserPlace(place.id)
+    const { deleteLoggedInUserPlace, place } = this.props
+    deleteLoggedInUserPlace(place.id)
   }
 
   render () {
@@ -82,7 +82,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  deleteUserPlace: userActions.deleteUserPlace
+  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlace)
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 452a4bb46..d9e289244 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -3,10 +3,23 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import * as mapActions from '../../../actions/map'
-import { convertToPlace } from '../../../util/user'
+import { convertToLocation, convertToPlace } from '../../../util/user'
 import MainPanelPlace from './main-panel-place'
 
-const { matchLatLon } = coreUtils.map
+const { formatStoredPlaceName, getDetailText, matchLatLon } = coreUtils.map
+
+/**
+ * Calls convertToPlace, and adds some more fields to the resulting place for rendering.
+ */
+function convertToPlaceWithDetails (location) {
+  const place = convertToPlace(location)
+  return {
+    ...place,
+    details: getDetailText(location),
+    id: location.id,
+    title: formatStoredPlaceName(location)
+  }
+}
 
 /**
  * A shortcut button that sets the provided place as the 'from' or 'to' Place.
@@ -39,7 +52,10 @@ class PlaceShortcut extends Component {
     if (place.blank) {
       window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
     } else {
-      this._setFromOrToLocation(place)
+      // Convert to OTP UI location before sending events
+      // (to avoid issues when user clicks Forget/Save location
+      // multiple times subsequently)
+      this._setFromOrToLocation(convertToLocation(place))
     }
   }
 
@@ -57,7 +73,7 @@ class PlaceShortcut extends Component {
     const { onDelete, onView, path, place } = this.props
     // localStorage places (where path is not provided) need to be converted,
     // so the correct fields are passed to MainPanelPlace.
-    const convertedPlace = path ? place : convertToPlace(place)
+    const convertedPlace = path ? place : convertToPlaceWithDetails(place)
     return (
       <MainPanelPlace
         onClick={convertedPlace.address ? this._onSelect : null}
diff --git a/lib/util/user.js b/lib/util/user.js
index 87efb6b80..5efaaea95 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -1,6 +1,8 @@
 import coreUtils from '@opentripplanner/core-utils'
 
-const { getDetailText, formatStoredPlaceName } = coreUtils.map
+import { isBlank } from './ui'
+
+const { formatStoredPlaceName } = coreUtils.map
 
 /**
  * Determines whether a loggedInUser is a new user
@@ -87,17 +89,19 @@ export function positionHomeAndWorkFirst (userData) {
 
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
+ * - id is removed.
  * - The icon for "Work" places is changed to 'briefcase',
  * - The address attribute is filled with the 'name' if available.
  */
 export function convertToPlace (location) {
+  const { icon, lat, lon, name, type } = location
   return {
-    ...location,
-    address: location.name,
-    details: getDetailText(location),
-    icon: isWork(location) ? 'briefcase' : location.icon,
+    address: name,
+    icon: isWork(location) ? 'briefcase' : icon,
+    lat,
+    lon,
     name: formatStoredPlaceName(location, false),
-    title: formatStoredPlaceName(location)
+    type
   }
 }
 
@@ -110,3 +114,31 @@ export function convertToPlace (location) {
 export function getPersistenceStrategy (persistence) {
   return persistence && persistence.enabled && persistence.strategy
 }
+
+/**
+ * Convert an entry from persisted user savedLocations into LocationField locations:
+ * - The icon for "Work" places is changed to 'work',
+ * - The name attribute is filled with the place address.
+ */
+export function convertToLocation (place) {
+  const { address, icon, lat, lon, type } = place
+  return {
+    icon: isWork(place) ? 'work' : icon,
+    lat,
+    lon,
+    name: address,
+    type
+  }
+}
+
+/**
+ * Remove entries with blank addresses, and
+ * convert entries from persisted user savedLocations into LocationField locations.
+ */
+export function getOtpUiLocations (loggedInUser) {
+  return loggedInUser
+    ? loggedInUser.savedLocations
+      .filter(place => !isBlank(place.address))
+      .map(convertToLocation)
+    : []
+}

From 7d7604b48165d4cf6ef4565595b96358a0ce21f4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 25 Feb 2021 19:16:33 -0500
Subject: [PATCH 029/270] refactor(user/places/place): Remove actions (use
 explicit handlers)

---
 lib/components/form/connect-location-field.js |   2 +-
 lib/components/form/user-settings.js          |  38 ++---
 .../map/connected-endpoints-overlay.js        |   2 +-
 .../user/places/favorite-place-list.js        |  10 +-
 lib/components/user/places/favorite-place.js  |  15 +-
 .../user/places/main-panel-place.js           |  21 ++-
 lib/components/user/places/place-shortcut.js  |  32 +++-
 lib/components/user/places/place.js           | 159 +++++++-----------
 lib/util/user.js                              |  12 +-
 9 files changed, 141 insertions(+), 150 deletions(-)

diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index 60f10a63a..d2069ec21 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -54,7 +54,7 @@ export default function connectLocationField (StyledLocationField, options = {})
       if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
         userSavedLocations = getOtpUiLocations(loggedInUser)
       } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-        userSavedLocations = localUser.locations
+        userSavedLocations = localUser.savedLocations
         recentPlaces = localUser.recentPlaces
       }
     }
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 9adf31725..797ec36ec 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -17,7 +17,8 @@ import {
   PERSIST_TO_OTP_MIDDLEWARE,
   PLACES_PATH
 } from '../../util/constants'
-import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
+import { isBlank } from '../../util/ui'
+import { canDeletePlace, getPersistenceStrategy, isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
@@ -85,6 +86,7 @@ class UserSettings extends Component {
       // Add id attribute using index, that will be used to call deleteLoggedInUserPlace.
       const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
         ...loc,
+        blank: isBlank(loc.address),
         id: index
       }))
       const savedPlacesHeader = (
@@ -204,16 +206,18 @@ const Places = ({
       {header && <div className='section-header'>{header}</div>}
       <UnpaddedList>
         {places.length > 0
-          ? places.map((location, index) => (
-            <PlaceShortcut
-              key={location.id || index}
-              onDelete={onDelete}
-              onView={onView}
-              path={basePath && `${basePath}/${index}`}
-              place={location}
-            />
-          ))
-          : textIfEmpty && <small>{textIfEmpty}</small>
+          ? places.map((location, index) => {
+            return (
+              <PlaceShortcut
+                key={location.id || index}
+                onDelete={canDeletePlace(location, true) && onDelete}
+                onView={onView}
+                path={basePath && `${basePath}/${index}`}
+                place={location}
+              />
+            )
+          })
+          : (textIfEmpty && <small>{textIfEmpty}</small>)
         }
       </UnpaddedList>
     </>
@@ -239,18 +243,14 @@ class TripRequest extends Component {
     const name = summarizeQuery(query, user.savedLocations)
     const timeInfo = moment(timestamp).fromNow()
 
-    const place = {
-      details: timeInfo,
-      icon: 'clock-o',
-      name,
-      title: `${name} (${timeInfo})`
-    }
-
     return (
       <MainPanelPlace
+        details={timeInfo}
+        icon='clock-o'
+        name={name}
         onClick={this._onSelect}
         onDelete={canDelete && this._onForget}
-        place={place}
+        title={`${name} (${timeInfo})`}
       />
     )
   }
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index 267b371d2..4bcf2a2c3 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -31,7 +31,7 @@ const mapStateToProps = (state, ownProps) => {
   if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
     userSavedLocations = getOtpUiLocations(loggedInUser)
   } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-    userSavedLocations = localUser.locations
+    userSavedLocations = localUser.savedLocations
   }
 
   return {
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 1099ee06e..f48c32435 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 
 import { UnpaddedList } from '../../form/styled'
 import { CREATE_ACCOUNT_PLACES_PATH, PLACES_PATH } from '../../../util/constants'
-import FavoritePlace from './favorite-place'
+import FavoritePlace, { StyledPlace } from './favorite-place'
 
 /**
  * Renders an editable list user's favorite locations, and lets the user add a new one.
@@ -18,6 +18,7 @@ const FavoritePlaceList = ({ isCreating, loggedInUser }) => {
       <UnpaddedList>
         {savedLocations.map((place, index) => (
           <FavoritePlace
+            index={index}
             key={index}
             path={`${isCreating ? CREATE_ACCOUNT_PLACES_PATH : PLACES_PATH}/${index}`}
             place={place}
@@ -26,7 +27,12 @@ const FavoritePlaceList = ({ isCreating, loggedInUser }) => {
         )}
 
         {/* For adding a new place. */}
-        <FavoritePlace path={`${PLACES_PATH}/new`} />
+        <StyledPlace
+          icon='plus'
+          largeIcon
+          name='Add another place'
+          path={`${PLACES_PATH}/new`}
+        />
       </UnpaddedList>
     </div>
   )
diff --git a/lib/components/user/places/favorite-place.js b/lib/components/user/places/favorite-place.js
index c47edf0da..f4e7dab8d 100644
--- a/lib/components/user/places/favorite-place.js
+++ b/lib/components/user/places/favorite-place.js
@@ -3,11 +3,11 @@ import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import * as userActions from '../../../actions/user'
+import { canDeletePlace } from '../../../util/user'
 import Place, {
   ActionButton,
   ActionButtonPlaceholder,
   EDIT_LABEL,
-  getActionsForPlace,
   PlaceButton,
   PlaceContent,
   PlaceDetail,
@@ -16,7 +16,7 @@ import Place, {
 
 const FIELD_HEIGHT_PX = '60px'
 
-const StyledPlace = styled(Place)`
+export const StyledPlace = styled(Place)`
   align-items: stretch;
   display: flex;
   height: ${FIELD_HEIGHT_PX};
@@ -54,21 +54,24 @@ const StyledPlace = styled(Place)`
  */
 class FavoritePlace extends Component {
   _handleDelete = () => {
-    const { deleteLoggedInUserPlace, place } = this.props
-    deleteLoggedInUserPlace(place.id)
+    const { deleteLoggedInUserPlace, index } = this.props
+    deleteLoggedInUserPlace(index)
   }
 
   render () {
     const { path, place } = this.props
     const label = place && EDIT_LABEL
+    const { address, icon, name, type } = place
 
     return (
       <StyledPlace
-        actions={getActionsForPlace(place, this._handleDelete)}
         ariaLabel={label}
+        details={name && (address || `Set your ${type} address`)}
+        icon={icon}
         largeIcon
+        name={name || address}
+        onDelete={canDeletePlace(place) && this._handleDelete}
         path={path}
-        place={place}
         title={label}
       />
     )
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
index 5ad34ad69..9500bc307 100644
--- a/lib/components/user/places/main-panel-place.js
+++ b/lib/components/user/places/main-panel-place.js
@@ -4,7 +4,6 @@ import styled from 'styled-components'
 import Place, {
   ActionButton,
   EDIT_LABEL,
-  getActionsForPlace,
   PlaceDetail,
   PlaceName
 } from './place'
@@ -23,31 +22,35 @@ const StyledPlace = styled(Place)`
 `
 
 /**
- * Wrapper for the Place component in the main panel that
- * handles deleting the place.
+ * Wrapper for the Place component in the main panel.
  */
 const MainPanelPlace = ({
+  details,
+  icon,
+  name,
   onClick,
   onDelete,
   onView,
   path,
-  place
+  title
 }) => {
-  // Determine title and aria label.
+  //?? Determine aria label
   const isPlanAction = !!onClick
   const planLabel = 'Plan an itinerary using this entry'
-  const label = isPlanAction ? planLabel : EDIT_LABEL
-  const title = isPlanAction ? `${place.title || place.address}\n${planLabel}` : EDIT_LABEL
+  const label = isPlanAction ? `${title}\n${planLabel}` : EDIT_LABEL
 
   return (
     <StyledPlace
-      actions={getActionsForPlace(place, onDelete, onView)}
       ariaLabel={label}
       buttonStyle='link'
       className='place-item'
+      details={details}
+      icon={icon}
+      name={name}
       onClick={onClick}
+      onDelete={onDelete}
+      onView={onView}
       path={path}
-      place={place}
       placeDetailClassName='place-detail'
       placeTextClassName='place-text'
       title={title}
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index d9e289244..a89914bf8 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -9,15 +9,13 @@ import MainPanelPlace from './main-panel-place'
 const { formatStoredPlaceName, getDetailText, matchLatLon } = coreUtils.map
 
 /**
- * Calls convertToPlace, and adds some more fields to the resulting place for rendering.
+ * Calls convertToPlace, and adds the id of the original location.
  */
-function convertToPlaceWithDetails (location) {
+function convertToPlaceWithId (location) {
   const place = convertToPlace(location)
   return {
     ...place,
-    details: getDetailText(location),
-    id: location.id,
-    title: formatStoredPlaceName(location)
+    id: location.id
   }
 }
 
@@ -73,14 +71,32 @@ class PlaceShortcut extends Component {
     const { onDelete, onView, path, place } = this.props
     // localStorage places (where path is not provided) need to be converted,
     // so the correct fields are passed to MainPanelPlace.
-    const convertedPlace = path ? place : convertToPlaceWithDetails(place)
+    const convertedPlace = path ? place : convertToPlaceWithId(place)
+
+    const { address, blank, icon, name, type } = convertedPlace
+    const placeTitle = formatStoredPlaceName(place)
+    const placeAddress = blank ? null : address
+
+    let placeName
+    let details
+    if (path) { // for middleware places
+      placeName = name || address
+      details = name && (address || `Set your ${type} address`)
+    } else {
+      placeName = formatStoredPlaceName(place, false)
+      details = getDetailText(place)
+    }
+
     return (
       <MainPanelPlace
-        onClick={convertedPlace.address ? this._onSelect : null}
+        details={details}
+        icon={icon}
+        name={placeName}
+        onClick={(path && !address) ? null : this._onSelect}
         onDelete={onDelete && this._onDelete}
         onView={onView && this._onView}
         path={path}
-        place={convertedPlace}
+        title={placeTitle || placeAddress}
       />
     )
   }
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 08ad7677d..e8de1a764 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -5,7 +5,6 @@ import styled from 'styled-components'
 
 import { LinkContainerWithQuery } from '../../form/connected-links'
 import NarrativeIcon from '../../narrative/icon'
-import { isHomeOrWork } from '../../../util/user'
 
 const Container = styled.li`
   align-items: stretch;
@@ -37,92 +36,32 @@ export const ActionButton = styled(Button)`
 export const ActionButtonPlaceholder = styled.span``
 
 export const EDIT_LABEL = 'Edit this place'
-
-/**
- * Obtains the actions (e.g. delete, view) for the given place and handlers:
- * - All places can be deleted, except Home and Work with empty addresses.
- * - Only 'stop' locations can be 'viewed'.
- */
-export function getActionsForPlace (place, onDelete, onView) {
-  if (!place) return []
-
-  const deleteAction = {
-    icon: 'trash-o',
-    onClick: onDelete,
-    title: 'Delete place'
-  }
-  const viewAction = {
-    icon: 'search',
-    onClick: onView,
-    title: 'View stop'
-  }
-
-  const actions = []
-
-  const isFixed = isHomeOrWork(place)
-  if (onView && place.type === 'stop') {
-    actions.push(viewAction)
-  }
-  if (onDelete && !place.blank && (!isFixed || place.address)) {
-    actions.push(deleteAction)
-  }
-
-  return actions
-}
+const VIEW_LABEL = 'View stop' // used for stops only.
+const DELETE_LABEL = 'Delete place'
 
 /**
  * Renders a clickable button for editing a user's favorite place,
- * and buttons for the provided actions (e.g. view, delete).
+ * and buttons for viewing and deleting the place if corresponding handlers are provided.
  */
 const Place = ({
-  actions,
   ariaLabel,
   buttonStyle,
   className,
   largeIcon,
   onClick,
+  onDelete,
+  onView,
   path,
-  place,
   placeDetailClassName,
   placeTextClassName,
-  title
+  title,
+
+  name,
+  icon,
+  details
 }) => {
   const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
-  let placeButton
-  if (place) {
-    const { address, details, icon, name, type } = place
-    placeButton = (
-      <PlaceButton
-        aria-label={ariaLabel}
-        bsStyle={buttonStyle}
-        onClick={onClick}
-        title={title}
-      >
-
-        {largeIcon && <Icon name={icon} size='2x' />}
-        <PlaceContent>
-          <PlaceText className={placeTextClassName}>
-            {!largeIcon && <Icon name={icon} />}
-            <PlaceName>{name || address}</PlaceName>
-          </PlaceText>
-
-          <PlaceDetail className={placeDetailClassName}>
-            {name && (details || address || `Set your ${type} address`)}
-          </PlaceDetail>
-        </PlaceContent>
-      </PlaceButton>
-    )
-  } else {
-    placeButton = (
-      <PlaceButton onClick={onClick}>
-        <Icon name='plus' size={iconSize} />
-        <PlaceContent>
-          Add another place
-        </PlaceContent>
-      </PlaceButton>
-    )
-  }
 
   return (
     <Container className={className}>
@@ -131,35 +70,53 @@ const Place = ({
         activeClassName=''
         to={to}
       >
-        {placeButton}
+        <PlaceButton
+          aria-label={ariaLabel}
+          bsStyle={buttonStyle}
+          onClick={onClick}
+          title={title}
+        >
+          {largeIcon && <Icon name={icon} size='2x' />}
+          <PlaceContent>
+            <PlaceText className={placeTextClassName}>
+              {!largeIcon && <Icon name={icon} />}
+              <PlaceName>{name}</PlaceName>
+            </PlaceText>
+
+            <PlaceDetail className={placeDetailClassName}>
+              {details}
+            </PlaceDetail>
+          </PlaceContent>
+        </PlaceButton>
       </LinkContainerWithQuery>
 
       {/* Action buttons. If none, render a placeholder. */}
-      {actions && actions.length
-        ? actions.map(({ icon: actionIcon, onClick: onAction, title: actionTitle }, index) => (
-          <ActionButton
-            aria-label={actionTitle}
-            bsStyle={buttonStyle}
-            key={index}
-            onClick={onAction}
-            title={actionTitle}
-          >
-            <Icon name={actionIcon} size={iconSize} />
-          </ActionButton>
-        ))
-        : <ActionButtonPlaceholder />
-      }
+      {onView && (
+        <ActionButton
+          aria-label={VIEW_LABEL}
+          bsStyle={buttonStyle}
+          onClick={onView}
+          title={VIEW_LABEL}
+        >
+          <Icon name='search' size={iconSize} />
+        </ActionButton>
+      )}
+      {onDelete && (
+        <ActionButton
+          aria-label={DELETE_LABEL}
+          bsStyle={buttonStyle}
+          onClick={onDelete}
+          title={DELETE_LABEL}
+        >
+          <Icon name='trash-o' size={iconSize} />
+        </ActionButton>
+      )}
+      {!onView && !onDelete && <ActionButtonPlaceholder />}
     </Container>
   )
 }
 
 Place.propTypes = {
-  /** The action buttons for the place. */
-  actions: PropTypes.arrayOf(PropTypes.shape({
-    icon: PropTypes.string,
-    onClick: PropTypes.func,
-    title: PropTypes.string
-  })),
   /** The aria-label for the main button */
   ariaLabel: PropTypes.string,
   /** The Bootstrap style to apply to buttons. */
@@ -170,21 +127,19 @@ Place.propTypes = {
   onClick: PropTypes.func,
   /** The path to navigate to on click. */
   path: PropTypes.string,
-  /** The place to render. */
-  place: PropTypes.shape({
-    address: PropTypes.string,
-    details: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    title: PropTypes.string,
-    type: PropTypes.string
-  }),
   /** CSS class name for the place details. */
   placeDetailClassName: PropTypes.string,
   /** CSS class name for the place name. */
   placeTextClassName: PropTypes.string,
   /** The title for the main button */
-  title: PropTypes.string
+  title: PropTypes.string//,
+
+  //name,
+  //icon,
+  //details
+  //onView
+  //onDelete
+
 }
 
 export default Place
diff --git a/lib/util/user.js b/lib/util/user.js
index 5efaaea95..02cc72596 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -121,12 +121,12 @@ export function getPersistenceStrategy (persistence) {
  * - The name attribute is filled with the place address.
  */
 export function convertToLocation (place) {
-  const { address, icon, lat, lon, type } = place
+  const { address, icon, lat, lon, name, type } = place
   return {
     icon: isWork(place) ? 'work' : icon,
     lat,
     lon,
-    name: address,
+    name: address || name,
     type
   }
 }
@@ -142,3 +142,11 @@ export function getOtpUiLocations (loggedInUser) {
       .map(convertToLocation)
     : []
 }
+
+/**
+ * Determines whether to allow a place to be deleted.
+ * @returns true if a place is not 'home' or 'work', or if it is, it should have an address or not be marked blank'.
+ */
+export function canDeletePlace (place, useBlankFlag) {
+  return !isHomeOrWork(place) || (useBlankFlag && !place.blank) || place.address
+}

From 2faf061e05123ca247df6ceca1f761eabb97a5a7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 25 Feb 2021 19:23:54 -0500
Subject: [PATCH 030/270] refactor(actions/map): Fix stop action names

---
 lib/actions/map.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index f2912acb4..326017d1b 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -23,8 +23,8 @@ const settingLocation = createAction('SET_LOCATION')
 const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
 
 // Public actions
-export const forgetStop = createAction('DELETE_LOCAL_USER_STOP')
-export const rememberStop = createAction('REMEMBER_LOCAL_USER_STOP')
+export const forgetStop = createAction('FORGET_STOP')
+export const rememberStop = createAction('REMEMBER_STOP')
 
 /**
  * Dispatches the action to delete a saved or recent place from localStorage.

From 47c5daac0e86a1a7314efdd950d31e3c765e2719 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 25 Feb 2021 22:13:16 -0500
Subject: [PATCH 031/270] refactor(PlaceShortcut): Fix tooltips and save/forget
 home/work from map.

---
 lib/components/user/places/place-shortcut.js | 12 ++++++------
 lib/util/user.js                             |  7 ++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index a89914bf8..27978652e 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -71,19 +71,19 @@ class PlaceShortcut extends Component {
     const { onDelete, onView, path, place } = this.props
     // localStorage places (where path is not provided) need to be converted,
     // so the correct fields are passed to MainPanelPlace.
-    const convertedPlace = path ? place : convertToPlaceWithId(place)
-
-    const { address, blank, icon, name, type } = convertedPlace
-    const placeTitle = formatStoredPlaceName(place)
-    const placeAddress = blank ? null : address
+    const convertedPlace = path ? place : convertToPlace(place, true)
+    const { address, icon, name, type } = convertedPlace
 
     let placeName
+    let placeTitle
     let details
     if (path) { // for middleware places
       placeName = name || address
       details = name && (address || `Set your ${type} address`)
+      placeTitle = `${placeName}${details && ` (${details})`}`
     } else {
       placeName = formatStoredPlaceName(place, false)
+      placeTitle = formatStoredPlaceName(place)
       details = getDetailText(place)
     }
 
@@ -96,7 +96,7 @@ class PlaceShortcut extends Component {
         onDelete={onDelete && this._onDelete}
         onView={onView && this._onView}
         path={path}
-        title={placeTitle || placeAddress}
+        title={placeTitle}
       />
     )
   }
diff --git a/lib/util/user.js b/lib/util/user.js
index 02cc72596..2ad3a7cfd 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -89,15 +89,16 @@ export function positionHomeAndWorkFirst (userData) {
 
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
- * - id is removed.
+ * - id is included if requested,
  * - The icon for "Work" places is changed to 'briefcase',
  * - The address attribute is filled with the 'name' if available.
  */
-export function convertToPlace (location) {
-  const { icon, lat, lon, name, type } = location
+export function convertToPlace (location, includeId) {
+  const { icon, id, lat, lon, name, type } = location
   return {
     address: name,
     icon: isWork(location) ? 'briefcase' : icon,
+    id: includeId ? id : undefined,
     lat,
     lon,
     name: formatStoredPlaceName(location, false),

From d5cf4da180605949f77d561611929b4c70ff2514 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 14:01:03 -0500
Subject: [PATCH 032/270] refactor(places): Decouple styling and rendering by
 place type

---
 lib/components/form/user-settings.js          | 37 +++++---
 lib/components/user/places/cached-place.js    | 53 +++++++++++
 .../user/places/favorite-place-list.js        | 16 ++--
 lib/components/user/places/favorite-place.js  | 91 -------------------
 .../user/places/main-panel-place.js           | 61 -------------
 lib/components/user/places/place-shortcut.js  | 50 ++--------
 lib/components/user/places/saved-place.js     | 51 +++++++++++
 lib/components/user/places/styled.js          | 80 ++++++++++++++++
 lib/util/user.js                              |  8 +-
 9 files changed, 231 insertions(+), 216 deletions(-)
 create mode 100644 lib/components/user/places/cached-place.js
 delete mode 100644 lib/components/user/places/favorite-place.js
 delete mode 100644 lib/components/user/places/main-panel-place.js
 create mode 100644 lib/components/user/places/saved-place.js
 create mode 100644 lib/components/user/places/styled.js

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 797ec36ec..f98f40623 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -10,19 +10,35 @@ import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
-import MainPanelPlace from '../user/places/main-panel-place'
+import CachedPlace from '../user/places/cached-place'
+import SavedPlace from '../user/places/saved-place'
 import PlaceShortcut from '../user/places/place-shortcut'
+import { MainPanelPlace } from '../user/places/styled'
 import {
   PERSIST_TO_LOCAL_STORAGE,
-  PERSIST_TO_OTP_MIDDLEWARE,
-  PLACES_PATH
+  PERSIST_TO_OTP_MIDDLEWARE
 } from '../../util/constants'
 import { isBlank } from '../../util/ui'
-import { canDeletePlace, getPersistenceStrategy, isHome, isWork } from '../../util/user'
+import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
 
+/**
+ * Associate a styled Place component to the provided Place component for rendering.
+ */
+function stylePlace (BasePlaceComponent) {
+  return props => (
+    <BasePlaceComponent
+      PlaceComponent={MainPanelPlace}
+      {...props}
+    />
+  )
+}
+
+const StyledCachedPlace = stylePlace(CachedPlace)
+const StyledSavedPlace = stylePlace(SavedPlace)
+
 class UserSettings extends Component {
   _disableTracking = () => {
     const { localUser, localUserTripRequests, toggleTracking } = this.props
@@ -70,7 +86,6 @@ class UserSettings extends Component {
       deleteLocalUserRecentPlace,
       deleteLocalUserSavedPlace,
       deleteLocalUserStop,
-      deleteLoggedInUserPlace,
       forgetSearch,
       localUser,
       loggedInUser,
@@ -102,13 +117,11 @@ class UserSettings extends Component {
       return (
         <div className={`user-settings ${className}`}>
           <Places
-            basePath={PLACES_PATH}
             header={savedPlacesHeader}
-            onDelete={deleteLoggedInUserPlace}
+            PlaceComponent={StyledSavedPlace}
             places={loggedInUserLocations}
             separator={false}
           />
-
           <RecentTrips
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
@@ -148,7 +161,6 @@ class UserSettings extends Component {
             onDelete={deleteLocalUserRecentPlace}
             places={recentPlaces}
           />}
-
           <RecentTrips
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
@@ -191,10 +203,10 @@ class UserSettings extends Component {
  * Displays a list of places with a header.
  */
 const Places = ({
-  basePath,
   header,
   onDelete,
   onView,
+  PlaceComponent = StyledCachedPlace,
   places,
   separator = true,
   textIfEmpty
@@ -209,11 +221,12 @@ const Places = ({
           ? places.map((location, index) => {
             return (
               <PlaceShortcut
+                index={index}
                 key={location.id || index}
-                onDelete={canDeletePlace(location, true) && onDelete}
+                onDelete={onDelete}
                 onView={onView}
-                path={basePath && `${basePath}/${index}`}
                 place={location}
+                PlaceComponent={PlaceComponent}
               />
             )
           })
diff --git a/lib/components/user/places/cached-place.js b/lib/components/user/places/cached-place.js
new file mode 100644
index 000000000..5b03b24c7
--- /dev/null
+++ b/lib/components/user/places/cached-place.js
@@ -0,0 +1,53 @@
+import coreUtils from '@opentripplanner/core-utils'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+const { formatStoredPlaceName, getDetailText } = coreUtils.map
+
+/**
+ * Wrapper for the Place component for places cached in localStorage.
+ */
+class CachedPlace extends Component {
+  _onView = () => {
+    const { onView, place } = this.props
+    onView({ stopId: place.id })
+  }
+
+  _onDelete = () => {
+    const { onDelete, place } = this.props
+    onDelete(place.id)
+  }
+
+  render () {
+    const { onClick, onDelete, onView, place, PlaceComponent } = this.props
+    const { blank, icon, type } = place
+
+    const placeName = formatStoredPlaceName(place, false)
+    const placeTitle = formatStoredPlaceName(place)
+    const details = getDetailText(place)
+    const canDelete = !blank && ['stop', 'home', 'work', 'recent'].indexOf(type) !== -1
+
+    return (
+      <PlaceComponent
+        details={details}
+        icon={icon}
+        name={placeName}
+        onClick={onClick}
+        onDelete={canDelete && onDelete && this._onDelete}
+        onView={onView && this._onView}
+        title={placeTitle}
+      />
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {}
+}
+
+const mapDispatchToProps = {
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CachedPlace)
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index f48c32435..425b96aeb 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -3,8 +3,10 @@ import { ControlLabel } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
 import { UnpaddedList } from '../../form/styled'
-import { CREATE_ACCOUNT_PLACES_PATH, PLACES_PATH } from '../../../util/constants'
-import FavoritePlace, { StyledPlace } from './favorite-place'
+import { CREATE_ACCOUNT_PLACES_PATH } from '../../../util/constants'
+import { getPlaceBasePath } from '../../../util/user'
+import SavedPlace from './saved-place'
+import { FavoritePlace } from './styled'
 
 /**
  * Renders an editable list user's favorite locations, and lets the user add a new one.
@@ -17,21 +19,21 @@ const FavoritePlaceList = ({ isCreating, loggedInUser }) => {
       <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
       <UnpaddedList>
         {savedLocations.map((place, index) => (
-          <FavoritePlace
+          <SavedPlace
             index={index}
+            isCreating={isCreating}
             key={index}
-            path={`${isCreating ? CREATE_ACCOUNT_PLACES_PATH : PLACES_PATH}/${index}`}
             place={place}
+            PlaceComponent={FavoritePlace}
           />
         )
         )}
 
         {/* For adding a new place. */}
-        <StyledPlace
+        <FavoritePlace
           icon='plus'
-          largeIcon
           name='Add another place'
-          path={`${PLACES_PATH}/new`}
+          path={`${getPlaceBasePath(isCreating)}/new`}
         />
       </UnpaddedList>
     </div>
diff --git a/lib/components/user/places/favorite-place.js b/lib/components/user/places/favorite-place.js
deleted file mode 100644
index f4e7dab8d..000000000
--- a/lib/components/user/places/favorite-place.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
-
-import * as userActions from '../../../actions/user'
-import { canDeletePlace } from '../../../util/user'
-import Place, {
-  ActionButton,
-  ActionButtonPlaceholder,
-  EDIT_LABEL,
-  PlaceButton,
-  PlaceContent,
-  PlaceDetail,
-  Icon
-} from './place'
-
-const FIELD_HEIGHT_PX = '60px'
-
-export const StyledPlace = styled(Place)`
-  align-items: stretch;
-  display: flex;
-  height: ${FIELD_HEIGHT_PX};
-  margin-bottom: 10px;
-
-  ${PlaceButton} {
-    align-items: center;
-    display: flex;
-    flex: 1 0 0;
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-  }
-  ${PlaceContent} {
-    display: inline-block;
-    margin-left: 10px;
-  }
-  ${PlaceDetail} {
-    color: #888;
-    display: block;
-  }
-  ${Icon} {
-    color: #888;
-    flex-shrink: 0;
-  }
-  ${ActionButton}, ${ActionButtonPlaceholder} {
-    margin-left: 4px;
-    width: ${FIELD_HEIGHT_PX};
-  }
-`
-
-/**
- * Wrapper for the Place component in FavoritePlaceList that
- * handles deleting the place.
- */
-class FavoritePlace extends Component {
-  _handleDelete = () => {
-    const { deleteLoggedInUserPlace, index } = this.props
-    deleteLoggedInUserPlace(index)
-  }
-
-  render () {
-    const { path, place } = this.props
-    const label = place && EDIT_LABEL
-    const { address, icon, name, type } = place
-
-    return (
-      <StyledPlace
-        ariaLabel={label}
-        details={name && (address || `Set your ${type} address`)}
-        icon={icon}
-        largeIcon
-        name={name || address}
-        onDelete={canDeletePlace(place) && this._handleDelete}
-        path={path}
-        title={label}
-      />
-    )
-  }
-}
-
-// connect to redux store
-
-const mapStateToProps = (state, ownProps) => {
-  return {}
-}
-
-const mapDispatchToProps = {
-  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlace)
diff --git a/lib/components/user/places/main-panel-place.js b/lib/components/user/places/main-panel-place.js
deleted file mode 100644
index 9500bc307..000000000
--- a/lib/components/user/places/main-panel-place.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import Place, {
-  ActionButton,
-  EDIT_LABEL,
-  PlaceDetail,
-  PlaceName
-} from './place'
-
-const StyledPlace = styled(Place)`
-  ${PlaceName} {
-    margin-left: 0.25em;
-  }
-  ${PlaceDetail} {
-    display: block;
-    height: 100%;
-  }
-  ${ActionButton} {
-    width: 40px;
-  }
-`
-
-/**
- * Wrapper for the Place component in the main panel.
- */
-const MainPanelPlace = ({
-  details,
-  icon,
-  name,
-  onClick,
-  onDelete,
-  onView,
-  path,
-  title
-}) => {
-  //?? Determine aria label
-  const isPlanAction = !!onClick
-  const planLabel = 'Plan an itinerary using this entry'
-  const label = isPlanAction ? `${title}\n${planLabel}` : EDIT_LABEL
-
-  return (
-    <StyledPlace
-      ariaLabel={label}
-      buttonStyle='link'
-      className='place-item'
-      details={details}
-      icon={icon}
-      name={name}
-      onClick={onClick}
-      onDelete={onDelete}
-      onView={onView}
-      path={path}
-      placeDetailClassName='place-detail'
-      placeTextClassName='place-text'
-      title={title}
-    />
-  )
-}
-
-export default MainPanelPlace
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 27978652e..aea6d4c1b 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -3,21 +3,9 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import * as mapActions from '../../../actions/map'
-import { convertToLocation, convertToPlace } from '../../../util/user'
-import MainPanelPlace from './main-panel-place'
+import { convertToLocation } from '../../../util/user'
 
-const { formatStoredPlaceName, getDetailText, matchLatLon } = coreUtils.map
-
-/**
- * Calls convertToPlace, and adds the id of the original location.
- */
-function convertToPlaceWithId (location) {
-  const place = convertToPlace(location)
-  return {
-    ...place,
-    id: location.id
-  }
-}
+const { matchLatLon } = coreUtils.map
 
 /**
  * A shortcut button that sets the provided place as the 'from' or 'to' Place.
@@ -68,35 +56,15 @@ class PlaceShortcut extends Component {
   }
 
   render () {
-    const { onDelete, onView, path, place } = this.props
-    // localStorage places (where path is not provided) need to be converted,
-    // so the correct fields are passed to MainPanelPlace.
-    const convertedPlace = path ? place : convertToPlace(place, true)
-    const { address, icon, name, type } = convertedPlace
-
-    let placeName
-    let placeTitle
-    let details
-    if (path) { // for middleware places
-      placeName = name || address
-      details = name && (address || `Set your ${type} address`)
-      placeTitle = `${placeName}${details && ` (${details})`}`
-    } else {
-      placeName = formatStoredPlaceName(place, false)
-      placeTitle = formatStoredPlaceName(place)
-      details = getDetailText(place)
-    }
-
+    const { index, onDelete, onView, path, place, PlaceComponent } = this.props
     return (
-      <MainPanelPlace
-        details={details}
-        icon={icon}
-        name={placeName}
-        onClick={(path && !address) ? null : this._onSelect}
-        onDelete={onDelete && this._onDelete}
-        onView={onView && this._onView}
+      <PlaceComponent
+        index={index}
+        onClick={this._onSelect}
+        onDelete={onDelete}
+        onView={onView}
         path={path}
-        title={placeTitle}
+        place={place}
       />
     )
   }
diff --git a/lib/components/user/places/saved-place.js b/lib/components/user/places/saved-place.js
new file mode 100644
index 000000000..d09105328
--- /dev/null
+++ b/lib/components/user/places/saved-place.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import * as userActions from '../../../actions/user'
+import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
+
+const EDIT_LABEL = 'Edit this place'
+
+/**
+ * Wrapper for the Place component for saved places in OTP Middleware.
+ */
+class SavedPlace extends Component {
+  _handleDelete = () => {
+    const { deleteLoggedInUserPlace, index } = this.props
+    deleteLoggedInUserPlace(index)
+  }
+
+  render () {
+    const { isCreating, index, label, onClick, place, PlaceComponent } = this.props
+    const placeLabel = place && (label || EDIT_LABEL)
+    const { address, icon, name, type } = place
+    const canDelete = !isHomeOrWork(place) || address
+    //const placeTitle = `${placeName}${details && ` (${details})`}`
+
+    return (
+      <PlaceComponent
+        ariaLabel={placeLabel}
+        details={name && (address || `Set your ${type} address`)}
+        icon={icon}
+        name={name || address}
+        onClick={address && onClick}
+        onDelete={canDelete && this._handleDelete}
+        path={`${getPlaceBasePath(isCreating)}/${index}`}
+        title={placeLabel}
+      />
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = {
+  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SavedPlace)
diff --git a/lib/components/user/places/styled.js b/lib/components/user/places/styled.js
new file mode 100644
index 000000000..775f779e5
--- /dev/null
+++ b/lib/components/user/places/styled.js
@@ -0,0 +1,80 @@
+import styled from 'styled-components'
+
+import Place, {
+  ActionButton,
+  ActionButtonPlaceholder,
+  Icon,
+  PlaceButton,
+  PlaceContent,
+  PlaceDetail,
+  PlaceName
+} from './place'
+
+// Styles and exports for favorite place components
+// used in the My account page.
+
+const MY_PLACE_FIELD_HEIGHT_PX = '60px'
+
+const StyledFavoritePlace = styled(Place)`
+  align-items: stretch;
+  display: flex;
+  height: ${MY_PLACE_FIELD_HEIGHT_PX};
+  margin-bottom: 10px;
+
+  ${PlaceButton} {
+    align-items: center;
+    display: flex;
+    flex: 1 0 0;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+  }
+  ${PlaceContent} {
+    display: inline-block;
+    margin-left: 10px;
+  }
+  ${PlaceDetail} {
+    color: #888;
+    display: block;
+  }
+  ${Icon} {
+    color: #888;
+    flex-shrink: 0;
+  }
+  ${ActionButton}, ${ActionButtonPlaceholder} {
+    margin-left: 4px;
+    width: ${MY_PLACE_FIELD_HEIGHT_PX};
+  }
+`
+
+export const FavoritePlace = props => (
+  <StyledFavoritePlace
+    largeIcon
+    {...props}
+  />
+)
+
+// Styles and exports for the place component
+// used in the main panel.
+const StyledMainPanelPlace = styled(Place)`
+  ${PlaceName} {
+    margin-left: 0.25em;
+  }
+  ${PlaceDetail} {
+    display: block;
+    height: 100%;
+  }
+  ${ActionButton} {
+    width: 40px;
+  }
+`
+
+export const MainPanelPlace = props => (
+  <StyledMainPanelPlace
+    buttonStyle='link'
+    className='place-item'
+    placeDetailClassName='place-detail'
+    placeTextClassName='place-text'
+    {...props}
+  />
+)
diff --git a/lib/util/user.js b/lib/util/user.js
index 2ad3a7cfd..f20c7a16f 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -1,5 +1,6 @@
 import coreUtils from '@opentripplanner/core-utils'
 
+import { CREATE_ACCOUNT_PLACES_PATH, PLACES_PATH } from './constants'
 import { isBlank } from './ui'
 
 const { formatStoredPlaceName } = coreUtils.map
@@ -145,9 +146,8 @@ export function getOtpUiLocations (loggedInUser) {
 }
 
 /**
- * Determines whether to allow a place to be deleted.
- * @returns true if a place is not 'home' or 'work', or if it is, it should have an address or not be marked blank'.
+ * Obtains the base path for editing a place depending on whether user is creating a new account.
  */
-export function canDeletePlace (place, useBlankFlag) {
-  return !isHomeOrWork(place) || (useBlankFlag && !place.blank) || place.address
+export function getPlaceBasePath (isCreating) {
+  return isCreating ? CREATE_ACCOUNT_PLACES_PATH : PLACES_PATH
 }

From 6861f954467e89262574e06972c3c6bcef6b531b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 14:30:51 -0500
Subject: [PATCH 033/270] refactor(places): Tweak tooltips and aria-labels

---
 lib/components/form/user-settings.js       |  1 +
 lib/components/user/places/cached-place.js |  3 +++
 lib/components/user/places/saved-place.js  | 20 ++++++++++++--------
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index f98f40623..0d6d826b7 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -258,6 +258,7 @@ class TripRequest extends Component {
 
     return (
       <MainPanelPlace
+        aria-label='Plan itinerary'
         details={timeInfo}
         icon='clock-o'
         name={name}
diff --git a/lib/components/user/places/cached-place.js b/lib/components/user/places/cached-place.js
index 5b03b24c7..e9d0a708c 100644
--- a/lib/components/user/places/cached-place.js
+++ b/lib/components/user/places/cached-place.js
@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 
 const { formatStoredPlaceName, getDetailText } = coreUtils.map
 
+const PLAN_LABEL = 'Plan itinerary with this place'
+
 /**
  * Wrapper for the Place component for places cached in localStorage.
  */
@@ -29,6 +31,7 @@ class CachedPlace extends Component {
 
     return (
       <PlaceComponent
+        ariaLabel={PLAN_LABEL}
         details={details}
         icon={icon}
         name={placeName}
diff --git a/lib/components/user/places/saved-place.js b/lib/components/user/places/saved-place.js
index d09105328..4cad29462 100644
--- a/lib/components/user/places/saved-place.js
+++ b/lib/components/user/places/saved-place.js
@@ -5,6 +5,7 @@ import * as userActions from '../../../actions/user'
 import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
 
 const EDIT_LABEL = 'Edit this place'
+const PLAN_LABEL = 'Plan itinerary with this place'
 
 /**
  * Wrapper for the Place component for saved places in OTP Middleware.
@@ -16,22 +17,25 @@ class SavedPlace extends Component {
   }
 
   render () {
-    const { isCreating, index, label, onClick, place, PlaceComponent } = this.props
-    const placeLabel = place && (label || EDIT_LABEL)
+    const { isCreating, index, onClick, place, PlaceComponent } = this.props
     const { address, icon, name, type } = place
     const canDelete = !isHomeOrWork(place) || address
-    //const placeTitle = `${placeName}${details && ` (${details})`}`
+    const placeName = name || address
+    const details = name && (address || `Set your ${type} address`)
+    const useOnClick = address && onClick
+    const label = useOnClick ? PLAN_LABEL : EDIT_LABEL
+    const title = useOnClick ? `${placeName}${details && ` (${details})`}` : EDIT_LABEL
 
     return (
       <PlaceComponent
-        ariaLabel={placeLabel}
-        details={name && (address || `Set your ${type} address`)}
+        ariaLabel={label}
+        details={details}
         icon={icon}
-        name={name || address}
-        onClick={address && onClick}
+        name={placeName}
+        onClick={useOnClick}
         onDelete={canDelete && this._handleDelete}
         path={`${getPlaceBasePath(isCreating)}/${index}`}
-        title={placeLabel}
+        title={title}
       />
     )
   }

From 2b44cb0812da3a13f817c3aa7a8a30f15a7e75b8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 15:38:01 -0500
Subject: [PATCH 034/270] refactor: Tidy up code.

---
 lib/actions/user.js                           |  2 -
 lib/components/form/user-settings.js          | 14 ++----
 lib/components/user/places/cached-place.js    | 25 ++--------
 .../user/places/favorite-place-list.js        | 47 +++++++++----------
 lib/components/user/places/place-shortcut.js  | 17 ++-----
 lib/components/user/places/place.js           | 33 ++++++-------
 lib/components/user/places/saved-place.js     |  3 --
 lib/components/user/places/styled.js          |  7 +--
 lib/util/user.js                              | 10 ++--
 9 files changed, 58 insertions(+), 100 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 8324fef9b..4d776f9cc 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -517,8 +517,6 @@ export function deleteLoggedInUserPlace (placeIndex) {
   }
 }
 
-//Is there any way to do a factory interface??
-//If not, simplify the dispatch returns (remove dispatch).
 /**
  * Delete place data by id for the logged-in or local user
  * according to the persistence strategy.
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 0d6d826b7..2fa8e8f59 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -14,10 +14,7 @@ import CachedPlace from '../user/places/cached-place'
 import SavedPlace from '../user/places/saved-place'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { MainPanelPlace } from '../user/places/styled'
-import {
-  PERSIST_TO_LOCAL_STORAGE,
-  PERSIST_TO_OTP_MIDDLEWARE
-} from '../../util/constants'
+import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { isBlank } from '../../util/ui'
 import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
 import { UnpaddedList } from './styled'
@@ -48,7 +45,9 @@ class UserSettings extends Component {
 
     // If user has recents and does not confirm deletion, return without doing
     // anything.
-    if (hasRecents && !window.confirm('You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?')) {
+    if (hasRecents && !window.confirm(
+      'You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?'
+    )) {
       return
     }
     // Disable tracking if we reach this statement.
@@ -107,9 +106,7 @@ class UserSettings extends Component {
       const savedPlacesHeader = (
         <>
           My saved places (
-          <LinkWithQuery to='/account/settings'>
-              manage
-          </LinkWithQuery>
+          <LinkWithQuery to='/account/settings'>manage</LinkWithQuery>
           )
         </>
       )
@@ -258,7 +255,6 @@ class TripRequest extends Component {
 
     return (
       <MainPanelPlace
-        aria-label='Plan itinerary'
         details={timeInfo}
         icon='clock-o'
         name={name}
diff --git a/lib/components/user/places/cached-place.js b/lib/components/user/places/cached-place.js
index e9d0a708c..c9312727a 100644
--- a/lib/components/user/places/cached-place.js
+++ b/lib/components/user/places/cached-place.js
@@ -1,11 +1,8 @@
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
 
 const { formatStoredPlaceName, getDetailText } = coreUtils.map
 
-const PLAN_LABEL = 'Plan itinerary with this place'
-
 /**
  * Wrapper for the Place component for places cached in localStorage.
  */
@@ -23,34 +20,20 @@ class CachedPlace extends Component {
   render () {
     const { onClick, onDelete, onView, place, PlaceComponent } = this.props
     const { blank, icon, type } = place
-
-    const placeName = formatStoredPlaceName(place, false)
-    const placeTitle = formatStoredPlaceName(place)
-    const details = getDetailText(place)
     const canDelete = !blank && ['stop', 'home', 'work', 'recent'].indexOf(type) !== -1
 
     return (
       <PlaceComponent
-        ariaLabel={PLAN_LABEL}
-        details={details}
+        details={getDetailText(place)}
         icon={icon}
-        name={placeName}
+        name={formatStoredPlaceName(place, false)}
         onClick={onClick}
         onDelete={canDelete && onDelete && this._onDelete}
         onView={onView && this._onView}
-        title={placeTitle}
+        title={formatStoredPlaceName(place)}
       />
     )
   }
 }
 
-// connect to redux store
-
-const mapStateToProps = (state, ownProps) => {
-  return {}
-}
-
-const mapDispatchToProps = {
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CachedPlace)
+export default CachedPlace
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 425b96aeb..2f8f9f34b 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -12,33 +12,28 @@ import { FavoritePlace } from './styled'
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
  */
-const FavoritePlaceList = ({ isCreating, loggedInUser }) => {
-  const { savedLocations } = loggedInUser
-  return (
-    <div>
-      <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
-      <UnpaddedList>
-        {savedLocations.map((place, index) => (
-          <SavedPlace
-            index={index}
-            isCreating={isCreating}
-            key={index}
-            place={place}
-            PlaceComponent={FavoritePlace}
-          />
-        )
-        )}
-
-        {/* For adding a new place. */}
-        <FavoritePlace
-          icon='plus'
-          name='Add another place'
-          path={`${getPlaceBasePath(isCreating)}/new`}
+const FavoritePlaceList = ({ isCreating, loggedInUser }) => (
+  <div>
+    <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
+    <UnpaddedList>
+      {loggedInUser.savedLocations.map((place, index) => (
+        <SavedPlace
+          index={index}
+          isCreating={isCreating}
+          key={index}
+          place={place}
+          PlaceComponent={FavoritePlace}
         />
-      </UnpaddedList>
-    </div>
-  )
-}
+      ))}
+
+      <FavoritePlace
+        icon='plus'
+        name='Add another place'
+        path={`${getPlaceBasePath(isCreating)}/new`}
+      />
+    </UnpaddedList>
+  </div>
+)
 
 // connect to the redux store
 
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index aea6d4c1b..c16a89733 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -8,8 +8,8 @@ import { convertToLocation } from '../../../util/user'
 const { matchLatLon } = coreUtils.map
 
 /**
- * A shortcut button that sets the provided place as the 'from' or 'to' Place.
- * It wraps MainPanelPlace to let the user edit, view or delete the place.
+ * A shortcut button that wraps the provided PlaceComponent and sets
+ * the provided place as the 'from' or 'to' place.
  */
 class PlaceShortcut extends Component {
   /**
@@ -45,25 +45,14 @@ class PlaceShortcut extends Component {
     }
   }
 
-  _onView = () => {
-    const { onView, place } = this.props
-    onView({ stopId: place.id })
-  }
-
-  _onDelete = () => {
-    const { onDelete, place } = this.props
-    onDelete(place.id)
-  }
-
   render () {
-    const { index, onDelete, onView, path, place, PlaceComponent } = this.props
+    const { index, onDelete, onView, place, PlaceComponent } = this.props
     return (
       <PlaceComponent
         index={index}
         onClick={this._onSelect}
         onDelete={onDelete}
         onView={onView}
-        path={path}
         place={place}
       />
     )
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index e8de1a764..e00804dd7 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -35,30 +35,28 @@ export const ActionButton = styled(Button)`
 
 export const ActionButtonPlaceholder = styled.span``
 
-export const EDIT_LABEL = 'Edit this place'
 const VIEW_LABEL = 'View stop' // used for stops only.
 const DELETE_LABEL = 'Delete place'
 
 /**
- * Renders a clickable button for editing a user's favorite place,
+ * Renders a stylable clickable button for editing/selecting a user's favorite place,
  * and buttons for viewing and deleting the place if corresponding handlers are provided.
  */
 const Place = ({
   ariaLabel,
   buttonStyle,
   className,
+  details,
+  icon,
   largeIcon,
+  name,
   onClick,
   onDelete,
   onView,
   path,
   placeDetailClassName,
   placeTextClassName,
-  title,
-
-  name,
-  icon,
-  details
+  title
 }) => {
   const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
@@ -91,6 +89,7 @@ const Place = ({
       </LinkContainerWithQuery>
 
       {/* Action buttons. If none, render a placeholder. */}
+      {!onView && !onDelete && <ActionButtonPlaceholder />}
       {onView && (
         <ActionButton
           aria-label={VIEW_LABEL}
@@ -111,7 +110,6 @@ const Place = ({
           <Icon name='trash-o' size={iconSize} />
         </ActionButton>
       )}
-      {!onView && !onDelete && <ActionButtonPlaceholder />}
     </Container>
   )
 }
@@ -121,10 +119,20 @@ Place.propTypes = {
   ariaLabel: PropTypes.string,
   /** The Bootstrap style to apply to buttons. */
   buttonStyle: PropTypes.string,
+  /** The detail text displayed for the place */
+  details: PropTypes.string,
+  /** The font-awesome icon name for the place. */
+  icon: PropTypes.string,
   /** Whether to render icons large. */
   largeIcon: PropTypes.bool,
+  /** The displayed name for the place. */
+  name: PropTypes.string,
   /** Called when the "main" button is clicked. Takes precedence over the path prop. */
   onClick: PropTypes.func,
+  /** Determines whether the Delete button is shown. Called when the Delete button is clicked. */
+  onDelete: PropTypes.func,
+  /** Determines whether the View button is shown. Called when the View button is clicked. */
+  onView: PropTypes.func,
   /** The path to navigate to on click. */
   path: PropTypes.string,
   /** CSS class name for the place details. */
@@ -132,14 +140,7 @@ Place.propTypes = {
   /** CSS class name for the place name. */
   placeTextClassName: PropTypes.string,
   /** The title for the main button */
-  title: PropTypes.string//,
-
-  //name,
-  //icon,
-  //details
-  //onView
-  //onDelete
-
+  title: PropTypes.string
 }
 
 export default Place
diff --git a/lib/components/user/places/saved-place.js b/lib/components/user/places/saved-place.js
index 4cad29462..64b558386 100644
--- a/lib/components/user/places/saved-place.js
+++ b/lib/components/user/places/saved-place.js
@@ -5,7 +5,6 @@ import * as userActions from '../../../actions/user'
 import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
 
 const EDIT_LABEL = 'Edit this place'
-const PLAN_LABEL = 'Plan itinerary with this place'
 
 /**
  * Wrapper for the Place component for saved places in OTP Middleware.
@@ -23,12 +22,10 @@ class SavedPlace extends Component {
     const placeName = name || address
     const details = name && (address || `Set your ${type} address`)
     const useOnClick = address && onClick
-    const label = useOnClick ? PLAN_LABEL : EDIT_LABEL
     const title = useOnClick ? `${placeName}${details && ` (${details})`}` : EDIT_LABEL
 
     return (
       <PlaceComponent
-        ariaLabel={label}
         details={details}
         icon={icon}
         name={placeName}
diff --git a/lib/components/user/places/styled.js b/lib/components/user/places/styled.js
index 775f779e5..f751e5e55 100644
--- a/lib/components/user/places/styled.js
+++ b/lib/components/user/places/styled.js
@@ -13,12 +13,12 @@ import Place, {
 // Styles and exports for favorite place components
 // used in the My account page.
 
-const MY_PLACE_FIELD_HEIGHT_PX = '60px'
+const FAVORITE_PLACE_HEIGHT_PX = '60px'
 
 const StyledFavoritePlace = styled(Place)`
   align-items: stretch;
   display: flex;
-  height: ${MY_PLACE_FIELD_HEIGHT_PX};
+  height: ${FAVORITE_PLACE_HEIGHT_PX};
   margin-bottom: 10px;
 
   ${PlaceButton} {
@@ -43,7 +43,7 @@ const StyledFavoritePlace = styled(Place)`
   }
   ${ActionButton}, ${ActionButtonPlaceholder} {
     margin-left: 4px;
-    width: ${MY_PLACE_FIELD_HEIGHT_PX};
+    width: ${FAVORITE_PLACE_HEIGHT_PX};
   }
 `
 
@@ -56,6 +56,7 @@ export const FavoritePlace = props => (
 
 // Styles and exports for the place component
 // used in the main panel.
+
 const StyledMainPanelPlace = styled(Place)`
   ${PlaceName} {
     margin-left: 0.25em;
diff --git a/lib/util/user.js b/lib/util/user.js
index f20c7a16f..83c0243d7 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -90,16 +90,14 @@ export function positionHomeAndWorkFirst (userData) {
 
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
- * - id is included if requested,
  * - The icon for "Work" places is changed to 'briefcase',
  * - The address attribute is filled with the 'name' if available.
  */
-export function convertToPlace (location, includeId) {
-  const { icon, id, lat, lon, name, type } = location
+export function convertToPlace (location) {
+  const { icon, lat, lon, name, type } = location
   return {
     address: name,
     icon: isWork(location) ? 'briefcase' : icon,
-    id: includeId ? id : undefined,
     lat,
     lon,
     name: formatStoredPlaceName(location, false),
@@ -134,8 +132,8 @@ export function convertToLocation (place) {
 }
 
 /**
- * Remove entries with blank addresses, and
- * convert entries from persisted user savedLocations into LocationField locations.
+ * Remove entries with blank addresses, and convert entries
+ * from persisted user savedLocations into LocationField/EndpointOverlay locations.
  */
 export function getOtpUiLocations (loggedInUser) {
   return loggedInUser

From d0b5f675a018b65d206c270f7cca37cfccc9d7a1 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 17:49:04 -0500
Subject: [PATCH 035/270] refactor(user reducer): Move remaining user actions
 to user reducer.

---
 lib/actions/form.js                       |   7 +-
 lib/components/app/batch-routing-panel.js |   2 +-
 lib/components/app/call-taker-panel.js    |   2 +-
 lib/components/form/user-trip-settings.js |  10 +-
 lib/components/viewers/stop-time-cell.js  |   2 +-
 lib/components/viewers/stop-viewer.js     |  56 ++++++-----
 lib/reducers/create-otp-reducer.js        |  93 ++++---------------
 lib/reducers/create-user-reducer.js       | 107 ++++++++++++----------
 lib/util/state.js                         |   6 +-
 9 files changed, 128 insertions(+), 157 deletions(-)

diff --git a/lib/actions/form.js b/lib/actions/form.js
index 0e2688b74..ba5be1f6b 100644
--- a/lib/actions/form.js
+++ b/lib/actions/form.js
@@ -28,10 +28,11 @@ export const storeDefaultSettings = createAction('STORE_DEFAULT_SETTINGS')
 
 export function resetForm () {
   return function (dispatch, getState) {
-    const otpState = getState().otp
+    const { otp: otpState, user: userState } = getState()
     const { transitModes } = otpState.config.modes
-    if (otpState.user.defaults) {
-      dispatch(settingQueryParam(otpState.user.defaults))
+    const { defaults } = userState.localUser
+    if (defaults) {
+      dispatch(settingQueryParam(defaults))
     } else {
       // Get user overrides and apply to default query
       const userOverrides = coreUtils.storage.getItem('defaultQuery', {})
diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 8e62f1d8c..d7a75e49f 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -241,7 +241,7 @@ const mapStateToProps = (state, ownProps) => {
     activeSearch: getActiveSearch(state.otp),
     config: state.otp.config,
     currentQuery: state.otp.currentQuery,
-    expandAdvanced: state.otp.user.expandAdvanced,
+    expandAdvanced: state.user.localUser.expandAdvanced,
     possibleCombinations: state.otp.config.modes.combinations,
     showUserSettings
   }
diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 055b2a8d0..5c6a8a397 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -252,7 +252,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     activeSearch: getActiveSearch(state.otp),
     currentQuery: state.otp.currentQuery,
-    expandAdvanced: state.otp.user.expandAdvanced,
+    expandAdvanced: state.user.localUser.expandAdvanced,
     mainPanelContent: state.otp.ui.mainPanelContent,
     modes: state.otp.config.modes,
     routes: state.otp.transitIndex.routes,
diff --git a/lib/components/form/user-trip-settings.js b/lib/components/form/user-trip-settings.js
index 130992ccc..254e59132 100644
--- a/lib/components/form/user-trip-settings.js
+++ b/lib/components/form/user-trip-settings.js
@@ -38,10 +38,10 @@ class UserTripSettings extends Component {
     const rememberIsDisabled = queryIsDefault && !defaults
 
     return (
-      <div style={{ marginBottom: '5px' }} className='store-settings pull-right'>
+      <div className='store-settings pull-right' style={{ marginBottom: '5px' }}>
         <Button
-          bsStyle='link'
           bsSize='xsmall'
+          bsStyle='link'
           disabled={rememberIsDisabled}
           onClick={this._toggleStoredSettings}
         >{defaults
@@ -49,8 +49,8 @@ class UserTripSettings extends Component {
             : <span><Icon type='lock' /> Remember trip options</span>
           }</Button>
         <Button
-          bsStyle='link'
           bsSize='xsmall'
+          bsStyle='link'
           disabled={queryIsDefault && !defaults}
           onClick={resetForm}
         >
@@ -65,8 +65,8 @@ class UserTripSettings extends Component {
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {
-  const { config, currentQuery, user } = state.otp
-  const { defaults } = user
+  const { config, currentQuery } = state.otp
+  const { defaults } = state.user.localUser
 
   return {
     config,
diff --git a/lib/components/viewers/stop-time-cell.js b/lib/components/viewers/stop-time-cell.js
index 2bf548394..4ff44cefa 100644
--- a/lib/components/viewers/stop-time-cell.js
+++ b/lib/components/viewers/stop-time-cell.js
@@ -58,7 +58,7 @@ const StopTimeCell = ({
 
   return (
     <div>
-      <div class='pull-left'>
+      <div className='pull-left'>
         <Icon
           style={{ color: '#888', fontSize: '0.8em', marginRight: 2 }}
           type={stopTime.realtimeState === 'UPDATED' ? 'rss' : 'clock-o'}
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index a27e8c29b..f472ab2bf 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -14,7 +14,9 @@ import * as uiActions from '../../actions/ui'
 import LiveStopTimes from './live-stop-times'
 import Icon from '../narrative/icon'
 import StopScheduleTable from './stop-schedule-table'
+import { PERSIST_TO_LOCAL_STORAGE } from '../../util/constants'
 import { getShowUserSettings, getStopViewerConfig } from '../../util/state'
+import { getPersistenceStrategy } from '../../util/user'
 
 const {
   getTimeFormat,
@@ -56,11 +58,11 @@ class StopViewer extends Component {
   _setLocationFromStop = (locationType) => {
     const { setLocation, stopData } = this.props
     const location = {
-      name: stopData.name,
       lat: stopData.lat,
-      lon: stopData.lon
+      lon: stopData.lon,
+      name: stopData.name
     }
-    setLocation({ locationType, location, reverseGeocode: true })
+    setLocation({ location, locationType, reverseGeocode: true })
     this.setState({ popupPosition: null })
   }
 
@@ -116,7 +118,7 @@ class StopViewer extends Component {
   }
 
   _renderHeader = () => {
-    const {hideBackButton, showUserSettings, stopData} = this.props
+    const {enableFavoriteStops, hideBackButton, showUserSettings, stopData} = this.props
     return (
       <div className='stop-viewer-header'>
         {/* Back button */}
@@ -135,16 +137,17 @@ class StopViewer extends Component {
             ? <span>{stopData.name}</span>
             : <span>Loading Stop...</span>
           }
-          {showUserSettings
+          {(showUserSettings && enableFavoriteStops)
             ? <Button
-              onClick={this._toggleFavorite}
               bsSize='large'
+              bsStyle='link'
+              onClick={this._toggleFavorite}
               style={{
                 color: this._isFavorite() ? 'yellow' : 'black',
-                padding: 0,
-                marginLeft: '5px'
+                marginLeft: '5px',
+                padding: 0
               }}
-              bsStyle='link'>
+            >
               <Icon type={this._isFavorite() ? 'star' : 'star-o'} />
             </Button>
             : null
@@ -192,8 +195,9 @@ class StopViewer extends Component {
           <b>Stop ID</b>: {stopId}
           <button
             className='link-button pull-right'
+            onClick={this._toggleScheduleView}
             style={{ fontSize: 'small' }}
-            onClick={this._toggleScheduleView}>
+          >
             <Icon type={scheduleView ? 'clock-o' : 'calendar'} />{' '}
             View {scheduleView ? 'next arrivals' : 'schedule'}
           </button>
@@ -204,16 +208,16 @@ class StopViewer extends Component {
           onToClick={this._onClickPlanTo} />
         {scheduleView && <input
           className='pull-right'
+          onChange={this.handleDateChange}
           onKeyDown={this.props.onKeyDown}
-          type='date'
-          value={this.state.date}
+          required
           style={{
-            width: '125px',
             border: 'none',
-            outline: 'none'
+            outline: 'none',
+            width: '125px'
           }}
-          required
-          onChange={this.handleDateChange}
+          type='date'
+          value={this.state.date}
         />}
 
         {timezoneWarning}
@@ -292,17 +296,21 @@ class StopViewer extends Component {
 const mapStateToProps = (state, ownProps) => {
   const showUserSettings = getShowUserSettings(state.otp)
   const stopViewerConfig = getStopViewerConfig(state.otp)
+  const { config, ui } = state.otp
+  const { homeTimezone, language, persistence, transitOperators } = config
+  const { autoRefreshStopTimes, favoriteStops } = state.user.localUser
   return {
-    autoRefreshStopTimes: state.otp.user.autoRefreshStopTimes,
-    favoriteStops: (state.user.localUser && state.user.localUser.favoriteStops) || [],
-    homeTimezone: state.otp.config.homeTimezone,
-    viewedStop: state.otp.ui.viewedStop,
+    autoRefreshStopTimes,
+    enableFavoriteStops: getPersistenceStrategy(persistence) === PERSIST_TO_LOCAL_STORAGE,
+    favoriteStops,
+    homeTimezone,
     showUserSettings,
-    stopData: state.otp.transitIndex.stops[state.otp.ui.viewedStop.stopId],
-    stopViewerArriving: state.otp.config.language.stopViewerArriving,
+    stopData: state.otp.transitIndex.stops[ui.viewedStop.stopId],
+    stopViewerArriving: language.stopViewerArriving,
     stopViewerConfig,
-    timeFormat: getTimeFormat(state.otp.config),
-    transitOperators: state.otp.config.transitOperators
+    timeFormat: getTimeFormat(config),
+    transitOperators,
+    viewedStop: ui.viewedStop
   }
 }
 
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 4a185db9b..2890197a6 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -10,12 +10,8 @@ import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { isTransit, getTransitModes } = coreUtils.itinerary
 const { filterProfileOptions } = coreUtils.profile
-const {
-  ensureSingleAccessMode,
-  getDefaultQuery,
-  getTripOptionsFromQuery
-} = coreUtils.query
-const { getItem, removeItem, storeItem } = coreUtils.storage
+const { ensureSingleAccessMode, getDefaultQuery } = coreUtils.query
+const { getItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
 // TODO: fire planTrip action if default query is complete/error-free
@@ -65,10 +61,9 @@ export function getInitialState (userDefinedConfig, initialQuery) {
     autoPlan: false,
     debouncePlanTimeMs: 0,
     language: {},
-    transitOperators: [],
+    onTimeThresholdSeconds: 60,
     realtimeEffectsDisplayThreshold: 120,
     routingTypes: [],
-    onTimeThresholdSeconds: 60,
     stopViewer: {
       numberOfDepartures: 3, // per pattern
       // Hide block ids unless explicitly enabled in config.
@@ -77,7 +72,8 @@ export function getInitialState (userDefinedConfig, initialQuery) {
       // a route does not begin service again until Monday, we are showing its next
       // departure and it is not entirely excluded from display.
       timeRange: 345600 // four days in seconds
-    }
+    },
+    transitOperators: []
   }
 
   const config = Object.assign(defaultConfig, userDefinedConfig)
@@ -101,37 +97,15 @@ export function getInitialState (userDefinedConfig, initialQuery) {
     config.phoneFormatOptions.countryCode = 'US'
   }
 
-  // Load user settings from local storage.
-  // TODO: Make this work with settings fetched from alternative storage system
-  //  (e.g., OTP backend middleware containing user profile system).
+  // Load query-related user settings from local storage.
   // User overrides determine user's default mode/query parameters.
   const userOverrides = getItem('defaultQuery', {})
   // Combine user overrides with default query to get default search settings.
   const defaults = Object.assign(getDefaultQuery(config), userOverrides)
-  // Whether to auto-refresh stop arrival times in the Stop Viewer.
-  const autoRefreshStopTimes = getItem('autoRefreshStopTimes', true)
-  // User's home and work locations
-  const home = getItem('home')
-  const work = getItem('work')
-  // Whether recent searches and places should be tracked in local storage.
-  const trackRecent = getItem('trackRecent', false)
-  const expandAdvanced = getItem('expandAdvanced', false)
-  // Recent places used in trip plan searches.
-  const recentPlaces = getItem('recent', [])
-  // List of user's favorite stops.
-  const favoriteStops = getItem('favoriteStops', [])
-  // Recent trip plan searches (excluding time/date parameters to avoid complexity).
-  const recentSearches = getItem('recentSearches', [])
-  // Filter valid locations found into locations list.
-  const locations = [home, work].filter(p => p)
   // TODO: parse and merge URL query params w/ default query
-
   // populate query by merging any provided query params w/ the default params
   const currentQuery = Object.assign(defaults, initialQuery)
-  // Add configurable locations to home and work locations
-  if (config.locations) {
-    locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
-  }
+
   // Check for alternative routerId in session storage. This is generally used
   // for testing single GTFS feed OTP graphs that are deployed to feed-specific
   // routers (e.g., https://otp.server.com/otp/routers/non_default_router).
@@ -168,6 +142,7 @@ export function getInitialState (userDefinedConfig, initialQuery) {
   }
 
   return {
+    activeSearchId: 0,
     config,
     currentQuery,
     filter: {
@@ -180,31 +155,13 @@ export function getInitialState (userDefinedConfig, initialQuery) {
     },
     location: {
       currentPosition: {
-        error: null,
         coords: null,
+        error: null,
         fetching: false
       },
-      sessionSearches: [],
-      nearbyStops: []
-    },
-    user: {
-      autoRefreshStopTimes,
-      // Do not store from/to or date/time in defaults
-      defaults: getTripOptionsFromQuery(defaults),
-      expandAdvanced,
-      favoriteStops,
-      trackRecent,
-      locations,
-      recentPlaces,
-      recentSearches
-    },
-    searches: {},
-    transitIndex: {
-      stops: {},
-      trips: {}
+      nearbyStops: [],
+      sessionSearches: []
     },
-    useRealtime: true,
-    activeSearchId: 0,
     overlay: {
       bikeRental: {
         stations: []
@@ -227,15 +184,21 @@ export function getInitialState (userDefinedConfig, initialQuery) {
         locations: []
       }
     },
+    searches: {},
     tnc: {
       etaEstimates: {},
       rideEstimates: {}
     },
+    transitIndex: {
+      stops: {},
+      trips: {}
+    },
     ui: {
+      diagramLeg: null,
       mobileScreen: MobileScreens.WELCOME_SCREEN,
-      printView: window.location.href.indexOf('/print/') !== -1,
-      diagramLeg: null
-    }
+      printView: window.location.href.indexOf('/print/') !== -1
+    },
+    useRealtime: true
   }
 }
 
@@ -438,19 +401,6 @@ function createOtpReducer (config, initialQuery) {
         return update(state, { activeSearchId: { $set: null } })
       case 'SET_ACTIVE_SEARCH':
         return update(state, { activeSearchId: { $set: action.payload } })
-      case 'CLEAR_DEFAULT_SETTINGS':
-        removeItem('defaultQuery')
-        return update(state, { user: { defaults: { $set: null } } })
-      case 'STORE_DEFAULT_SETTINGS':
-        storeItem('defaultQuery', action.payload)
-        return update(state, { user: { defaults: { $set: action.payload } } })
-      // FIXME: set up action
-      case 'TOGGLE_ADVANCED_OPTIONS':
-        storeItem('expandAdvanced', action.payload)
-        if (!action.payload) removeItem('expandAdvanced')
-        return update(state, { user: {
-          expandAdvanced: { $set: action.payload }
-        } })
       case 'SET_AUTOPLAN':
         return update(state, {
           config: { autoPlan: { $set: action.payload.autoPlan } }
@@ -669,9 +619,6 @@ function createOtpReducer (config, initialQuery) {
             }
           }
         })
-      case 'TOGGLE_AUTO_REFRESH':
-        storeItem('autoRefreshStopTimes', action.payload)
-        return update(state, { user: { autoRefreshStopTimes: { $set: action.payload } } })
 
       case 'FIND_ROUTES_RESPONSE':
         // If routes is undefined, initialize it w/ the full payload
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index ccfd7de94..5b271226b 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -4,10 +4,8 @@ import update from 'immutability-helper'
 import isEqual from 'lodash.isequal'
 import coreUtils from '@opentripplanner/core-utils'
 
-import { PERSIST_TO_LOCAL_STORAGE } from '../util/constants'
-import { getPersistenceStrategy } from '../util/user'
-
 const { matchLatLon } = coreUtils.map
+const { getDefaultQuery, getTripOptionsFromQuery } = coreUtils.query
 const { getItem, removeItem, storeItem } = coreUtils.storage
 
 const MAX_RECENT_STORAGE = 5
@@ -30,58 +28,53 @@ function removeLocalUserPlace (id, state, fieldName, settingName) {
 }
 
 /**
- * Load select user settings stored locally if the persistence strategy is localStorage.
- * Other settings not mentioned below are still loaded through createOtpReducer.
- * The select user settings are:
- * - Home and Work locations,
- * - recent itinerary searches
- * - whether recent searches and places should be tracked
- * - recent places in trip plan searches,
- * - favorite stops
- *
- * Note: If the persistence strategy is otp_middleware, then user settings
+ * Load user settings stored in the browser locally. The local user is always retrieved
+ * and plays the role of the "anonymous" or "shared" user if no middleware user is logged in.
+ * Note: If the persistence strategy is otp_middleware, then the middleware user settings
  * are fetched separately as soon as user login info is received
  * (from one of the components that uses withLoggedInUserSupport).
  */
 function loadUserFromLocalStorage (config) {
-  const { locations: configLocations = null, persistence } = config
-
-  const persistenceStrategy = getPersistenceStrategy(persistence)
-  if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-    // User's home and work locations
-    const home = getItem('home')
-    const work = getItem('work')
-    // Whether recent searches and places should be tracked in local storage.
-    const trackRecent = getItem('trackRecent', false)
-    const expandAdvanced = getItem('expandAdvanced', false)
-    // Recent places used in trip plan searches.
-    const recentPlaces = getItem('recent', [])
-    // List of user's favorite stops.
-    const favoriteStops = getItem('favoriteStops', [])
-    // Recent trip plan searches (excluding time/date parameters to avoid complexity).
-    const recentSearches = getItem('recentSearches', [])
-    // Filter valid locations found into locations list.
-    const locations = [home, work].filter(p => p)
-    // Add configurable locations to home and work locations
-    if (configLocations) {
-      locations.push(...configLocations.map(l => ({ ...l, type: 'suggested' })))
-    }
+  const { locations: configLocations = null } = config
 
-    return {
-      localUser: {
-        expandAdvanced, // localUser only
-        favoriteStops, // localUser only
-        recentPlaces, // localUser only
-        savedLocations: locations,
-        storeTripHistory: trackRecent
-      },
-      localUserTripRequests: recentSearches
-    }
+  // User's home and work locations
+  const home = getItem('home')
+  const work = getItem('work')
+  // Whether recent searches and places should be tracked in local storage.
+  const trackRecent = getItem('trackRecent', false)
+  const expandAdvanced = getItem('expandAdvanced', false)
+  // Recent places used in trip plan searches.
+  const recentPlaces = getItem('recent', [])
+  // List of user's favorite stops.
+  const favoriteStops = getItem('favoriteStops', [])
+  // Recent trip plan searches (excluding time/date parameters to avoid complexity).
+  const recentSearches = getItem('recentSearches', [])
+  // Filter valid locations found into locations list.
+  const locations = [home, work].filter(p => p)
+  // Add configurable locations to home and work locations
+  if (configLocations) {
+    locations.push(...configLocations.map(l => ({ ...l, type: 'suggested' })))
   }
 
+  // Whether to auto-refresh stop arrival times in the Stop Viewer.
+  const autoRefreshStopTimes = getItem('autoRefreshStopTimes', true)
+  // User overrides determine user's default mode/query parameters.
+  const userOverrides = getItem('defaultQuery', {})
+  // Combine user overrides with default query to get default search settings.
+  const defaults = Object.assign(getDefaultQuery(config), userOverrides)
+
   return {
-    localUser: null,
-    localUserTripRequests: null
+    localUser: {
+      autoRefreshStopTimes,
+      // Do not store from/to or date/time in defaults
+      defaults: getTripOptionsFromQuery(defaults),
+      expandAdvanced,
+      favoriteStops,
+      recentPlaces,
+      savedLocations: locations,
+      storeTripHistory: trackRecent
+    },
+    localUserTripRequests: recentSearches
   }
 }
 
@@ -278,6 +271,26 @@ function createUserReducer (config) {
         } })
       }
 
+      case 'TOGGLE_AUTO_REFRESH':
+        storeItem('autoRefreshStopTimes', action.payload)
+        return update(state, { localUser: { autoRefreshStopTimes: { $set: action.payload } } })
+
+      case 'CLEAR_DEFAULT_SETTINGS':
+        removeItem('defaultQuery')
+        return update(state, { localUser: { defaults: { $set: null } } })
+
+      case 'STORE_DEFAULT_SETTINGS':
+        storeItem('defaultQuery', action.payload)
+        return update(state, { localUser: { defaults: { $set: action.payload } } })
+
+      // FIXME: set up action
+      case 'TOGGLE_ADVANCED_OPTIONS':
+        storeItem('expandAdvanced', action.payload)
+        if (!action.payload) removeItem('expandAdvanced')
+        return update(state, { localUser: {
+          expandAdvanced: { $set: action.payload }
+        } })
+
       default:
         return state
     }
diff --git a/lib/util/state.js b/lib/util/state.js
index a3459b805..8b4af6ac8 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -377,7 +377,9 @@ const DEFAULT_TITLE = document.title
 
 export function getTitle (state) {
   // Override title can optionally be provided in config.yml
-  const { config, ui, user } = state.otp
+  const { config, ui } = state.otp
+  const { localUser, loggedInUser } = state.user
+  const user = loggedInUser || localUser
   let title = config.title || DEFAULT_TITLE
   const { mainPanelContent, viewedRoute, viewedStop } = ui
   switch (mainPanelContent) {
@@ -392,7 +394,7 @@ export function getTitle (state) {
     default:
       const activeSearch = getActiveSearch(state.otp)
       if (activeSearch) {
-        title += ` | ${coreUtils.query.summarizeQuery(activeSearch.query, user.locations)}`
+        title += ` | ${coreUtils.query.summarizeQuery(activeSearch.query, user.savedLocations)}`
       }
       break
   }

From 73c58c4fd65c95ae80d0a9ff4914042cf418b05e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 18:23:18 -0500
Subject: [PATCH 036/270] refactor(user reducer): Put recentSearches under
 localUser.

---
 lib/actions/api.js                   |  5 +++--
 lib/actions/user.js                  |  4 ++--
 lib/components/form/user-settings.js | 16 ++++++++--------
 lib/reducers/create-user-reducer.js  | 21 ++++++---------------
 4 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 8951de93d..e9f0d7b22 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -111,8 +111,9 @@ export function routingQuery (searchId = null) {
         .then(json => {
           dispatch(routingResponse({ response: json, requestId, searchId }))
           // If tracking is enabled, store locations and search after successful
-          // search is completed.
-          if (userState.trueUser && userState.trueUser.storeTripHistory) {
+          // search is completed for the applicable user.
+          const trueUser = userState.loggedInUser || userState.localUser
+          if (trueUser.storeTripHistory) {
             const { from, to } = otpState.currentQuery
             if (!isStoredPlace(from)) {
               dispatch(rememberPlace({ type: 'recent', location: formatRecentPlace(from) }))
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 4d776f9cc..ad0811624 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -167,7 +167,7 @@ export function createOrUpdateUser (userData, silentOnSuccess = false) {
   return async function (dispatch, getState) {
     const { accessToken, apiBaseUrl, apiKey, loggedInUser } = getMiddlewareVariables(getState())
     const { id } = userData // Middleware ID, NOT auth0 (or similar) id.
-    let requestUrl, method
+    let method, requestUrl
 
     // Before persisting, filter out entries from userData.savedLocations with blank addresses.
     userData.savedLocations = userData.savedLocations.filter(
@@ -290,7 +290,7 @@ export function createOrUpdateUserMonitoredTrip (
   return async function (dispatch, getState) {
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(getState())
     const { id } = tripData
-    let requestUrl, method
+    let method, requestUrl
 
     // Determine URL and method to use.
     if (isNew) {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 2fa8e8f59..7feee4799 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -38,10 +38,11 @@ const StyledSavedPlace = stylePlace(SavedPlace)
 
 class UserSettings extends Component {
   _disableTracking = () => {
-    const { localUser, localUserTripRequests, toggleTracking } = this.props
-    if (!localUser.storeTripHistory) return
-    const hasRecents = (localUser.recentPlaces && localUser.recentPlaces.length > 0) ||
-      (localUserTripRequests && localUserTripRequests.length > 0)
+    const { localUser, toggleTracking } = this.props
+    const { recentPlaces, recentSearches, storeTripHistory } = localUser
+    if (!storeTripHistory) return
+    const hasRecents = (recentPlaces && recentPlaces.length > 0) ||
+      (recentSearches && recentSearches.length > 0)
 
     // If user has recents and does not confirm deletion, return without doing
     // anything.
@@ -299,12 +300,11 @@ const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user })
 const mapStateToProps = (state, ownProps) => {
   const { config, currentQuery, location, transitIndex } = state.otp
   const { language, persistence } = config
-  const { localUser, localUserTripRequests, loggedInUser, loggedInUserTripRequests } = state.user
+  const { localUser, loggedInUser, loggedInUserTripRequests } = state.user
   return {
     config,
     currentPosition: location.currentPosition,
-    localUser, // these users should be merged in mapStateToProps
-    localUserTripRequests,
+    localUser, //these users should be merged in mapStateToProps
     loggedInUser,
     loggedInUserTripRequests,
     nearbyStops: location.nearbyStops,
@@ -313,7 +313,7 @@ const mapStateToProps = (state, ownProps) => {
     sessionSearches: location.sessionSearches,
     stopsIndex: transitIndex.stops,
     storageDisclaimer: language.storageDisclaimer,
-    tripRequests: loggedInUser ? loggedInUserTripRequests : localUserTripRequests,
+    tripRequests: loggedInUser ? loggedInUserTripRequests : localUser.recentSearches,
     trueUser: loggedInUser || localUser
   }
 }
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 5b271226b..59410c7a5 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -71,10 +71,10 @@ function loadUserFromLocalStorage (config) {
       expandAdvanced,
       favoriteStops,
       recentPlaces,
+      recentSearches,
       savedLocations: locations,
       storeTripHistory: trackRecent
-    },
-    localUserTripRequests: recentSearches
+    }
   }
 }
 
@@ -155,7 +155,6 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_RECENT_PLACE':
-        // This is used to delete the local user's recent location that matches the provided id.
         return removeLocalUserPlace(action.payload, state, 'recentPlaces', 'recent')
 
       case 'DELETE_LOCAL_USER_SAVED_PLACE': {
@@ -227,19 +226,11 @@ function createUserReducer (config) {
         return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
       }
 
-      case 'FORGET_SEARCH': {
-        const recentSearches = clone(state.localUserTripRequests)
-        const index = recentSearches.findIndex(l => l.id === action.payload)
-        // Remove item from list of recent searches
-        recentSearches.splice(index, 1)
-        storeItem('recentSearches', recentSearches)
-        return index !== -1
-          ? update(state, { localUserTripRequests: { $splice: [[index, 1]] } })
-          : state
-      }
+      case 'FORGET_SEARCH':
+        return removeLocalUserPlace(action.payload, state, 'recentSearches', 'recentSearches')
 
       case 'REMEMBER_SEARCH': {
-        const searches = clone(state.localUserTripRequests)
+        const searches = clone(state.localUser.recentSearches)
         const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
         // Overwrite duplicate search (so that new timestamp is stored).
         if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
@@ -250,7 +241,7 @@ function createUserReducer (config) {
           sortedSearches.splice(MAX_RECENT_STORAGE)
         }
         storeItem('recentSearches', sortedSearches)
-        return update(state, { localUserTripRequests: { $set: sortedSearches } })
+        return update(state, { localUser: { recentSearches: { $set: sortedSearches } } })
       }
 
       case 'TOGGLE_TRACKING': {

From a16d39d6c61dbde748398879f7dc67dc84a4b6e9 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 19:04:51 -0500
Subject: [PATCH 037/270] refactor(user reducer): Extract repetitive code.

---
 lib/reducers/create-user-reducer.js | 76 +++++++++++++++--------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 59410c7a5..3d6b6f96c 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -10,6 +10,38 @@ const { getItem, removeItem, storeItem } = coreUtils.storage
 
 const MAX_RECENT_STORAGE = 5
 
+/**
+ * Adds a place to the specified localUser state and optional persistence setting.
+ */
+function rememberLocalUserPlace (location, duplicateFinder, beforeSave, state, fieldName, settingName) {
+  let places = clone(state.localUser[fieldName])
+  const duplicateIndex = places.findIndex(duplicateFinder)
+  // Replace recent place if duplicate found or add to beginning of list.
+  if (duplicateIndex !== -1) places.splice(duplicateIndex, 1, location)
+  else places.unshift(location)
+
+  if (beforeSave) {
+    places = beforeSave(places)
+  }
+  if (settingName) {
+    storeItem(settingName, places)
+  }
+  return update(state, { localUser: { [fieldName]: { $set: places } } })
+}
+
+/**
+ * Sorts the given list and keeps the first MAX_RECENT_STORAGE items.
+ */
+function sortAndTrim (list) {
+  const sorted = list.sort((a, b) => b.timestamp - a.timestamp)
+  // Only keep up to 5 recent locations
+  // FIXME: Check for duplicates
+  if (list.length >= MAX_RECENT_STORAGE) {
+    sorted.splice(MAX_RECENT_STORAGE)
+  }
+  return sorted
+}
+
 /**
  * Removes a place by id from the specified localUser state and optional persistence setting.
  */
@@ -167,30 +199,11 @@ function createUserReducer (config) {
       case 'REMEMBER_LOCAL_USER_PLACE': {
         const { location, type } = action.payload
         switch (type) {
-          case 'recent': {
-            const recentPlaces = clone(state.localUser.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
-            // Replace recent place if duplicate found or add to list.
-            if (index !== -1) recentPlaces.splice(index, 1, location)
-            else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
-            // Only keep up to 5 recent locations
-            // FIXME: Check for duplicates
-            if (recentPlaces.length >= MAX_RECENT_STORAGE) {
-              sortedPlaces.splice(MAX_RECENT_STORAGE)
-            }
-            storeItem('recent', recentPlaces)
-            return update(state, { localUser: { recentPlaces: { $set: sortedPlaces } } })
-          }
-          default: {
-            const locations = clone(state.localUser.savedLocations)
-            // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
-            if (index !== -1) locations.splice(index, 1, location)
-            else locations.push(location)
+          case 'recent':
+            return rememberLocalUserPlace(location, l => matchLatLon(l, location), sortAndTrim, state, 'recentPlaces', 'recent')
+          default:
             storeItem(type, location)
-            return update(state, { localUser: { savedLocations: { $set: locations } } })
-          }
+            return rememberLocalUserPlace(location, l => l.type === type, null, state, 'savedLocations')
         }
       }
 
@@ -229,20 +242,9 @@ function createUserReducer (config) {
       case 'FORGET_SEARCH':
         return removeLocalUserPlace(action.payload, state, 'recentSearches', 'recentSearches')
 
-      case 'REMEMBER_SEARCH': {
-        const searches = clone(state.localUser.recentSearches)
-        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
-        // Overwrite duplicate search (so that new timestamp is stored).
-        if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
-        else searches.unshift(action.payload)
-        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
-        // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
-        if (sortedSearches.length >= MAX_RECENT_STORAGE) {
-          sortedSearches.splice(MAX_RECENT_STORAGE)
-        }
-        storeItem('recentSearches', sortedSearches)
-        return update(state, { localUser: { recentSearches: { $set: sortedSearches } } })
-      }
+      case 'REMEMBER_SEARCH':
+        return rememberLocalUserPlace(location, s => isEqual(s.query, action.payload.query),
+          sortAndTrim, state, 'recentSearches', 'recentSearches')
 
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)

From 5bcef61d19c5d181a9cfbf31cc5035d3e3641896 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 26 Feb 2021 19:56:50 -0500
Subject: [PATCH 038/270] refactor(user reducer): Fix errors

---
 lib/components/user/places/cached-place.js | 2 +-
 lib/reducers/create-user-reducer.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/user/places/cached-place.js b/lib/components/user/places/cached-place.js
index c9312727a..20c96de03 100644
--- a/lib/components/user/places/cached-place.js
+++ b/lib/components/user/places/cached-place.js
@@ -28,7 +28,7 @@ class CachedPlace extends Component {
         icon={icon}
         name={formatStoredPlaceName(place, false)}
         onClick={onClick}
-        onDelete={canDelete && onDelete && this._onDelete}
+        onDelete={(canDelete && onDelete) ? this._onDelete : null}
         onView={onView && this._onView}
         title={formatStoredPlaceName(place)}
       />
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 3d6b6f96c..a6b203712 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -243,7 +243,7 @@ function createUserReducer (config) {
         return removeLocalUserPlace(action.payload, state, 'recentSearches', 'recentSearches')
 
       case 'REMEMBER_SEARCH':
-        return rememberLocalUserPlace(location, s => isEqual(s.query, action.payload.query),
+        return rememberLocalUserPlace(action.payload, s => isEqual(s.query, action.payload.query),
           sortAndTrim, state, 'recentSearches', 'recentSearches')
 
       case 'TOGGLE_TRACKING': {

From 14aaf28c5da6914d3a41a687b676d712a7c06e77 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 1 Mar 2021 10:28:49 -0500
Subject: [PATCH 039/270] test(snapshots): Update snapshots

---
 .../viewers/__snapshots__/stop-viewer.js.snap | 22 +++++---
 .../__snapshots__/create-otp-reducer.js.snap  | 34 -------------
 .../__snapshots__/create-user-reducer.js.snap | 51 +++++++++++++++++++
 __tests__/reducers/create-user-reducer.js     | 11 ++++
 lib/components/form/user-settings.js          |  2 +-
 5 files changed, 77 insertions(+), 43 deletions(-)
 create mode 100644 __tests__/reducers/__snapshots__/create-user-reducer.js.snap
 create mode 100644 __tests__/reducers/create-user-reducer.js

diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
index 1de873e4f..2d565c5d6 100644
--- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
@@ -16,6 +16,7 @@ exports[`components > viewers > stop viewer should render countdown times after
   <Connect(StopViewer)>
     <StopViewer
       autoRefreshStopTimes={true}
+      enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
       findStopTimesForStop={[Function]}
@@ -874,7 +875,7 @@ exports[`components > viewers > stop viewer should render countdown times after
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -1066,6 +1067,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
   <Connect(StopViewer)>
     <StopViewer
       autoRefreshStopTimes={true}
+      enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
       findStopTimesForStop={[Function]}
@@ -1636,7 +1638,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -1828,6 +1830,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
   <Connect(StopViewer)>
     <StopViewer
       autoRefreshStopTimes={true}
+      enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
       findStopTimesForStop={[Function]}
@@ -2686,7 +2689,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -2887,6 +2890,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
   <Connect(StopViewer)>
     <StopViewer
       autoRefreshStopTimes={true}
+      enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
       findStopTimesForStop={[Function]}
@@ -4259,7 +4263,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -4511,7 +4515,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -4763,7 +4767,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -5069,7 +5073,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -5270,6 +5274,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
   <Connect(StopViewer)>
     <StopViewer
       autoRefreshStopTimes={true}
+      enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
       findStopTimesForStop={[Function]}
@@ -6634,7 +6639,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                           >
                             <div>
                               <div
-                                class="pull-left"
+                                className="pull-left"
                               >
                                 <Icon
                                   style={
@@ -6835,6 +6840,7 @@ exports[`components > viewers > stop viewer should render with initial stop id a
   <Connect(StopViewer)>
     <StopViewer
       autoRefreshStopTimes={true}
+      enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
       findStopTimesForStop={[Function]}
diff --git a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
index 7f995e80c..386e1af5d 100644
--- a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
+++ b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
@@ -103,39 +103,5 @@ Object {
     "printView": false,
   },
   "useRealtime": true,
-  "user": Object {
-    "autoRefreshStopTimes": true,
-    "defaults": Object {
-      "bannedRoutes": "",
-      "bikeSpeed": 3.58,
-      "companies": null,
-      "endTime": "09:00",
-      "ignoreRealtimeUpdates": false,
-      "intermediatePlaces": Array [],
-      "maxBikeDistance": 4828,
-      "maxBikeTime": 20,
-      "maxEScooterDistance": 4828,
-      "maxWalkDistance": 1207,
-      "maxWalkTime": 15,
-      "mode": "WALK,TRAM,BUS,SUBWAY,FERRY,RAIL,GONDOLA",
-      "numItineraries": 3,
-      "optimize": "QUICK",
-      "optimizeBike": "SAFE",
-      "otherThanPreferredRoutesPenalty": 900,
-      "preferredRoutes": "",
-      "routingType": "ITINERARY",
-      "showIntermediateStops": true,
-      "startTime": "07:00",
-      "walkSpeed": 1.34,
-      "watts": 250,
-      "wheelchair": false,
-    },
-    "expandAdvanced": false,
-    "favoriteStops": Array [],
-    "locations": Array [],
-    "recentPlaces": Array [],
-    "recentSearches": Array [],
-    "trackRecent": false,
-  },
 }
 `;
diff --git a/__tests__/reducers/__snapshots__/create-user-reducer.js.snap b/__tests__/reducers/__snapshots__/create-user-reducer.js.snap
new file mode 100644
index 000000000..33978f2ff
--- /dev/null
+++ b/__tests__/reducers/__snapshots__/create-user-reducer.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib > reducers > create-user-reducer should be able to create the initial state 1`] = `
+Object {
+  "accessToken": null,
+  "itineraryExistence": null,
+  "lastPhoneSmsRequest": Object {
+    "number": null,
+    "status": null,
+    "timestamp": 1970-01-01T00:00:00.000Z,
+  },
+  "localUser": Object {
+    "autoRefreshStopTimes": true,
+    "defaults": Object {
+      "bannedRoutes": "",
+      "bikeSpeed": 3.58,
+      "companies": null,
+      "endTime": "09:00",
+      "ignoreRealtimeUpdates": false,
+      "intermediatePlaces": Array [],
+      "maxBikeDistance": 4828,
+      "maxBikeTime": 20,
+      "maxEScooterDistance": 4828,
+      "maxWalkDistance": 1207,
+      "maxWalkTime": 15,
+      "mode": "WALK,TRANSIT",
+      "numItineraries": 3,
+      "optimize": "QUICK",
+      "optimizeBike": "SAFE",
+      "otherThanPreferredRoutesPenalty": 900,
+      "preferredRoutes": "",
+      "routingType": "ITINERARY",
+      "showIntermediateStops": true,
+      "startTime": "07:00",
+      "walkSpeed": 1.34,
+      "watts": 250,
+      "wheelchair": false,
+    },
+    "expandAdvanced": false,
+    "favoriteStops": Array [],
+    "recentPlaces": Array [],
+    "recentSearches": Array [],
+    "savedLocations": Array [],
+    "storeTripHistory": false,
+  },
+  "loggedInUser": null,
+  "loggedInUserMonitoredTrips": null,
+  "loggedInUserTripRequests": null,
+  "pathBeforeSignIn": null,
+}
+`;
diff --git a/__tests__/reducers/create-user-reducer.js b/__tests__/reducers/create-user-reducer.js
new file mode 100644
index 000000000..a55594ec2
--- /dev/null
+++ b/__tests__/reducers/create-user-reducer.js
@@ -0,0 +1,11 @@
+import {getUserInitialState} from '../../lib/reducers/create-user-reducer'
+import {restoreDateNowBehavior, setDefaultTestTime} from '../test-utils'
+
+describe('lib > reducers > create-user-reducer', () => {
+  afterEach(restoreDateNowBehavior)
+
+  it('should be able to create the initial state', () => {
+    setDefaultTestTime()
+    expect(getUserInitialState({}, {})).toMatchSnapshot()
+  })
+})
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 7feee4799..67d4bcc11 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -304,7 +304,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     config,
     currentPosition: location.currentPosition,
-    localUser, //these users should be merged in mapStateToProps
+    localUser, // these users should be merged in mapStateToProps
     loggedInUser,
     loggedInUserTripRequests,
     nearbyStops: location.nearbyStops,

From 4518083751dc77732368ad5d8810ae881258ca6a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 1 Mar 2021 11:24:42 -0500
Subject: [PATCH 040/270] refactor(UserSettings): Remove redundant vars, tweak
 comments.

---
 lib/actions/api.js                   |  8 ++---
 lib/components/form/user-settings.js | 54 +++++++++++-----------------
 lib/reducers/create-user-reducer.js  |  6 ++--
 3 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index e9f0d7b22..6de2b953f 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -112,8 +112,8 @@ export function routingQuery (searchId = null) {
           dispatch(routingResponse({ response: json, requestId, searchId }))
           // If tracking is enabled, store locations and search after successful
           // search is completed for the applicable user.
-          const trueUser = userState.loggedInUser || userState.localUser
-          if (trueUser.storeTripHistory) {
+          const currentUser = userState.loggedInUser || userState.localUser
+          if (currentUser.storeTripHistory) {
             const { from, to } = otpState.currentQuery
             if (!isStoredPlace(from)) {
               dispatch(rememberPlace({ type: 'recent', location: formatRecentPlace(from) }))
@@ -161,11 +161,11 @@ export function routingQuery (searchId = null) {
       // (state.user stays unpopulated until after this function is called).
       //
       const { user } = state
-      const storeTripHistory = user &&
+      const loggedInUserStoreTripHistory = user &&
         user.loggedInUser &&
         user.loggedInUser.storeTripHistory
 
-      fetch(constructRoutingQuery(otpState, true), getOtpFetchOptions(state, storeTripHistory && i === 0))
+      fetch(constructRoutingQuery(otpState, true), getOtpFetchOptions(state, loggedInUserStoreTripHistory && i === 0))
         .then(getJsonAndCheckResponse)
         .then(json => {
           // FIXME: This is only performed when ignoring realtimeupdates currently, just
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 67d4bcc11..7fb8b5f48 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -15,8 +15,8 @@ import SavedPlace from '../user/places/saved-place'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { MainPanelPlace } from '../user/places/styled'
 import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
-import { isBlank } from '../../util/ui'
 import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
+
 import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
@@ -89,47 +89,36 @@ class UserSettings extends Component {
       forgetSearch,
       localUser,
       loggedInUser,
+      loggedInUserTripRequests,
       persistenceStrategy,
       setQueryParam,
       setViewedStop,
-      storageDisclaimer,
-      tripRequests,
-      trueUser
+      storageDisclaimer
     } = this.props
 
     if (loggedInUser && persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
-      // Add id attribute using index, that will be used to call deleteLoggedInUserPlace.
-      const loggedInUserLocations = loggedInUser.savedLocations.map((loc, index) => ({
-        ...loc,
-        blank: isBlank(loc.address),
-        id: index
-      }))
-      const savedPlacesHeader = (
-        <>
-          My saved places (
-          <LinkWithQuery to='/account/settings'>manage</LinkWithQuery>
-          )
-        </>
-      )
-
       return (
         <div className={`user-settings ${className}`}>
           <Places
-            header={savedPlacesHeader}
+            header={(<>
+              My saved places (
+              <LinkWithQuery to='/account/settings'>manage</LinkWithQuery>
+              )
+            </>)}
             PlaceComponent={StyledSavedPlace}
-            places={loggedInUserLocations}
+            places={loggedInUser.savedLocations}
             separator={false}
           />
           <RecentTrips
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
-            tripRequests={tripRequests}
-            user={trueUser}
+            tripRequests={loggedInUserTripRequests}
+            user={loggedInUser}
           />
         </div>
       )
     } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-      const { favoriteStops, storeTripHistory, recentPlaces } = localUser
+      const { favoriteStops, storeTripHistory, recentPlaces, recentSearches } = localUser
       // Clone locations in order to prevent blank locations from seeping into the
       // app state/store.
       const locations = this._getLocations(localUser)
@@ -162,8 +151,8 @@ class UserSettings extends Component {
           <RecentTrips
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
-            tripRequests={tripRequests}
-            user={trueUser}
+            tripRequests={recentSearches}
+            user={localUser}
           />
 
           <hr />
@@ -273,7 +262,7 @@ class TripRequest extends Component {
  */
 const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user }) => (
   // Note: tripRequests can be undefined,
-  // so we have to coerce it to null to make a valid render.
+  // so we have to coerce it to null above to make a valid render.
   user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
     <div className='recent-searches-container'>
       <hr />
@@ -300,21 +289,20 @@ const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user })
 const mapStateToProps = (state, ownProps) => {
   const { config, currentQuery, location, transitIndex } = state.otp
   const { language, persistence } = config
+  const { currentPosition, nearbyStops, sessionSearches } = location
   const { localUser, loggedInUser, loggedInUserTripRequests } = state.user
   return {
     config,
-    currentPosition: location.currentPosition,
-    localUser, // these users should be merged in mapStateToProps
+    currentPosition,
+    localUser,
     loggedInUser,
     loggedInUserTripRequests,
-    nearbyStops: location.nearbyStops,
+    nearbyStops,
     persistenceStrategy: getPersistenceStrategy(persistence),
     query: currentQuery,
-    sessionSearches: location.sessionSearches,
+    sessionSearches,
     stopsIndex: transitIndex.stops,
-    storageDisclaimer: language.storageDisclaimer,
-    tripRequests: loggedInUser ? loggedInUserTripRequests : localUser.recentSearches,
-    trueUser: loggedInUser || localUser
+    storageDisclaimer: language.storageDisclaimer
   }
 }
 
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index a6b203712..5bfe85fa6 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -30,7 +30,8 @@ function rememberLocalUserPlace (location, duplicateFinder, beforeSave, state, f
 }
 
 /**
- * Sorts the given list and keeps the first MAX_RECENT_STORAGE items.
+ * Sorts the given list most recent first,
+ * and keeps the first MAX_RECENT_STORAGE most recent items.
  */
 function sortAndTrim (list) {
   const sorted = list.sort((a, b) => b.timestamp - a.timestamp)
@@ -48,7 +49,8 @@ function sortAndTrim (list) {
 function removeLocalUserPlace (id, state, fieldName, settingName) {
   const originalArray = state.localUser[fieldName]
   const removeIndex = originalArray.findIndex(l => l.id === id)
-  // If a persistence setting is provided, create a new array without the specified element.
+  // If a persistence setting is provided,
+  // persist a copy of the passed array without the specified element.
   if (settingName) {
     const newArray = clone(originalArray)
     newArray.splice(removeIndex, 1)

From 5371aa6e13d282544373542fe0411ba22390b2eb Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Tue, 24 Aug 2021 10:48:58 -0400
Subject: [PATCH 041/270] refactor: remove expandAdvanced stored setting

---
 lib/components/app/call-taker-panel.js |  4 ----
 lib/components/form/batch-settings.js  |  1 -
 lib/reducers/create-user-reducer.js    | 12 +-----------
 3 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 49c9318f2..df1650b48 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -1,5 +1,4 @@
 import { getTimeFormat } from '@opentripplanner/core-utils/lib/time'
-import { storeItem } from '@opentripplanner/core-utils/lib/storage'
 import React, { Component } from 'react'
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
@@ -72,8 +71,6 @@ class CallTakerPanel extends Component {
 
   _onHideAdvancedClick = () => {
     const expandAdvanced = !this.state.expandAdvanced
-    // FIXME move logic to action
-    storeItem('expandAdvanced', expandAdvanced)
     this.setState({expandAdvanced})
   }
 
@@ -279,7 +276,6 @@ const mapStateToProps = (state, ownProps) => {
   return {
     activeSearch: getActiveSearch(state),
     currentQuery: state.otp.currentQuery,
-    expandAdvanced: state.otp.user.expandAdvanced,
     groupSize: state.callTaker.fieldTrip.groupSize,
     mainPanelContent: state.otp.ui.mainPanelContent,
     maxGroupSize: getGroupSize(request),
diff --git a/lib/components/form/batch-settings.js b/lib/components/form/batch-settings.js
index 6e22168cc..5ba04aeb3 100644
--- a/lib/components/form/batch-settings.js
+++ b/lib/components/form/batch-settings.js
@@ -189,7 +189,6 @@ const mapStateToProps = (state, ownProps) => {
     activeSearch: getActiveSearch(state),
     config: state.otp.config,
     currentQuery: state.otp.currentQuery,
-    expandAdvanced: state.otp.user.expandAdvanced,
     possibleCombinations: state.otp.config.modes.combinations,
     showUserSettings
   }
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 5bfe85fa6..14f2f84d6 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -76,7 +76,6 @@ function loadUserFromLocalStorage (config) {
   const work = getItem('work')
   // Whether recent searches and places should be tracked in local storage.
   const trackRecent = getItem('trackRecent', false)
-  const expandAdvanced = getItem('expandAdvanced', false)
   // Recent places used in trip plan searches.
   const recentPlaces = getItem('recent', [])
   // List of user's favorite stops.
@@ -102,7 +101,6 @@ function loadUserFromLocalStorage (config) {
       autoRefreshStopTimes,
       // Do not store from/to or date/time in defaults
       defaults: getTripOptionsFromQuery(defaults),
-      expandAdvanced,
       favoriteStops,
       recentPlaces,
       recentSearches,
@@ -215,7 +213,7 @@ function createUserReducer (config) {
       case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that
         // might be contained there (like lists of patterns).
-        const { id, name, lat, lon } = action.payload
+        const { id, lat, lon, name } = action.payload
         const stop = {
           icon: 'bus',
           id,
@@ -278,14 +276,6 @@ function createUserReducer (config) {
         storeItem('defaultQuery', action.payload)
         return update(state, { localUser: { defaults: { $set: action.payload } } })
 
-      // FIXME: set up action
-      case 'TOGGLE_ADVANCED_OPTIONS':
-        storeItem('expandAdvanced', action.payload)
-        if (!action.payload) removeItem('expandAdvanced')
-        return update(state, { localUser: {
-          expandAdvanced: { $set: action.payload }
-        } })
-
       default:
         return state
     }

From 509d5163174256fd19c93cc80050acb1ce952551 Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Tue, 24 Aug 2021 11:27:41 -0400
Subject: [PATCH 042/270] refactor(places): simplify component wrappers

---
 lib/components/app/batch-routing-panel.js     |  9 ++--
 lib/components/form/user-settings.js          | 23 +-------
 lib/components/user/places/cached-place.js    | 39 --------------
 .../user/places/favorite-place-list.js        |  5 +-
 lib/components/user/places/place.js           | 16 ++++--
 lib/components/user/places/saved-place.js     | 52 -------------------
 6 files changed, 19 insertions(+), 125 deletions(-)
 delete mode 100644 lib/components/user/places/cached-place.js
 delete mode 100644 lib/components/user/places/saved-place.js

diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 70006cee1..a730c84d9 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -6,6 +6,7 @@ import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
 import BatchSettings from '../form/batch-settings'
 import LocationField from '../form/connected-location-field'
+import UserSettings from '../form/user-settings'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import ViewerContainer from '../viewers/viewer-container'
@@ -33,7 +34,7 @@ const NarrativeContainer = styled.div`
  */
 class BatchRoutingPanel extends Component {
   render () {
-    const {mobile} = this.props
+    const {activeSearch, mobile, showUserSettings} = this.props
     const actionText = mobile ? 'tap' : 'click'
     return (
       <ViewerContainer className='batch-routing-panel'>
@@ -53,11 +54,9 @@ class BatchRoutingPanel extends Component {
           </div>
         </div>
         <BatchSettings />
-        {/* FIXME: Add back user settings (home, work, etc.) once connected to
-            the middleware persistence.
-          !activeSearch && showUserSettings &&
+        {!activeSearch && showUserSettings &&
           <UserSettings />
-        */}
+        }
         <NarrativeContainer className='desktop-narrative-container'>
           <NarrativeItineraries
             containerStyle={{
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 7fb8b5f48..ba04f5dc2 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -10,8 +10,6 @@ import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
-import CachedPlace from '../user/places/cached-place'
-import SavedPlace from '../user/places/saved-place'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { MainPanelPlace } from '../user/places/styled'
 import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
@@ -21,21 +19,6 @@ import { UnpaddedList } from './styled'
 
 const { summarizeQuery } = coreUtils.query
 
-/**
- * Associate a styled Place component to the provided Place component for rendering.
- */
-function stylePlace (BasePlaceComponent) {
-  return props => (
-    <BasePlaceComponent
-      PlaceComponent={MainPanelPlace}
-      {...props}
-    />
-  )
-}
-
-const StyledCachedPlace = stylePlace(CachedPlace)
-const StyledSavedPlace = stylePlace(SavedPlace)
-
 class UserSettings extends Component {
   _disableTracking = () => {
     const { localUser, toggleTracking } = this.props
@@ -105,7 +88,6 @@ class UserSettings extends Component {
               <LinkWithQuery to='/account/settings'>manage</LinkWithQuery>
               )
             </>)}
-            PlaceComponent={StyledSavedPlace}
             places={loggedInUser.savedLocations}
             separator={false}
           />
@@ -118,7 +100,7 @@ class UserSettings extends Component {
         </div>
       )
     } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-      const { favoriteStops, storeTripHistory, recentPlaces, recentSearches } = localUser
+      const { favoriteStops, recentPlaces, recentSearches, storeTripHistory } = localUser
       // Clone locations in order to prevent blank locations from seeping into the
       // app state/store.
       const locations = this._getLocations(localUser)
@@ -193,7 +175,6 @@ const Places = ({
   header,
   onDelete,
   onView,
-  PlaceComponent = StyledCachedPlace,
   places,
   separator = true,
   textIfEmpty
@@ -213,7 +194,7 @@ const Places = ({
                 onDelete={onDelete}
                 onView={onView}
                 place={location}
-                PlaceComponent={PlaceComponent}
+                PlaceComponent={MainPanelPlace}
               />
             )
           })
diff --git a/lib/components/user/places/cached-place.js b/lib/components/user/places/cached-place.js
deleted file mode 100644
index 20c96de03..000000000
--- a/lib/components/user/places/cached-place.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import coreUtils from '@opentripplanner/core-utils'
-import React, { Component } from 'react'
-
-const { formatStoredPlaceName, getDetailText } = coreUtils.map
-
-/**
- * Wrapper for the Place component for places cached in localStorage.
- */
-class CachedPlace extends Component {
-  _onView = () => {
-    const { onView, place } = this.props
-    onView({ stopId: place.id })
-  }
-
-  _onDelete = () => {
-    const { onDelete, place } = this.props
-    onDelete(place.id)
-  }
-
-  render () {
-    const { onClick, onDelete, onView, place, PlaceComponent } = this.props
-    const { blank, icon, type } = place
-    const canDelete = !blank && ['stop', 'home', 'work', 'recent'].indexOf(type) !== -1
-
-    return (
-      <PlaceComponent
-        details={getDetailText(place)}
-        icon={icon}
-        name={formatStoredPlaceName(place, false)}
-        onClick={onClick}
-        onDelete={(canDelete && onDelete) ? this._onDelete : null}
-        onView={onView && this._onView}
-        title={formatStoredPlaceName(place)}
-      />
-    )
-  }
-}
-
-export default CachedPlace
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 2f8f9f34b..5c6088381 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { UnpaddedList } from '../../form/styled'
 import { CREATE_ACCOUNT_PLACES_PATH } from '../../../util/constants'
 import { getPlaceBasePath } from '../../../util/user'
-import SavedPlace from './saved-place'
+
 import { FavoritePlace } from './styled'
 
 /**
@@ -17,12 +17,11 @@ const FavoritePlaceList = ({ isCreating, loggedInUser }) => (
     <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
     <UnpaddedList>
       {loggedInUser.savedLocations.map((place, index) => (
-        <SavedPlace
+        <FavoritePlace
           index={index}
           isCreating={isCreating}
           key={index}
           place={place}
-          PlaceComponent={FavoritePlace}
         />
       ))}
 
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index e00804dd7..462c95c5f 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { LinkContainerWithQuery } from '../../form/connected-links'
 import NarrativeIcon from '../../narrative/icon'
+import { getPlaceBasePath } from '../../../util/user'
 
 const Container = styled.li`
   align-items: stretch;
@@ -37,26 +38,31 @@ export const ActionButtonPlaceholder = styled.span``
 
 const VIEW_LABEL = 'View stop' // used for stops only.
 const DELETE_LABEL = 'Delete place'
+const EDIT_LABEL = 'Edit this place'
 
 /**
  * Renders a stylable clickable button for editing/selecting a user's favorite place,
  * and buttons for viewing and deleting the place if corresponding handlers are provided.
  */
 const Place = ({
+  place,
   ariaLabel,
   buttonStyle,
   className,
-  details,
-  icon,
+  name = place?.name || place?.address,
+  details = place?.address || `Set your ${place?.type || 'other'} address`,
+  icon = place?.icon,
+  index,
+  isCreating,
   largeIcon,
-  name,
   onClick,
   onDelete,
   onView,
-  path,
+  path = `${getPlaceBasePath(isCreating)}/${index}`,
   placeDetailClassName,
   placeTextClassName,
-  title
+  title = place?.address && onClick
+    ? `${name}${details && ` (${details})`}` : EDIT_LABEL
 }) => {
   const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
diff --git a/lib/components/user/places/saved-place.js b/lib/components/user/places/saved-place.js
deleted file mode 100644
index 64b558386..000000000
--- a/lib/components/user/places/saved-place.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-
-import * as userActions from '../../../actions/user'
-import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
-
-const EDIT_LABEL = 'Edit this place'
-
-/**
- * Wrapper for the Place component for saved places in OTP Middleware.
- */
-class SavedPlace extends Component {
-  _handleDelete = () => {
-    const { deleteLoggedInUserPlace, index } = this.props
-    deleteLoggedInUserPlace(index)
-  }
-
-  render () {
-    const { isCreating, index, onClick, place, PlaceComponent } = this.props
-    const { address, icon, name, type } = place
-    const canDelete = !isHomeOrWork(place) || address
-    const placeName = name || address
-    const details = name && (address || `Set your ${type} address`)
-    const useOnClick = address && onClick
-    const title = useOnClick ? `${placeName}${details && ` (${details})`}` : EDIT_LABEL
-
-    return (
-      <PlaceComponent
-        details={details}
-        icon={icon}
-        name={placeName}
-        onClick={useOnClick}
-        onDelete={canDelete && this._handleDelete}
-        path={`${getPlaceBasePath(isCreating)}/${index}`}
-        title={title}
-      />
-    )
-  }
-}
-
-// connect to redux store
-
-const mapStateToProps = (state, ownProps) => {
-  return {
-  }
-}
-
-const mapDispatchToProps = {
-  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SavedPlace)

From 21d4699ad8ac2d9f44d338dd97eef9c6dead4dad Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Fri, 10 Sep 2021 09:46:34 -0400
Subject: [PATCH 043/270] refactor: more tweaks

---
 .../__snapshots__/create-user-reducer.js.snap |   2 -
 lib/actions/user.js                           |   4 +-
 lib/components/form/user-settings.js          | 188 +++++++++---------
 lib/components/user/places/place.js           |   2 +-
 lib/reducers/create-user-reducer.js           |   4 -
 5 files changed, 94 insertions(+), 106 deletions(-)

diff --git a/__tests__/reducers/__snapshots__/create-user-reducer.js.snap b/__tests__/reducers/__snapshots__/create-user-reducer.js.snap
index a4c2662c3..3aa763bd5 100644
--- a/__tests__/reducers/__snapshots__/create-user-reducer.js.snap
+++ b/__tests__/reducers/__snapshots__/create-user-reducer.js.snap
@@ -10,7 +10,6 @@ Object {
     "timestamp": 1970-01-01T00:00:00.000Z,
   },
   "localUser": Object {
-    "autoRefreshStopTimes": true,
     "defaults": Object {
       "bikeSpeed": 3.58,
       "endTime": "09:00",
@@ -33,7 +32,6 @@ Object {
       "watts": 250,
       "wheelchair": false,
     },
-    "expandAdvanced": false,
     "favoriteStops": Array [],
     "recentPlaces": Array [],
     "recentSearches": Array [],
diff --git a/lib/actions/user.js b/lib/actions/user.js
index c63de083f..30a01a520 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -39,8 +39,8 @@ const setitineraryExistence = createAction('SET_ITINERARY_EXISTENCE')
 
 // localStorage user actions
 export const deleteLocalUserRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
-export const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
-export const deleteLocalUserStop = createAction('FORGET_STOP')
+const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
+export const deleteFavoriteStop = createAction('FORGET_STOP')
 const rememberLocalUserPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
 
 function createNewUser (auth0User) {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index ba04f5dc2..e746d54ac 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -12,7 +12,7 @@ import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { MainPanelPlace } from '../user/places/styled'
-import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
+import { PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
 
 import { UnpaddedList } from './styled'
@@ -40,6 +40,67 @@ class UserSettings extends Component {
 
   _enableTracking = () => !this.props.localUser.storeTripHistory && this.props.toggleTracking(true)
 
+  _getLocalStorageOnlyContent = () => {
+    const {
+      deleteFavoriteStop,
+      deleteLocalUserRecentPlace,
+      forgetSearch,
+      localUser,
+      setQueryParam,
+      setViewedStop,
+      storageDisclaimer
+    } = this.props
+
+    const { favoriteStops, recentPlaces, recentSearches, storeTripHistory } = localUser
+    return (
+      <>
+        {/* Favorite stops are shown regardless of tracking. */}
+        <Places
+          header='Favorite stops'
+          onDelete={deleteFavoriteStop}
+          onView={setViewedStop}
+          places={favoriteStops}
+          textIfEmpty='No favorite stops'
+        />
+
+        {storeTripHistory && <Places
+          header='Recent places'
+          onDelete={deleteLocalUserRecentPlace}
+          places={recentPlaces}
+        />}
+        <RecentTrips
+          forgetSearch={forgetSearch}
+          setQueryParam={setQueryParam}
+          tripRequests={recentSearches}
+          user={localUser}
+        />
+        <hr />
+        <div className='remember-settings'>
+          <div className='section-header'>My preferences</div>
+          <small>Remember recent searches/places?</small>
+          <Button
+            bsSize='xsmall'
+            bsStyle='link'
+            className={storeTripHistory ? 'active' : ''}
+            onClick={this._enableTracking}>Yes</Button>
+          <Button
+            bsSize='xsmall'
+            bsStyle='link'
+            className={!storeTripHistory ? 'active' : ''}
+            onClick={this._disableTracking}>No</Button>
+        </div>
+        {storageDisclaimer &&
+          <div>
+            <hr />
+            <div className='disclaimer'>
+              {storageDisclaimer}
+            </div>
+          </div>
+        }
+      </>
+    )
+  }
+
   _getLocations = user => {
     const locations = [...user.savedLocations]
     if (!locations.find(isWork)) {
@@ -47,7 +108,7 @@ class UserSettings extends Component {
         blank: true,
         icon: 'briefcase',
         id: 'work',
-        name: 'click to add',
+        name: 'Click to add',
         type: 'work'
       })
     }
@@ -56,7 +117,7 @@ class UserSettings extends Component {
         blank: true,
         icon: 'home',
         id: 'home',
-        name: 'click to add',
+        name: 'Click to add',
         type: 'home'
       })
     }
@@ -66,105 +127,38 @@ class UserSettings extends Component {
   render () {
     const {
       className,
-      deleteLocalUserRecentPlace,
-      deleteLocalUserSavedPlace,
-      deleteLocalUserStop,
-      forgetSearch,
+      deleteUserPlace,
       localUser,
       loggedInUser,
-      loggedInUserTripRequests,
-      persistenceStrategy,
-      setQueryParam,
-      setViewedStop,
-      storageDisclaimer
+      persistenceStrategy
     } = this.props
-
-    if (loggedInUser && persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
-      return (
-        <div className={`user-settings ${className}`}>
-          <Places
-            header={(<>
+    // Clone locations in order to prevent blank locations from seeping into the
+    // app state/store.
+    const locations = this._getLocations(localUser)
+    const order = ['home', 'work', 'suggested', 'stop', 'recent']
+    const sortedLocations = locations
+      .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
+    const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
+    const userNotLoggedIn = isUsingOtpMiddleware && !loggedInUser
+    if (userNotLoggedIn) return null
+    return (
+      <div className={`user-settings ${className}`}>
+        {/* Sorted locations are shown regardless of tracking. */}
+        <Places
+          header={isUsingOtpMiddleware &&
+            <>
               My saved places (
               <LinkWithQuery to='/account/settings'>manage</LinkWithQuery>
               )
-            </>)}
-            places={loggedInUser.savedLocations}
-            separator={false}
-          />
-          <RecentTrips
-            forgetSearch={forgetSearch}
-            setQueryParam={setQueryParam}
-            tripRequests={loggedInUserTripRequests}
-            user={loggedInUser}
-          />
-        </div>
-      )
-    } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-      const { favoriteStops, recentPlaces, recentSearches, storeTripHistory } = localUser
-      // Clone locations in order to prevent blank locations from seeping into the
-      // app state/store.
-      const locations = this._getLocations(localUser)
-      const order = ['home', 'work', 'suggested', 'stop', 'recent']
-      const sortedLocations = locations
-        .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
-      return (
-        <div className={`user-settings ${className}`}>
-          {/* Sorted locations are shown regardless of tracking. */}
-          <Places
-            onDelete={deleteLocalUserSavedPlace}
-            places={sortedLocations}
-            separator={false}
-          />
-
-          {/* Favorite stops are shown regardless of tracking. */}
-          <Places
-            header='Favorite stops'
-            onDelete={deleteLocalUserStop}
-            onView={setViewedStop}
-            places={favoriteStops}
-            textIfEmpty='No favorite stops'
-          />
-
-          {storeTripHistory && <Places
-            header='Recent places'
-            onDelete={deleteLocalUserRecentPlace}
-            places={recentPlaces}
-          />}
-          <RecentTrips
-            forgetSearch={forgetSearch}
-            setQueryParam={setQueryParam}
-            tripRequests={recentSearches}
-            user={localUser}
-          />
-
-          <hr />
-          <div className='remember-settings'>
-            <div className='section-header'>My preferences</div>
-            <small>Remember recent searches/places?</small>
-            <Button
-              bsSize='xsmall'
-              bsStyle='link'
-              className={storeTripHistory ? 'active' : ''}
-              onClick={this._enableTracking}>Yes</Button>
-            <Button
-              bsSize='xsmall'
-              bsStyle='link'
-              className={!storeTripHistory ? 'active' : ''}
-              onClick={this._disableTracking}>No</Button>
-          </div>
-          {storageDisclaimer &&
-            <div>
-              <hr />
-              <div className='disclaimer'>
-                {storageDisclaimer}
-              </div>
-            </div>
+            </>
           }
-        </div>
-      )
-    }
-
-    return null
+          onDelete={deleteUserPlace}
+          places={sortedLocations}
+          separator={false}
+        />
+        {!isUsingOtpMiddleware && this._getLocalStorageOnlyContent()}
+      </div>
+    )
   }
 }
 
@@ -288,10 +282,10 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
+  deleteFavoriteStop: userActions.deleteFavoriteStop,
   deleteLocalUserRecentPlace: userActions.deleteLocalUserRecentPlace,
-  deleteLocalUserSavedPlace: userActions.deleteLocalUserSavedPlace,
-  deleteLocalUserStop: userActions.deleteLocalUserStop,
   deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace,
+  deleteUserPlace: userActions.deleteUserPlace,
   forgetSearch: apiActions.forgetSearch,
   setLocation: mapActions.setLocation,
   setQueryParam: formActions.setQueryParam,
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 462c95c5f..331071052 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -100,7 +100,7 @@ const Place = ({
         <ActionButton
           aria-label={VIEW_LABEL}
           bsStyle={buttonStyle}
-          onClick={onView}
+          onClick={() => onView({ stopId: place.id })}
           title={VIEW_LABEL}
         >
           <Icon name='search' size={iconSize} />
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 14f2f84d6..4dd1b78b5 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -88,9 +88,6 @@ function loadUserFromLocalStorage (config) {
   if (configLocations) {
     locations.push(...configLocations.map(l => ({ ...l, type: 'suggested' })))
   }
-
-  // Whether to auto-refresh stop arrival times in the Stop Viewer.
-  const autoRefreshStopTimes = getItem('autoRefreshStopTimes', true)
   // User overrides determine user's default mode/query parameters.
   const userOverrides = getItem('defaultQuery', {})
   // Combine user overrides with default query to get default search settings.
@@ -98,7 +95,6 @@ function loadUserFromLocalStorage (config) {
 
   return {
     localUser: {
-      autoRefreshStopTimes,
       // Do not store from/to or date/time in defaults
       defaults: getTripOptionsFromQuery(defaults),
       favoriteStops,

From 5202871f7f28e52de6ab7be467f411d97b2df005 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Oct 2021 19:35:16 -0400
Subject: [PATCH 044/270] refactor(user/place): Format text content and restore
 broken functionality for localStorage.

---
 lib/components/form/user-settings.js          | 31 +++---
 .../user/places/favorite-place-row.js         |  9 +-
 lib/components/user/places/place-shortcut.js  | 28 ++++--
 lib/components/user/places/place.js           | 96 +++++++------------
 lib/components/user/places/styled.js          | 12 +--
 5 files changed, 83 insertions(+), 93 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index e746d54ac..e587f37ea 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -11,7 +11,7 @@ import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { LinkWithQuery } from '../form/connected-links'
 import PlaceShortcut from '../user/places/place-shortcut'
-import { MainPanelPlace } from '../user/places/styled'
+import { StyledMainPanelPlace } from '../user/places/styled'
 import { PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
 
@@ -56,6 +56,8 @@ class UserSettings extends Component {
       <>
         {/* Favorite stops are shown regardless of tracking. */}
         <Places
+          getDetailText={location => `Stop ID: ${location.id}`}
+          getMainText={location => location.address || location.name}
           header='Favorite stops'
           onDelete={deleteFavoriteStop}
           onView={setViewedStop}
@@ -64,12 +66,16 @@ class UserSettings extends Component {
         />
 
         {storeTripHistory && <Places
+          getDetailText={location => ''}
+          getMainText={location => location.address || location.name}
           header='Recent places'
           onDelete={deleteLocalUserRecentPlace}
           places={recentPlaces}
         />}
         <RecentTrips
           forgetSearch={forgetSearch}
+          getDetailText={trip => `Stop ID: ${location.id}`}
+          getMainText={trip => location.address || location.name}
           setQueryParam={setQueryParam}
           tripRequests={recentSearches}
           user={localUser}
@@ -108,7 +114,6 @@ class UserSettings extends Component {
         blank: true,
         icon: 'briefcase',
         id: 'work',
-        name: 'Click to add',
         type: 'work'
       })
     }
@@ -117,7 +122,6 @@ class UserSettings extends Component {
         blank: true,
         icon: 'home',
         id: 'home',
-        name: 'Click to add',
         type: 'home'
       })
     }
@@ -145,6 +149,8 @@ class UserSettings extends Component {
       <div className={`user-settings ${className}`}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
+          getDetailText={location => location.address || location.name || 'Click to add'}
+          getMainText={location => location.type}
           header={isUsingOtpMiddleware &&
             <>
               My saved places (
@@ -166,6 +172,8 @@ class UserSettings extends Component {
  * Displays a list of places with a header.
  */
 const Places = ({
+  getDetailText = location => location.name,
+  getMainText = location => location.type,
   header,
   onDelete,
   onView,
@@ -183,12 +191,13 @@ const Places = ({
           ? places.map((location, index) => {
             return (
               <PlaceShortcut
-                index={index}
+                detailText={getDetailText(location)}
+                icon={location.icon}
                 key={location.id || index}
+                mainText={getMainText(location)}
                 onDelete={onDelete}
                 onView={onView}
                 place={location}
-                PlaceComponent={MainPanelPlace}
               />
             )
           })
@@ -200,7 +209,7 @@ const Places = ({
 }
 
 /**
- * Wraps MainPanelPlace for recent trip requests.
+ * Wrapper for recent trip requests.
  */
 class TripRequest extends Component {
   _onSelect = () => {
@@ -215,17 +224,17 @@ class TripRequest extends Component {
   render () {
     const { tripRequest, user } = this.props
     const { canDelete = true, query, timestamp } = tripRequest
-    const name = summarizeQuery(query, user.savedLocations)
+    const mainText = summarizeQuery(query, user.savedLocations)
     const timeInfo = moment(timestamp).fromNow()
 
     return (
-      <MainPanelPlace
-        details={timeInfo}
+      <StyledMainPanelPlace
+        className='place-item'
+        detailText={timeInfo}
         icon='clock-o'
-        name={name}
+        mainText={mainText}
         onClick={this._onSelect}
         onDelete={canDelete && this._onForget}
-        title={`${name} (${timeInfo})`}
       />
     )
   }
diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place-row.js
index dea65aebe..c6bec12c3 100644
--- a/lib/components/user/places/favorite-place-row.js
+++ b/lib/components/user/places/favorite-place-row.js
@@ -30,6 +30,7 @@ const GreyIcon = styled(Icon)`
 
 const PlaceContent = styled.span`
   display: inline-block;
+  text-transform: capitalize;
 
   & * {
     color: #888;
@@ -63,9 +64,9 @@ const MESSAGES = {
  * Renders a clickable button for editing a user's favorite place,
  * and lets the user delete the place.
  */
-const FavoritePlaceRow = ({ isFixed, onDelete, path, place }) => {
+const FavoritePlaceRow = ({ detailText, icon, isFixed, mainText, onDelete, path, place }) => {
   if (place) {
-    const { address, icon, name, type } = place
+    const { address, icon } = place
     return (
       <Container>
         <LinkContainerWithQuery to={path}>
@@ -75,8 +76,8 @@ const FavoritePlaceRow = ({ isFixed, onDelete, path, place }) => {
           >
             <GreyIcon name={icon} size='2x' />
             <PlaceContent>
-              {name && <span>{name}</span>}
-              <span>{address || `Set your ${type} address`}</span>
+              <span>{mainText}</span>
+              <span>{detailText}</span>
             </PlaceContent>
           </PlaceButton>
         </LinkContainerWithQuery>
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index c16a89733..e8087ba43 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -5,6 +5,8 @@ import { connect } from 'react-redux'
 import * as mapActions from '../../../actions/map'
 import { convertToLocation } from '../../../util/user'
 
+import { StyledMainPanelPlace } from './styled'
+
 const { matchLatLon } = coreUtils.map
 
 /**
@@ -45,15 +47,29 @@ class PlaceShortcut extends Component {
     }
   }
 
+  _onView = () => {
+    const { onView, place } = this.props
+    onView({ stopId: place.id })
+  }
+
+  _onDelete = () => {
+    const { onDelete, place } = this.props
+    onDelete(place.id)
+  }
+
   render () {
-    const { index, onDelete, onView, place, PlaceComponent } = this.props
+    const { detailText, icon, mainText, onView, place, title } = this.props
     return (
-      <PlaceComponent
-        index={index}
+      <StyledMainPanelPlace
+        className='place-item'
+        detailText={detailText}
+        icon={icon}
+        mainText={mainText}
         onClick={this._onSelect}
-        onDelete={onDelete}
-        onView={onView}
-        place={place}
+        onDelete={!place.isFixed && !place.blank && this._onDelete}
+        onView={onView && this._onView}
+        placeId={place.id}
+        title={title}
       />
     )
   }
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 331071052..223eb014c 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -3,9 +3,9 @@ import React from 'react'
 import { Button } from 'react-bootstrap'
 import styled from 'styled-components'
 
-import { LinkContainerWithQuery } from '../../form/connected-links'
+// import { LinkContainerWithQuery } from '../../form/connected-links'
 import NarrativeIcon from '../../narrative/icon'
-import { getPlaceBasePath } from '../../../util/user'
+// import { getPlaceBasePath } from '../../../util/user'
 
 const Container = styled.li`
   align-items: stretch;
@@ -13,6 +13,7 @@ const Container = styled.li`
 `
 export const PlaceButton = styled(Button)`
   background: none;
+  border: none;
   flex: 1 0 0;
   overflow: hidden;
   text-align: left;
@@ -25,95 +26,78 @@ export const PlaceDetail = styled.span``
 
 export const PlaceContent = styled.span``
 
-export const PlaceName = styled.span``
+export const PlaceName = styled.span`
+  text-transform: capitalize;
+`
 
-export const PlaceText = styled.span``
+export const PlaceText = styled.span`
+  text-transform: capitalize;
+`
 
 export const ActionButton = styled(Button)`
   background: none;
+  border: none;
   height: 100%;
 `
 
 export const ActionButtonPlaceholder = styled.span``
 
+// FIXME_QBD: move this text elsewhere.
 const VIEW_LABEL = 'View stop' // used for stops only.
 const DELETE_LABEL = 'Delete place'
-const EDIT_LABEL = 'Edit this place'
+// const EDIT_LABEL = 'Edit this place'
 
 /**
  * Renders a stylable clickable button for editing/selecting a user's favorite place,
  * and buttons for viewing and deleting the place if corresponding handlers are provided.
  */
 const Place = ({
-  place,
   ariaLabel,
-  buttonStyle,
   className,
-  name = place?.name || place?.address,
-  details = place?.address || `Set your ${place?.type || 'other'} address`,
-  icon = place?.icon,
-  index,
-  isCreating,
-  largeIcon,
+  detailText,
+  icon,
+  mainText,
   onClick,
   onDelete,
   onView,
-  path = `${getPlaceBasePath(isCreating)}/${index}`,
-  placeDetailClassName,
-  placeTextClassName,
-  title = place?.address && onClick
-    ? `${name}${details && ` (${details})`}` : EDIT_LABEL
+  title
 }) => {
-  const to = onClick ? null : path
-  const iconSize = largeIcon && '2x'
-
   return (
     <Container className={className}>
-      <LinkContainerWithQuery
-        // Don't highlight component if 'to' is null.
-        activeClassName=''
-        to={to}
+      <PlaceButton
+        aria-label={ariaLabel}
+        onClick={onClick}
+        title={title}
       >
-        <PlaceButton
-          aria-label={ariaLabel}
-          bsStyle={buttonStyle}
-          onClick={onClick}
-          title={title}
-        >
-          {largeIcon && <Icon name={icon} size='2x' />}
-          <PlaceContent>
-            <PlaceText className={placeTextClassName}>
-              {!largeIcon && <Icon name={icon} />}
-              <PlaceName>{name}</PlaceName>
-            </PlaceText>
-
-            <PlaceDetail className={placeDetailClassName}>
-              {details}
-            </PlaceDetail>
-          </PlaceContent>
-        </PlaceButton>
-      </LinkContainerWithQuery>
+        <PlaceContent>
+          <PlaceText className='place-text'>
+            <Icon name={icon} />
+            <PlaceName>{mainText}</PlaceName>
+          </PlaceText>
+          <PlaceDetail className='place-detail'>
+            {detailText}
+          </PlaceDetail>
+        </PlaceContent>
+      </PlaceButton>
 
       {/* Action buttons. If none, render a placeholder. */}
       {!onView && !onDelete && <ActionButtonPlaceholder />}
       {onView && (
         <ActionButton
           aria-label={VIEW_LABEL}
-          bsStyle={buttonStyle}
-          onClick={() => onView({ stopId: place.id })}
+          onClick={onView}
           title={VIEW_LABEL}
         >
-          <Icon name='search' size={iconSize} />
+          <Icon name='search' />
         </ActionButton>
       )}
       {onDelete && (
         <ActionButton
           aria-label={DELETE_LABEL}
-          bsStyle={buttonStyle}
           onClick={onDelete}
           title={DELETE_LABEL}
         >
-          <Icon name='trash-o' size={iconSize} />
+          <Icon name='trash-o' />
         </ActionButton>
       )}
     </Container>
@@ -123,28 +107,18 @@ const Place = ({
 Place.propTypes = {
   /** The aria-label for the main button */
   ariaLabel: PropTypes.string,
-  /** The Bootstrap style to apply to buttons. */
-  buttonStyle: PropTypes.string,
   /** The detail text displayed for the place */
-  details: PropTypes.string,
+  detailText: PropTypes.string,
   /** The font-awesome icon name for the place. */
   icon: PropTypes.string,
-  /** Whether to render icons large. */
-  largeIcon: PropTypes.bool,
   /** The displayed name for the place. */
-  name: PropTypes.string,
+  mainText: PropTypes.string,
   /** Called when the "main" button is clicked. Takes precedence over the path prop. */
   onClick: PropTypes.func,
   /** Determines whether the Delete button is shown. Called when the Delete button is clicked. */
   onDelete: PropTypes.func,
   /** Determines whether the View button is shown. Called when the View button is clicked. */
   onView: PropTypes.func,
-  /** The path to navigate to on click. */
-  path: PropTypes.string,
-  /** CSS class name for the place details. */
-  placeDetailClassName: PropTypes.string,
-  /** CSS class name for the place name. */
-  placeTextClassName: PropTypes.string,
   /** The title for the main button */
   title: PropTypes.string
 }
diff --git a/lib/components/user/places/styled.js b/lib/components/user/places/styled.js
index f751e5e55..a045a1a8c 100644
--- a/lib/components/user/places/styled.js
+++ b/lib/components/user/places/styled.js
@@ -57,7 +57,7 @@ export const FavoritePlace = props => (
 // Styles and exports for the place component
 // used in the main panel.
 
-const StyledMainPanelPlace = styled(Place)`
+export const StyledMainPanelPlace = styled(Place)`
   ${PlaceName} {
     margin-left: 0.25em;
   }
@@ -69,13 +69,3 @@ const StyledMainPanelPlace = styled(Place)`
     width: 40px;
   }
 `
-
-export const MainPanelPlace = props => (
-  <StyledMainPanelPlace
-    buttonStyle='link'
-    className='place-item'
-    placeDetailClassName='place-detail'
-    placeTextClassName='place-text'
-    {...props}
-  />
-)

From 4c7e61c5edfab76816c2b9780799297d5afcf551 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Oct 2021 11:17:30 -0400
Subject: [PATCH 045/270] refactor(PlaceShortcut): Link blank places to place
 editor if using middleware.

---
 lib/components/form/user-settings.js         |  4 +++-
 lib/components/user/places/place-shortcut.js | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index e587f37ea..d79434517 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -149,7 +149,7 @@ class UserSettings extends Component {
       <div className={`user-settings ${className}`}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
-          getDetailText={location => location.address || location.name || 'Click to add'}
+          getDetailText={location => location.address || location.name || `Set your ${location.type} address`}
           getMainText={location => location.type}
           header={isUsingOtpMiddleware &&
             <>
@@ -172,6 +172,7 @@ class UserSettings extends Component {
  * Displays a list of places with a header.
  */
 const Places = ({
+  // FIXME_QBD: are these defaults still needed?
   getDetailText = location => location.name,
   getMainText = location => location.type,
   header,
@@ -193,6 +194,7 @@ const Places = ({
               <PlaceShortcut
                 detailText={getDetailText(location)}
                 icon={location.icon}
+                index={index}
                 key={location.id || index}
                 mainText={getMainText(location)}
                 onDelete={onDelete}
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index e8087ba43..5256b219b 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -3,7 +3,9 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import * as mapActions from '../../../actions/map'
-import { convertToLocation } from '../../../util/user'
+import * as uiActions from '../../../actions/ui'
+import { PERSIST_TO_OTP_MIDDLEWARE } from '../../../util/constants'
+import { convertToLocation, getPersistenceStrategy } from '../../../util/user'
 
 import { StyledMainPanelPlace } from './styled'
 
@@ -36,9 +38,13 @@ class PlaceShortcut extends Component {
   }
 
   _onSelect = () => {
-    const { place } = this.props
+    const { index, persistenceStrategy, place, routeTo } = this.props
     if (place.blank) {
-      window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
+      if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
+        routeTo(`/account/places/${index}`)
+      } else {
+        window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
+      }
     } else {
       // Convert to OTP UI location before sending events
       // (to avoid issues when user clicks Forget/Save location
@@ -78,12 +84,16 @@ class PlaceShortcut extends Component {
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {
+  const { config, currentQuery: query } = state.otp
+  const { persistence } = config
   return {
-    query: state.otp.currentQuery
+    persistenceStrategy: getPersistenceStrategy(persistence),
+    query
   }
 }
 
 const mapDispatchToProps = {
+  routeTo: uiActions.routeTo,
   setLocation: mapActions.setLocation
 }
 

From 8116fa3c50d7d865a562540fe4aa20c4ffbbdfce Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Oct 2021 12:55:42 -0400
Subject: [PATCH 046/270] refactor(UserSettings): Tweak saved place rendering.

---
 lib/components/form/user-settings.js         | 20 +++++++++++---------
 lib/components/user/places/place-shortcut.js |  2 +-
 lib/util/user.js                             |  6 ++++--
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index d79434517..2a9266003 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -13,7 +13,7 @@ import { LinkWithQuery } from '../form/connected-links'
 import PlaceShortcut from '../user/places/place-shortcut'
 import { StyledMainPanelPlace } from '../user/places/styled'
 import { PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
-import { getPersistenceStrategy, isHome, isWork } from '../../util/user'
+import { getPersistenceStrategy, isHome, isHomeOrWork, isWork } from '../../util/user'
 
 import { UnpaddedList } from './styled'
 
@@ -136,21 +136,23 @@ class UserSettings extends Component {
       loggedInUser,
       persistenceStrategy
     } = this.props
-    // Clone locations in order to prevent blank locations from seeping into the
-    // app state/store.
-    const locations = this._getLocations(localUser)
-    const order = ['home', 'work', 'suggested', 'stop', 'recent']
-    const sortedLocations = locations
-      .sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
     const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
     const userNotLoggedIn = isUsingOtpMiddleware && !loggedInUser
     if (userNotLoggedIn) return null
+
+    // Clone locations in order to prevent blank locations from seeping into the
+    // app state/store.
+    const locations = this._getLocations(isUsingOtpMiddleware ? loggedInUser : localUser)
+    const order = ['home', 'work', 'suggested', 'stop', 'recent']
+    const sortedLocations = isUsingOtpMiddleware
+      ? locations
+      : locations.sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
     return (
       <div className={`user-settings ${className}`}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
-          getDetailText={location => location.address || location.name || `Set your ${location.type} address`}
-          getMainText={location => location.type}
+          getDetailText={location => location.address || (!isHomeOrWork(location) && location.name) || `Set your ${location.type} address`}
+          getMainText={location => isHomeOrWork(location) ? location.type : location.name}
           header={isUsingOtpMiddleware &&
             <>
               My saved places (
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 5256b219b..d2f922e6f 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -72,7 +72,7 @@ class PlaceShortcut extends Component {
         icon={icon}
         mainText={mainText}
         onClick={this._onSelect}
-        onDelete={!place.isFixed && !place.blank && this._onDelete}
+        onDelete={!place.isFixed && !place.blank ? this._onDelete : null}
         onView={onView && this._onView}
         placeId={place.id}
         title={title}
diff --git a/lib/util/user.js b/lib/util/user.js
index 83c0243d7..4e24fb6b6 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -57,11 +57,13 @@ export const PLACE_TYPES = {
 // Defaults for home and work
 const BLANK_HOME = {
   ...PLACE_TYPES.home,
-  address: ''
+  address: '',
+  blank: true
 }
 const BLANK_WORK = {
   ...PLACE_TYPES.work,
-  address: ''
+  address: '',
+  blank: true
 }
 
 /**

From 0170bf5824d815a901a8cdb4dc5b75b8a7571684 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Oct 2021 16:00:45 -0400
Subject: [PATCH 047/270] refactor(Place): Continue harmonize place components.

---
 lib/actions/user.js                           |  23 +--
 lib/components/form/user-settings.js          |   2 +-
 .../user/places/favorite-place-list.js        |  19 ++-
 .../user/places/favorite-place-row.js         | 131 ------------------
 lib/components/user/places/place-shortcut.js  |   3 +-
 lib/components/user/places/place.js           |  11 +-
 lib/components/user/places/styled.js          |   4 +
 7 files changed, 37 insertions(+), 156 deletions(-)
 delete mode 100644 lib/components/user/places/favorite-place-row.js

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 30a01a520..4b8906f69 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -550,25 +550,26 @@ export function deleteLoggedInUserPlace (placeIndex) {
  * Delete place data by id for the logged-in or local user
  * according to the persistence strategy.
  */
-export function deleteUserPlace (placeId) {
+export function deleteUserPlace (place) {
   return function (dispatch, getState) {
     const { otp, user } = getState()
     const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
     const { loggedInUser } = user
 
     if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE && loggedInUser) {
-      // For middleware loggedInUsers, this method should only be triggered by the
-      // 'Forget home' or 'Forget work' links from OTP UI's EndPointOverlay/EndPoint,
-      // with placeId set to 'home' or 'work'.
-      if (isHomeOrWork({ type: placeId })) {
-        // Find the index of the place in the loggedInUser.savedLocations
-        const placeIndex = loggedInUser.savedLocations.findIndex(loc => loc.type === placeId)
-        if (placeIndex > -1) {
-          dispatch(deleteLoggedInUserPlace(placeIndex))
-        }
+      // Find the index of the place in the loggedInUser.savedLocations
+
+      // If 'Forget home' or 'Forget work' links from OTP UI's EndPointOverlay/EndPoint
+      // are clicked, then place will set to 'home' or 'work'.
+      const placeIndex = place === 'home' || place === 'work'
+        ? loggedInUser.savedLocations.findIndex(loc => loc.type === place)
+        : loggedInUser.savedLocations.indexOf(place)
+
+      if (placeIndex > -1) {
+        dispatch(deleteLoggedInUserPlace(placeIndex))
       }
     } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-      dispatch(deleteLocalUserSavedPlace(placeId))
+      dispatch(deleteLocalUserSavedPlace(place.id))
     }
   }
 }
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 2a9266003..03ea44a62 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -151,7 +151,7 @@ class UserSettings extends Component {
       <div className={`user-settings ${className}`}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
-          getDetailText={location => location.address || (!isHomeOrWork(location) && location.name) || `Set your ${location.type} address`}
+          getDetailText={location => location.address || location.name || `Set your ${location.type} address`}
           getMainText={location => isHomeOrWork(location) ? location.type : location.name}
           header={isUsingOtpMiddleware &&
             <>
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 5c6088381..f068a0cac 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { ControlLabel } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
+import * as userActions from '../../../actions/user'
 import { UnpaddedList } from '../../form/styled'
 import { CREATE_ACCOUNT_PLACES_PATH } from '../../../util/constants'
 import { getPlaceBasePath } from '../../../util/user'
@@ -12,22 +13,24 @@ import { FavoritePlace } from './styled'
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
  */
-const FavoritePlaceList = ({ isCreating, loggedInUser }) => (
+const FavoritePlaceList = ({ deleteUserPlace, isCreating, loggedInUser }) => (
   <div>
     <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
     <UnpaddedList>
       {loggedInUser.savedLocations.map((place, index) => (
         <FavoritePlace
-          index={index}
-          isCreating={isCreating}
+          detailText={place.address || `Set your ${place.type || 'other'} address`}
+          icon={place.icon}
           key={index}
-          place={place}
+          mainText={place.name || place.address}
+          onDelete={() => deleteUserPlace(place)}
+          path={`${getPlaceBasePath(isCreating)}/${index}`}
         />
       ))}
 
       <FavoritePlace
         icon='plus'
-        name='Add another place'
+        mainText='Add another place'
         path={`${getPlaceBasePath(isCreating)}/new`}
       />
     </UnpaddedList>
@@ -45,4 +48,8 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-export default connect(mapStateToProps)(FavoritePlaceList)
+const mapDispatchToProps = {
+  deleteUserPlace: userActions.deleteUserPlace
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlaceList)
diff --git a/lib/components/user/places/favorite-place-row.js b/lib/components/user/places/favorite-place-row.js
deleted file mode 100644
index c6bec12c3..000000000
--- a/lib/components/user/places/favorite-place-row.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Button } from 'react-bootstrap'
-import styled, { css } from 'styled-components'
-
-import { LinkContainerWithQuery } from '../../form/connected-links'
-import Icon from '../../narrative/icon'
-
-const FIELD_HEIGHT_PX = '60px'
-
-const Container = styled.div`
-  align-items: stretch;
-  display: flex;
-  height: ${FIELD_HEIGHT_PX};
-  margin-bottom: 10px;
-`
-const PlaceButton = styled(Button)`
-  align-items: center;
-  display: flex;
-  flex: 1 0 0;
-  overflow: hidden;
-  text-align: left;
-  width: inherit;
-`
-
-const GreyIcon = styled(Icon)`
-  color: #888;
-  margin-right: 10px;
-`
-
-const PlaceContent = styled.span`
-  display: inline-block;
-  text-transform: capitalize;
-
-  & * {
-    color: #888;
-    display: block;
-  }
-
-  & *:first-child {
-    color: inherit;
-  }
-`
-
-const deleteCss = css`
-  margin-left: 4px;
-  width: ${FIELD_HEIGHT_PX};
-`
-
-const DeleteButton = styled(Button)`
-  ${deleteCss}
-`
-
-const DeletePlaceholder = styled.span`
-  ${deleteCss}
-`
-
-const MESSAGES = {
-  DELETE: 'Delete this place',
-  EDIT: 'Edit this place'
-}
-
-/**
- * Renders a clickable button for editing a user's favorite place,
- * and lets the user delete the place.
- */
-const FavoritePlaceRow = ({ detailText, icon, isFixed, mainText, onDelete, path, place }) => {
-  if (place) {
-    const { address, icon } = place
-    return (
-      <Container>
-        <LinkContainerWithQuery to={path}>
-          <PlaceButton
-            aria-label={MESSAGES.EDIT}
-            title={MESSAGES.EDIT}
-          >
-            <GreyIcon name={icon} size='2x' />
-            <PlaceContent>
-              <span>{mainText}</span>
-              <span>{detailText}</span>
-            </PlaceContent>
-          </PlaceButton>
-        </LinkContainerWithQuery>
-
-        {/* For fixed places, show Delete only if an address has been provided. */}
-        {(!isFixed || address)
-          ? (
-            <DeleteButton
-              aria-label={MESSAGES.DELETE}
-              onClick={onDelete}
-              title={MESSAGES.DELETE}
-            >
-              <GreyIcon name='trash-o' size='2x' />
-            </DeleteButton>
-          )
-          : <DeletePlaceholder />}
-      </Container>
-    )
-  } else {
-    // If no place is passed, render the Add place button instead.
-    return (
-      <Container>
-        <LinkContainerWithQuery to={path}>
-          <PlaceButton>
-            <GreyIcon name='plus' size='2x' />
-              Add another place
-          </PlaceButton>
-        </LinkContainerWithQuery>
-        <DeletePlaceholder />
-      </Container>
-    )
-  }
-}
-
-FavoritePlaceRow.propTypes = {
-  /** Whether the place is fixed (e.g. 'Home', 'Work' are fixed.) */
-  isFixed: PropTypes.bool,
-  /** Called when the delete button is clicked. */
-  onDelete: PropTypes.func,
-  /** The path to navigate to on click. */
-  path: PropTypes.string.isRequired,
-  /** The place to render. */
-  place: PropTypes.shape({
-    address: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    type: PropTypes.string.isRequired
-  })
-}
-
-export default FavoritePlaceRow
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index d2f922e6f..764aa5fcf 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -60,7 +60,7 @@ class PlaceShortcut extends Component {
 
   _onDelete = () => {
     const { onDelete, place } = this.props
-    onDelete(place.id)
+    onDelete(place)
   }
 
   render () {
@@ -74,7 +74,6 @@ class PlaceShortcut extends Component {
         onClick={this._onSelect}
         onDelete={!place.isFixed && !place.blank ? this._onDelete : null}
         onView={onView && this._onView}
-        placeId={place.id}
         title={title}
       />
     )
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 223eb014c..88225a153 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -13,7 +13,6 @@ const Container = styled.li`
 `
 export const PlaceButton = styled(Button)`
   background: none;
-  border: none;
   flex: 1 0 0;
   overflow: hidden;
   text-align: left;
@@ -36,7 +35,6 @@ export const PlaceText = styled.span`
 
 export const ActionButton = styled(Button)`
   background: none;
-  border: none;
   height: 100%;
 `
 
@@ -56,12 +54,14 @@ const Place = ({
   className,
   detailText,
   icon,
+  largeIcon,
   mainText,
   onClick,
   onDelete,
   onView,
   title
 }) => {
+  const iconSize = largeIcon && '2x'
   return (
     <Container className={className}>
       <PlaceButton
@@ -69,9 +69,10 @@ const Place = ({
         onClick={onClick}
         title={title}
       >
+        {largeIcon && <Icon name={icon} size='2x' />}
         <PlaceContent>
           <PlaceText className='place-text'>
-            <Icon name={icon} />
+            {!largeIcon && <Icon name={icon} />}
             <PlaceName>{mainText}</PlaceName>
           </PlaceText>
           <PlaceDetail className='place-detail'>
@@ -88,7 +89,7 @@ const Place = ({
           onClick={onView}
           title={VIEW_LABEL}
         >
-          <Icon name='search' />
+          <Icon name='search' size={iconSize} />
         </ActionButton>
       )}
       {onDelete && (
@@ -97,7 +98,7 @@ const Place = ({
           onClick={onDelete}
           title={DELETE_LABEL}
         >
-          <Icon name='trash-o' />
+          <Icon name='trash-o' size={iconSize} />
         </ActionButton>
       )}
     </Container>
diff --git a/lib/components/user/places/styled.js b/lib/components/user/places/styled.js
index a045a1a8c..f79b9703c 100644
--- a/lib/components/user/places/styled.js
+++ b/lib/components/user/places/styled.js
@@ -58,6 +58,9 @@ export const FavoritePlace = props => (
 // used in the main panel.
 
 export const StyledMainPanelPlace = styled(Place)`
+  ${PlaceButton} {
+    border: none;
+  }
   ${PlaceName} {
     margin-left: 0.25em;
   }
@@ -66,6 +69,7 @@ export const StyledMainPanelPlace = styled(Place)`
     height: 100%;
   }
   ${ActionButton} {
+    border: none;
     width: 40px;
   }
 `

From 18021e9a58379305a30de2005238d34cac700273 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 11 Oct 2021 17:51:23 -0400
Subject: [PATCH 048/270] refactor(actions/user): Consolidate actions
 forgetStop/rememberStop.

---
 lib/actions/map.js                    | 4 ----
 lib/actions/user.js                   | 3 ++-
 lib/components/form/user-settings.js  | 8 ++++----
 lib/components/viewers/stop-viewer.js | 7 ++++---
 lib/reducers/create-user-reducer.js   | 2 +-
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 9312797b7..abe7780e3 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -22,10 +22,6 @@ const clearingLocation = createAction('CLEAR_LOCATION')
 const settingLocation = createAction('SET_LOCATION')
 const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
 
-// Public actions
-export const forgetStop = createAction('FORGET_STOP')
-export const rememberStop = createAction('REMEMBER_STOP')
-
 /**
  * Dispatches the action to delete a saved or recent place from localStorage.
  */
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 4b8906f69..fbe00f764 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -40,7 +40,8 @@ const setitineraryExistence = createAction('SET_ITINERARY_EXISTENCE')
 // localStorage user actions
 export const deleteLocalUserRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
 const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
-export const deleteFavoriteStop = createAction('FORGET_STOP')
+export const forgetStop = createAction('FORGET_STOP')
+export const rememberStop = createAction('REMEMBER_STOP')
 const rememberLocalUserPlace = createAction('REMEMBER_LOCAL_USER_PLACE')
 
 function createNewUser (auth0User) {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 03ea44a62..92817d89c 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -42,9 +42,9 @@ class UserSettings extends Component {
 
   _getLocalStorageOnlyContent = () => {
     const {
-      deleteFavoriteStop,
       deleteLocalUserRecentPlace,
       forgetSearch,
+      forgetStop,
       localUser,
       setQueryParam,
       setViewedStop,
@@ -59,14 +59,14 @@ class UserSettings extends Component {
           getDetailText={location => `Stop ID: ${location.id}`}
           getMainText={location => location.address || location.name}
           header='Favorite stops'
-          onDelete={deleteFavoriteStop}
+          onDelete={forgetStop}
           onView={setViewedStop}
           places={favoriteStops}
           textIfEmpty='No favorite stops'
         />
 
         {storeTripHistory && <Places
-          getDetailText={location => ''}
+          getDetailText={location => moment(location.timestamp).fromNow()}
           getMainText={location => location.address || location.name}
           header='Recent places'
           onDelete={deleteLocalUserRecentPlace}
@@ -295,11 +295,11 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  deleteFavoriteStop: userActions.deleteFavoriteStop,
   deleteLocalUserRecentPlace: userActions.deleteLocalUserRecentPlace,
   deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace,
   deleteUserPlace: userActions.deleteUserPlace,
   forgetSearch: apiActions.forgetSearch,
+  forgetStop: userActions.forgetStop,
   setLocation: mapActions.setLocation,
   setQueryParam: formActions.setQueryParam,
   setViewedStop: uiActions.setViewedStop,
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 90f828246..6e5db514a 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -11,6 +11,7 @@ import styled from 'styled-components'
 import * as apiActions from '../../actions/api'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
+import * as userActions from '../../actions/user'
 import Icon from '../narrative/icon'
 import { PERSIST_TO_LOCAL_STORAGE } from '../../util/constants'
 import { getShowUserSettings, getStopViewerConfig } from '../../util/state'
@@ -78,7 +79,7 @@ class StopViewer extends Component {
 
   _toggleFavorite = () => {
     const { forgetStop, rememberStop, stopData } = this.props
-    if (this._isFavorite()) forgetStop(stopData.id)
+    if (this._isFavorite()) forgetStop(stopData)
     else rememberStop(stopData)
   }
 
@@ -318,8 +319,8 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = {
   findStop: apiActions.findStop,
   findStopTimesForStop: apiActions.findStopTimesForStop,
-  forgetStop: mapActions.forgetStop,
-  rememberStop: mapActions.rememberStop,
+  forgetStop: userActions.forgetStop,
+  rememberStop: userActions.rememberStop,
   setLocation: mapActions.setLocation,
   setMainPanelContent: uiActions.setMainPanelContent,
   toggleAutoRefresh: uiActions.toggleAutoRefresh
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 4dd1b78b5..7c09f2f0b 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -204,7 +204,7 @@ function createUserReducer (config) {
       }
 
       case 'FORGET_STOP':
-        return removeLocalUserPlace(action.payload, state, 'favoriteStops', 'favoriteStops')
+        return removeLocalUserPlace(action.payload.id, state, 'favoriteStops', 'favoriteStops')
 
       case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that

From 325730aad8e52b262d5a20784b7ad23d558e3ff8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 12 Oct 2021 17:29:06 -0400
Subject: [PATCH 049/270] refactor(UserSettings): Fix delete actions for
 localStorage.

---
 __tests__/actions/__snapshots__/api.js.snap      |  4 ++--
 .../viewers/__snapshots__/stop-viewer.js.snap    | 16 ----------------
 lib/actions/api.js                               |  2 +-
 lib/actions/user.js                              |  2 +-
 lib/components/form/user-settings.js             |  2 +-
 lib/reducers/create-user-reducer.js              |  6 +++---
 6 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/__tests__/actions/__snapshots__/api.js.snap b/__tests__/actions/__snapshots__/api.js.snap
index f00d42d1d..f5f86bf33 100644
--- a/__tests__/actions/__snapshots__/api.js.snap
+++ b/__tests__/actions/__snapshots__/api.js.snap
@@ -35,7 +35,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
+        "error": [TypeError: Cannot read property 'localUser' of undefined],
         "requestId": "abcd1239",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false",
@@ -110,7 +110,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
+        "error": [TypeError: Cannot read property 'localUser' of undefined],
         "requestId": "abcd1236",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false",
diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
index 8a49a4925..231f552bf 100644
--- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
@@ -15,7 +15,6 @@ exports[`components > viewers > stop viewer should render countdown times after
 >
   <Connect(StopViewer)>
     <StopViewer
-      autoRefreshStopTimes={true}
       enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
@@ -498,7 +497,6 @@ exports[`components > viewers > stop viewer should render countdown times after
               className="sc-jrAGrp bDAiGg"
             >
               <LiveStopTimes
-                autoRefreshStopTimes={true}
                 findStopTimesForStop={[Function]}
                 homeTimezone="America/Los_Angeles"
                 stopData={
@@ -1006,7 +1004,6 @@ exports[`components > viewers > stop viewer should render countdown times after
                     }
                   >
                     <input
-                      checked={true}
                       name="autoUpdate"
                       onChange={[Function]}
                       type="checkbox"
@@ -1069,7 +1066,6 @@ exports[`components > viewers > stop viewer should render countdown times for st
 >
   <Connect(StopViewer)>
     <StopViewer
-      autoRefreshStopTimes={true}
       enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
@@ -1453,7 +1449,6 @@ exports[`components > viewers > stop viewer should render countdown times for st
               className="sc-jrAGrp bDAiGg"
             >
               <LiveStopTimes
-                autoRefreshStopTimes={true}
                 findStopTimesForStop={[Function]}
                 homeTimezone="America/Los_Angeles"
                 stopData={
@@ -1772,7 +1767,6 @@ exports[`components > viewers > stop viewer should render countdown times for st
                     }
                   >
                     <input
-                      checked={true}
                       name="autoUpdate"
                       onChange={[Function]}
                       type="checkbox"
@@ -1835,7 +1829,6 @@ exports[`components > viewers > stop viewer should render times after midnight w
 >
   <Connect(StopViewer)>
     <StopViewer
-      autoRefreshStopTimes={true}
       enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
@@ -2318,7 +2311,6 @@ exports[`components > viewers > stop viewer should render times after midnight w
               className="sc-jrAGrp bDAiGg"
             >
               <LiveStopTimes
-                autoRefreshStopTimes={true}
                 findStopTimesForStop={[Function]}
                 homeTimezone="America/Los_Angeles"
                 stopData={
@@ -2835,7 +2827,6 @@ exports[`components > viewers > stop viewer should render times after midnight w
                     }
                   >
                     <input
-                      checked={true}
                       name="autoUpdate"
                       onChange={[Function]}
                       type="checkbox"
@@ -2898,7 +2889,6 @@ exports[`components > viewers > stop viewer should render with OTP transit index
 >
   <Connect(StopViewer)>
     <StopViewer
-      autoRefreshStopTimes={true}
       enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
@@ -3639,7 +3629,6 @@ exports[`components > viewers > stop viewer should render with OTP transit index
               className="sc-jrAGrp bDAiGg"
             >
               <LiveStopTimes
-                autoRefreshStopTimes={true}
                 findStopTimesForStop={[Function]}
                 homeTimezone="America/Los_Angeles"
                 stopData={
@@ -5243,7 +5232,6 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                     }
                   >
                     <input
-                      checked={true}
                       name="autoUpdate"
                       onChange={[Function]}
                       type="checkbox"
@@ -5306,7 +5294,6 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
 >
   <Connect(StopViewer)>
     <StopViewer
-      autoRefreshStopTimes={true}
       enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
@@ -6042,7 +6029,6 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
               className="sc-jrAGrp bDAiGg"
             >
               <LiveStopTimes
-                autoRefreshStopTimes={true}
                 findStopTimesForStop={[Function]}
                 homeTimezone="America/Los_Angeles"
                 stopData={
@@ -6812,7 +6798,6 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                     }
                   >
                     <input
-                      checked={true}
                       name="autoUpdate"
                       onChange={[Function]}
                       type="checkbox"
@@ -6875,7 +6860,6 @@ exports[`components > viewers > stop viewer should render with initial stop id a
 >
   <Connect(StopViewer)>
     <StopViewer
-      autoRefreshStopTimes={true}
       enableFavoriteStops={false}
       favoriteStops={Array []}
       findStop={[Function]}
diff --git a/lib/actions/api.js b/lib/actions/api.js
index b8991ba39..1a03dc3d9 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -135,7 +135,7 @@ export function routingQuery (searchId = null, updateSearchInReducer = false) {
           }))
           // If tracking is enabled, store locations and search after successful
           // search is completed.
-          if (state.otp.user.trackRecent) {
+          if (state.user.localUser?.storeTripHistory) {
             const { from, to } = state.otp.currentQuery
             if (!isStoredPlace(from)) {
               dispatch(rememberPlace({ location: formatRecentPlace(from), type: 'recent' }))
diff --git a/lib/actions/user.js b/lib/actions/user.js
index fbe00f764..0f8e358dc 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -570,7 +570,7 @@ export function deleteUserPlace (place) {
         dispatch(deleteLoggedInUserPlace(placeIndex))
       }
     } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-      dispatch(deleteLocalUserSavedPlace(place.id))
+      dispatch(deleteLocalUserSavedPlace(place))
     }
   }
 }
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 92817d89c..31dcce7e3 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -223,7 +223,7 @@ class TripRequest extends Component {
     setQueryParam(query, id)
   }
 
-  _onForget = () => this.props.forgetSearch(this.props.tripRequest.id)
+  _onForget = () => this.props.forgetSearch(this.props.tripRequest)
 
   render () {
     const { tripRequest, user } = this.props
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 7c09f2f0b..6111b5f07 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -46,9 +46,9 @@ function sortAndTrim (list) {
 /**
  * Removes a place by id from the specified localUser state and optional persistence setting.
  */
-function removeLocalUserPlace (id, state, fieldName, settingName) {
+function removeLocalUserPlace (place, state, fieldName, settingName) {
   const originalArray = state.localUser[fieldName]
-  const removeIndex = originalArray.findIndex(l => l.id === id)
+  const removeIndex = originalArray.findIndex(l => l.id === place.id)
   // If a persistence setting is provided,
   // persist a copy of the passed array without the specified element.
   if (settingName) {
@@ -204,7 +204,7 @@ function createUserReducer (config) {
       }
 
       case 'FORGET_STOP':
-        return removeLocalUserPlace(action.payload.id, state, 'favoriteStops', 'favoriteStops')
+        return removeLocalUserPlace(action.payload, state, 'favoriteStops', 'favoriteStops')
 
       case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that

From 40f8c8737a939dc1b9a0638e97c8afb24863762b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 12 Oct 2021 17:47:46 -0400
Subject: [PATCH 050/270] refactor(Place button): Reinstate path prop.

---
 lib/components/user/places/place.js | 45 ++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 88225a153..58bf0bcb5 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -3,9 +3,8 @@ import React from 'react'
 import { Button } from 'react-bootstrap'
 import styled from 'styled-components'
 
-// import { LinkContainerWithQuery } from '../../form/connected-links'
+import { LinkContainerWithQuery } from '../../form/connected-links'
 import NarrativeIcon from '../../narrative/icon'
-// import { getPlaceBasePath } from '../../../util/user'
 
 const Container = styled.li`
   align-items: stretch;
@@ -59,27 +58,35 @@ const Place = ({
   onClick,
   onDelete,
   onView,
+  path,
   title
 }) => {
+  const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
   return (
     <Container className={className}>
-      <PlaceButton
-        aria-label={ariaLabel}
-        onClick={onClick}
-        title={title}
+      <LinkContainerWithQuery
+        // Don't highlight component if 'to' is null.
+        activeClassName=''
+        to={to}
       >
-        {largeIcon && <Icon name={icon} size='2x' />}
-        <PlaceContent>
-          <PlaceText className='place-text'>
-            {!largeIcon && <Icon name={icon} />}
-            <PlaceName>{mainText}</PlaceName>
-          </PlaceText>
-          <PlaceDetail className='place-detail'>
-            {detailText}
-          </PlaceDetail>
-        </PlaceContent>
-      </PlaceButton>
+        <PlaceButton
+          aria-label={ariaLabel}
+          onClick={onClick}
+          title={title}
+        >
+          {largeIcon && <Icon name={icon} size='2x' />}
+          <PlaceContent>
+            <PlaceText className='place-text'>
+              {!largeIcon && <Icon name={icon} />}
+              <PlaceName>{mainText}</PlaceName>
+            </PlaceText>
+            <PlaceDetail className='place-detail'>
+              {detailText}
+            </PlaceDetail>
+          </PlaceContent>
+        </PlaceButton>
+      </LinkContainerWithQuery>
 
       {/* Action buttons. If none, render a placeholder. */}
       {!onView && !onDelete && <ActionButtonPlaceholder />}
@@ -112,6 +119,8 @@ Place.propTypes = {
   detailText: PropTypes.string,
   /** The font-awesome icon name for the place. */
   icon: PropTypes.string,
+  /** Whether to render icons large. */
+  largeIcon: PropTypes.bool,
   /** The displayed name for the place. */
   mainText: PropTypes.string,
   /** Called when the "main" button is clicked. Takes precedence over the path prop. */
@@ -120,6 +129,8 @@ Place.propTypes = {
   onDelete: PropTypes.func,
   /** Determines whether the View button is shown. Called when the View button is clicked. */
   onView: PropTypes.func,
+  /** The path to navigate to on click. */
+  path: PropTypes.string,
   /** The title for the main button */
   title: PropTypes.string
 }

From e62ae57476b4c51d10e8489b8a14d1d8d93ff370 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 13 Oct 2021 11:04:09 -0400
Subject: [PATCH 051/270] refactor(Place): Fix deleting user place

---
 lib/actions/user.js                               | 5 ++++-
 lib/components/form/user-settings.js              | 8 ++++----
 lib/components/user/places/favorite-place-list.js | 2 ++
 lib/components/user/places/place-shortcut.js      | 3 +--
 lib/components/user/places/place.js               | 6 +-----
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 0f8e358dc..691c2fe27 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -519,10 +519,13 @@ export function planNewTripFromMonitoredTrip (monitoredTrip) {
  * Saves the given place data at the specified index for the logged-in user.
  * Note: places with blank addresses will not appear in persistence.
  */
-export function saveUserPlace (placeToSave, placeIndex) {
+export function saveUserPlace (place, placeIndex) {
   return function (dispatch, getState) {
     const { loggedInUser } = getState().user
 
+    // Remove "blank" attribute
+    const { blank, ...placeToSave } = place
+
     if (placeIndex === 'new') {
       loggedInUser.savedLocations.push(placeToSave)
     } else {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 31dcce7e3..b42bade11 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -17,6 +17,7 @@ import { getPersistenceStrategy, isHome, isHomeOrWork, isWork } from '../../util
 
 import { UnpaddedList } from './styled'
 
+const { toSentenceCase } = coreUtils.itinerary
 const { summarizeQuery } = coreUtils.query
 
 class UserSettings extends Component {
@@ -152,7 +153,7 @@ class UserSettings extends Component {
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
           getDetailText={location => location.address || location.name || `Set your ${location.type} address`}
-          getMainText={location => isHomeOrWork(location) ? location.type : location.name}
+          getMainText={location => isHomeOrWork(location) ? toSentenceCase(location.type) : location.name}
           header={isUsingOtpMiddleware &&
             <>
               My saved places (
@@ -174,9 +175,8 @@ class UserSettings extends Component {
  * Displays a list of places with a header.
  */
 const Places = ({
-  // FIXME_QBD: are these defaults still needed?
-  getDetailText = location => location.name,
-  getMainText = location => location.type,
+  getDetailText,
+  getMainText,
   header,
   onDelete,
   onView,
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index f068a0cac..da6744740 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -25,6 +25,7 @@ const FavoritePlaceList = ({ deleteUserPlace, isCreating, loggedInUser }) => (
           mainText={place.name || place.address}
           onDelete={() => deleteUserPlace(place)}
           path={`${getPlaceBasePath(isCreating)}/${index}`}
+          title={'Edit this place'}
         />
       ))}
 
@@ -32,6 +33,7 @@ const FavoritePlaceList = ({ deleteUserPlace, isCreating, loggedInUser }) => (
         icon='plus'
         mainText='Add another place'
         path={`${getPlaceBasePath(isCreating)}/new`}
+        title={''}
       />
     </UnpaddedList>
   </div>
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 764aa5fcf..f8fea8949 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -64,7 +64,7 @@ class PlaceShortcut extends Component {
   }
 
   render () {
-    const { detailText, icon, mainText, onView, place, title } = this.props
+    const { detailText, icon, mainText, onView, place } = this.props
     return (
       <StyledMainPanelPlace
         className='place-item'
@@ -74,7 +74,6 @@ class PlaceShortcut extends Component {
         onClick={this._onSelect}
         onDelete={!place.isFixed && !place.blank ? this._onDelete : null}
         onView={onView && this._onView}
-        title={title}
       />
     )
   }
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 58bf0bcb5..289789576 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -39,17 +39,14 @@ export const ActionButton = styled(Button)`
 
 export const ActionButtonPlaceholder = styled.span``
 
-// FIXME_QBD: move this text elsewhere.
 const VIEW_LABEL = 'View stop' // used for stops only.
 const DELETE_LABEL = 'Delete place'
-// const EDIT_LABEL = 'Edit this place'
 
 /**
  * Renders a stylable clickable button for editing/selecting a user's favorite place,
  * and buttons for viewing and deleting the place if corresponding handlers are provided.
  */
 const Place = ({
-  ariaLabel,
   className,
   detailText,
   icon,
@@ -59,7 +56,7 @@ const Place = ({
   onDelete,
   onView,
   path,
-  title
+  title = `${mainText}${detailText && ` (${detailText})`}`
 }) => {
   const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
@@ -71,7 +68,6 @@ const Place = ({
         to={to}
       >
         <PlaceButton
-          aria-label={ariaLabel}
           onClick={onClick}
           title={title}
         >

From b7b608d2c9c8a57b9bbcbe28b81a59ef0b41a77e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 13 Oct 2021 11:35:26 -0400
Subject: [PATCH 052/270] refactor(Tweak things):

---
 __tests__/reducers/create-user-reducer.js | 2 +-
 lib/actions/user.js                       | 5 ++---
 lib/components/user/places/place.js       | 2 --
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/__tests__/reducers/create-user-reducer.js b/__tests__/reducers/create-user-reducer.js
index a55594ec2..2409f681d 100644
--- a/__tests__/reducers/create-user-reducer.js
+++ b/__tests__/reducers/create-user-reducer.js
@@ -6,6 +6,6 @@ describe('lib > reducers > create-user-reducer', () => {
 
   it('should be able to create the initial state', () => {
     setDefaultTestTime()
-    expect(getUserInitialState({}, {})).toMatchSnapshot()
+    expect(getUserInitialState({})).toMatchSnapshot()
   })
 })
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 691c2fe27..772b5e5bc 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -523,7 +523,7 @@ export function saveUserPlace (place, placeIndex) {
   return function (dispatch, getState) {
     const { loggedInUser } = getState().user
 
-    // Remove "blank" attribute
+    // Remove "blank" attribute, it is not recognized by the middleware.
     const { blank, ...placeToSave } = place
 
     if (placeIndex === 'new') {
@@ -551,8 +551,7 @@ export function deleteLoggedInUserPlace (placeIndex) {
 }
 
 /**
- * Delete place data by id for the logged-in or local user
- * according to the persistence strategy.
+ * Delete a place for the logged-in or local user according to the persistence strategy.
  */
 export function deleteUserPlace (place) {
   return function (dispatch, getState) {
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 289789576..e6747d9cf 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -109,8 +109,6 @@ const Place = ({
 }
 
 Place.propTypes = {
-  /** The aria-label for the main button */
-  ariaLabel: PropTypes.string,
   /** The detail text displayed for the place */
   detailText: PropTypes.string,
   /** The font-awesome icon name for the place. */

From ffbe225a27d71256ec57806f202d6e94b5410a12 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 13 Oct 2021 12:11:48 -0400
Subject: [PATCH 053/270] refactor(UserSettings): Remove unused props

---
 lib/components/form/user-settings.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index b42bade11..205aacde0 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -75,8 +75,6 @@ class UserSettings extends Component {
         />}
         <RecentTrips
           forgetSearch={forgetSearch}
-          getDetailText={trip => `Stop ID: ${location.id}`}
-          getMainText={trip => location.address || location.name}
           setQueryParam={setQueryParam}
           tripRequests={recentSearches}
           user={localUser}

From 32da1cf37c5ae697e9e59c9d78a6db5350e6353f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 13 Oct 2021 12:56:26 -0400
Subject: [PATCH 054/270] refactor(UserSettings): Override default styles in
 BatchRoutingPanel.

---
 lib/components/app/batch-routing-panel.js | 2 +-
 lib/components/form/user-settings.js      | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index a730c84d9..e66b2e7bd 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -55,7 +55,7 @@ class BatchRoutingPanel extends Component {
         </div>
         <BatchSettings />
         {!activeSearch && showUserSettings &&
-          <UserSettings />
+          <UserSettings style={{ margin: '10px 0 0' }} />
         }
         <NarrativeContainer className='desktop-narrative-container'>
           <NarrativeItineraries
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 205aacde0..864b2a863 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -133,7 +133,8 @@ class UserSettings extends Component {
       deleteUserPlace,
       localUser,
       loggedInUser,
-      persistenceStrategy
+      persistenceStrategy,
+      style
     } = this.props
     const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
     const userNotLoggedIn = isUsingOtpMiddleware && !loggedInUser
@@ -147,7 +148,7 @@ class UserSettings extends Component {
       ? locations
       : locations.sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type))
     return (
-      <div className={`user-settings ${className}`}>
+      <div className={`user-settings ${className}`} style={style}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
           getDetailText={location => location.address || location.name || `Set your ${location.type} address`}

From 56510d26ac743763341fdf83090fcc945411bada Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 13 Oct 2021 16:34:32 -0400
Subject: [PATCH 055/270] refactor(UserSettings): Include recent searches for
 opted-in otp-middleware users.

---
 __tests__/actions/__snapshots__/api.js.snap | 30 +++-------------
 lib/actions/api.js                          | 38 +++++++++++++++------
 lib/components/form/user-settings.js        | 20 +++++++++--
 3 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/__tests__/actions/__snapshots__/api.js.snap b/__tests__/actions/__snapshots__/api.js.snap
index f5f86bf33..88bb085fe 100644
--- a/__tests__/actions/__snapshots__/api.js.snap
+++ b/__tests__/actions/__snapshots__/api.js.snap
@@ -23,7 +23,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "requestId": "abcd1238",
+        "requestId": "abcd1237",
         "response": Object {
           "fake": "response",
         },
@@ -32,17 +32,6 @@ Array [
       "type": "ROUTING_RESPONSE",
     },
   ],
-  Array [
-    Object {
-      "payload": Object {
-        "error": [TypeError: Cannot read property 'localUser' of undefined],
-        "requestId": "abcd1239",
-        "searchId": "abcd1234",
-        "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false",
-      },
-      "type": "ROUTING_ERROR",
-    },
-  ],
   Array [
     [Function],
   ],
@@ -52,7 +41,7 @@ Array [
         "activeItinerary": 0,
         "pending": 1,
         "routingType": "ITINERARY",
-        "searchId": "abcd1237",
+        "searchId": "abcd1236",
         "updateSearchInReducer": false,
       },
       "type": "ROUTING_REQUEST",
@@ -65,8 +54,8 @@ Array [
     Object {
       "payload": Object {
         "error": [Error: Received error from server],
-        "requestId": "abcd1240",
-        "searchId": "abcd1237",
+        "requestId": "abcd1238",
+        "searchId": "abcd1236",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false",
       },
       "type": "ROUTING_ERROR",
@@ -107,17 +96,6 @@ Array [
       "type": "ROUTING_RESPONSE",
     },
   ],
-  Array [
-    Object {
-      "payload": Object {
-        "error": [TypeError: Cannot read property 'localUser' of undefined],
-        "requestId": "abcd1236",
-        "searchId": "abcd1234",
-        "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false",
-      },
-      "type": "ROUTING_ERROR",
-    },
-  ],
 ]
 `;
 
diff --git a/lib/actions/api.js b/lib/actions/api.js
index 1a03dc3d9..9cd5ef4a6 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -6,11 +6,13 @@ import coreUtils from '@opentripplanner/core-utils'
 import { createAction } from 'redux-actions'
 import qs from 'qs'
 
-import { getStopViewerConfig, queryIsValid } from '../util/state'
+import { PERSIST_TO_OTP_MIDDLEWARE } from '../util/constants'
 import { getSecureFetchOptions } from '../util/middleware'
+import { getStopViewerConfig, queryIsValid } from '../util/state'
+import { getPersistenceStrategy } from '../util/user'
 
 import { ItineraryView, setItineraryView } from './ui'
-import { rememberPlace } from './user'
+import { fetchTripRequests, rememberPlace } from './user'
 
 if (typeof (fetch) === 'undefined') require('isomorphic-fetch')
 
@@ -89,6 +91,9 @@ export function routingQuery (searchId = null, updateSearchInReducer = false) {
   return function (dispatch, getState) {
     // FIXME: batchId is searchId for now.
     const state = getState()
+    const { currentQuery } = state.otp
+    const persistenceStrategy = getPersistenceStrategy(state.otp.config.persistence)
+    const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
 
     const isNewSearch = !searchId
     if (isNewSearch) searchId = randId()
@@ -96,7 +101,7 @@ export function routingQuery (searchId = null, updateSearchInReducer = false) {
     if (!queryIsValid(state)) {
       console.warn(
         'Query is invalid. Aborting routing query',
-        state.otp.currentQuery
+        currentQuery
       )
       return
     }
@@ -104,13 +109,13 @@ export function routingQuery (searchId = null, updateSearchInReducer = false) {
     // Reset itinerary view to default (list view).
     dispatch(setItineraryView(ItineraryView.LIST))
     const activeItinerary = getActiveItinerary(state)
-    const routingType = state.otp.currentQuery.routingType
+    const { combinations, routingType } = currentQuery
 
     // For multiple mode combinations, gather injected params from config/query.
     // Otherwise, inject nothing (rely on what's in current query) and perform
     // one iteration.
-    const iterations = state.otp.currentQuery.combinations
-      ? state.otp.currentQuery.combinations.map(
+    const iterations = combinations
+      ? combinations.map(
         ({mode, params}) => ({mode, ...params})
       )
       : [{}]
@@ -135,8 +140,8 @@ export function routingQuery (searchId = null, updateSearchInReducer = false) {
           }))
           // If tracking is enabled, store locations and search after successful
           // search is completed.
-          if (state.user.localUser?.storeTripHistory) {
-            const { from, to } = state.otp.currentQuery
+          if (!isUsingOtpMiddleware && state.user?.localUser?.storeTripHistory) {
+            const { from, to } = currentQuery
             if (!isStoredPlace(from)) {
               dispatch(rememberPlace({ location: formatRecentPlace(from), type: 'recent' }))
             }
@@ -183,15 +188,26 @@ export function routingQuery (searchId = null, updateSearchInReducer = false) {
       // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
       // (state.user stays unpopulated until after this function is called).
       //
-      const { user } = state
-      const storeTripHistory = user?.loggedInUser?.storeTripHistory
+      const shouldStoreTrip = i === 0 && (
+        isUsingOtpMiddleware
+          ? state.user?.loggedInUser?.storeTripHistory
+          : state.user?.localUser?.storeTripHistory
+      )
 
       const nonRealtimeFetch = fetch(
         constructRoutingQuery(state, true),
-        getOtpFetchOptions(state, storeTripHistory)
+        getOtpFetchOptions(state, shouldStoreTrip)
       )
         .then(getJsonAndCheckResponse)
         .then(json => {
+          // If tracking is enabled, refetch recent trip requests after a few seconds,
+          // so that persistence of trip requests has time to complete.
+          if (isUsingOtpMiddleware && state.user?.loggedInUser?.storeTripHistory) {
+            setTimeout(() => {
+              dispatch(fetchTripRequests())
+            }, 5000)
+          }
+
           // FIXME: This is only performed when ignoring realtimeupdates currently, just
           // to ensure it is not repeated twice.
           // FIXME: We should check that the mode combination actually has
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 864b2a863..d447fdc42 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -131,9 +131,12 @@ class UserSettings extends Component {
     const {
       className,
       deleteUserPlace,
+      forgetSearch,
       localUser,
       loggedInUser,
+      loggedInUserTripRequests,
       persistenceStrategy,
+      setQueryParam,
       style
     } = this.props
     const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
@@ -151,7 +154,9 @@ class UserSettings extends Component {
       <div className={`user-settings ${className}`} style={style}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
-          getDetailText={location => location.address || location.name || `Set your ${location.type} address`}
+          getDetailText={location =>
+            // FIXME_QBD: unify the two location models.
+            (isUsingOtpMiddleware ? location.address : location.name) || `Set your ${location.type} address`}
           getMainText={location => isHomeOrWork(location) ? toSentenceCase(location.type) : location.name}
           header={isUsingOtpMiddleware &&
             <>
@@ -164,7 +169,16 @@ class UserSettings extends Component {
           places={sortedLocations}
           separator={false}
         />
-        {!isUsingOtpMiddleware && this._getLocalStorageOnlyContent()}
+        {isUsingOtpMiddleware
+          ? (
+            <RecentTrips
+              forgetSearch={forgetSearch}
+              setQueryParam={setQueryParam}
+              tripRequests={loggedInUserTripRequests}
+              user={localUser}
+            />
+          )
+          : this._getLocalStorageOnlyContent()}
       </div>
     )
   }
@@ -237,7 +251,7 @@ class TripRequest extends Component {
         icon='clock-o'
         mainText={mainText}
         onClick={this._onSelect}
-        onDelete={canDelete && this._onForget}
+        onDelete={canDelete ? this._onForget : null}
       />
     )
   }

From 9661451fc7fb29c9346f31a35ceb73f1bdc7608f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 13 Oct 2021 18:21:56 -0400
Subject: [PATCH 056/270] refactor(FavoritePlaceList): Localize component and
 children.

---
 i18n/en-US.yml                                | 12 ++--
 i18n/fr-FR.yml                                | 12 ++--
 lib/components/user/back-to-trip-planner.js   |  3 +-
 .../user/places/favorite-place-list.js        | 67 ++++++++++++-------
 lib/components/user/places/place.js           | 40 +++++------
 5 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 3205d4b79..b23adf3a2 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -51,10 +51,10 @@ components:
     notifications: Notifications
     places: Favorite places
     terms: Terms
-  FavoritePlaceRow:
+  FavoritePlaceList:
     addAnotherPlace: Add another place
-    # deleteThisPlace and editThisPlace are aria/tooltip texts.
-    deleteThisPlace: Delete this place
+    description: "Add the places you frequent often to save time planning trips:"
+    # editThisPlace is a tooltip text.
     editThisPlace: Edit this place
     setAddressForPlaceType: Set your {placeType} address
   FavoritePlaceScreen:
@@ -66,8 +66,6 @@ components:
     nameAlreadyUsed: You are already using this name for another place. Please enter a different name.
     placeNotFound: Place not found
     placeNotFoundDescription: Sorry, the requested place was not found.
-  FavoritePlacesList:
-    description: Add the places you frequent often to save time planning trips:
   FormNavigationButtons:
     ariaLabel: Form navigation
   ItinerarySummary:
@@ -143,6 +141,10 @@ components:
       for a text message with a verification code, and enter the code below
       (code expires after 10 minutes)."
     verify: Verify
+  Place:
+    # deleteThisPlace is an aria/tooltip text.
+    deleteThisPlace: Delete this place
+    viewStop: View stop
   PlaceEditor:
     genericLocationPlaceholder: Search for location
     locationPlaceholder: Search for {placeName} location
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 2e8776eaa..37a79104b 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -35,10 +35,10 @@ components:
     notifications: Notifications
     places: Lieux favoris
     terms: Conditions d'utilisation
-  FavoritePlaceRow:
+  FavoritePlaceList:
     addAnotherPlace: Ajouter un autre lieu
-    # deleteThisPlace and editThisPlace are aria/tooltip texts.
-    deleteThisPlace: Supprimer ce lieu
+    description: "Ajoutez les lieux que vous fréquentez souvent pour faciliter vos recherches de trajets :"
+    # editThisPlace is a tooltip text.
     editThisPlace: Modifier ce lieu
     setAddressForPlaceType: Entrez l'adresse de votre {placeType}
   FavoritePlaceScreen:
@@ -50,8 +50,6 @@ components:
     nameAlreadyUsed: Ce nom est déjà utilisé avec un autre lieu. Veuillez saisir un nom différent.
     placeNotFound: Lieu introuvable
     placeNotFoundDescription: Le lieu recherché est introuvable.
-  FavoritePlacesList:
-    description: "Ajoutez les lieux que vous fréquentez souvent pour faciliter vos recherches de trajets :"
   FormNavigationButtons:
     ariaLabel: Navigation du formulaire
   ItinerarySummary:
@@ -129,6 +127,10 @@ components:
     verificationInstructions: "Un SMS vous a été envoyé avec un code de vérification.
       Veuillez taper ce code ci-dessous (le code expire après 10 minutes)."
     verify: Verifier
+  Place:
+    # deleteThisPlace is an aria/tooltip text.
+    deleteThisPlace: Supprimer ce lieu
+    viewStop: Voir cet arrêt
   PlaceEditor:
     genericLocationPlaceholder: Adresse du lieu
     locationPlaceholder: Adresse de votre {placeName}
diff --git a/lib/components/user/back-to-trip-planner.js b/lib/components/user/back-to-trip-planner.js
index 3139e4c7a..feb5bec1d 100644
--- a/lib/components/user/back-to-trip-planner.js
+++ b/lib/components/user/back-to-trip-planner.js
@@ -12,8 +12,7 @@ const StyledLinkWithQuery = styled(LinkWithQuery)`
 
 const BackToTripPlanner = () => (
   <StyledLinkWithQuery to={'/'}>
-    {/** FIXME: handle right-to-left languages */}
-    <IconWithMargin name='arrow-left' />
+    <IconWithMargin type='arrow-left' />
     <FormattedMessage id='components.BackToTripPlanner.backToTripPlanner' />
   </StyledLinkWithQuery>
 )
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index da6744740..d8fa3f650 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -1,43 +1,62 @@
+import coreUtils from '@opentripplanner/core-utils'
 import React from 'react'
 import { ControlLabel } from 'react-bootstrap'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { connect } from 'react-redux'
 
 import * as userActions from '../../../actions/user'
 import { UnpaddedList } from '../../form/styled'
 import { CREATE_ACCOUNT_PLACES_PATH } from '../../../util/constants'
-import { getPlaceBasePath } from '../../../util/user'
+import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
 
 import { FavoritePlace } from './styled'
 
+const { toSentenceCase } = coreUtils.itinerary
+
 /**
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
  */
-const FavoritePlaceList = ({ deleteUserPlace, isCreating, loggedInUser }) => (
-  <div>
-    <ControlLabel>Add the places you frequent often to save time planning trips:</ControlLabel>
-    <UnpaddedList>
-      {loggedInUser.savedLocations.map((place, index) => (
+const FavoritePlaceList = ({ deleteUserPlace, isCreating, loggedInUser }) => {
+  const intl = useIntl()
+  const basePath = getPlaceBasePath(isCreating)
+  return (
+    <div>
+      <ControlLabel>
+        <FormattedMessage id='components.FavoritePlaceList.description' />
+      </ControlLabel>
+      <UnpaddedList>
+        {loggedInUser.savedLocations.map((place, index) => (
+          <FavoritePlace
+            detailText={place.address || (
+              <FormattedMessage
+                id='components.FavoritePlaceList.setAddressForPlaceType'
+                values={{
+                  placeType: intl.formatMessage({ id: `common.places.${place.type}` })
+                }}
+              />
+            )}
+            icon={place.icon}
+            key={index}
+            // Use toSentenceCase (and not text-transform: capitalize)
+            // to change the first char. of the work and home locations only (which come in lowercase).
+            mainText={isHomeOrWork(place) ? toSentenceCase(place.name) : (place.name || place.address)}
+            onDelete={() => deleteUserPlace(place)}
+            path={`${basePath}/${index}`}
+            title={intl.formatMessage({ id: 'components.FavoritePlaceList.editThisPlace' })}
+          />
+        ))}
+
         <FavoritePlace
-          detailText={place.address || `Set your ${place.type || 'other'} address`}
-          icon={place.icon}
-          key={index}
-          mainText={place.name || place.address}
-          onDelete={() => deleteUserPlace(place)}
-          path={`${getPlaceBasePath(isCreating)}/${index}`}
-          title={'Edit this place'}
+          icon='plus'
+          mainText={<FormattedMessage id='components.FavoritePlaceList.addAnotherPlace' />}
+          path={`${basePath}/new`}
+          title={''}
         />
-      ))}
-
-      <FavoritePlace
-        icon='plus'
-        mainText='Add another place'
-        path={`${getPlaceBasePath(isCreating)}/new`}
-        title={''}
-      />
-    </UnpaddedList>
-  </div>
-)
+      </UnpaddedList>
+    </div>
+  )
+}
 
 // connect to the redux store
 
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 7f8234581..c8a897bd8 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Button } from 'react-bootstrap'
+import { useIntl } from 'react-intl'
 import styled from 'styled-components'
 
 import { LinkContainerWithQuery } from '../../form/connected-links'
-import Icon from '../../util/icon'
+import BaseIcon from '../../util/icon'
 
 const Container = styled.li`
   align-items: stretch;
@@ -22,13 +23,11 @@ export const PlaceDetail = styled.span``
 
 export const PlaceContent = styled.span``
 
-export const PlaceName = styled.span`
-  text-transform: capitalize;
-`
+export const PlaceName = styled.span``
 
-export const PlaceText = styled.span`
-  text-transform: capitalize;
-`
+export const PlaceText = styled.span``
+
+export const Icon = styled(BaseIcon)``
 
 export const ActionButton = styled(Button)`
   background: none;
@@ -37,9 +36,6 @@ export const ActionButton = styled(Button)`
 
 export const ActionButtonPlaceholder = styled.span``
 
-const VIEW_LABEL = 'View stop' // used for stops only.
-const DELETE_LABEL = 'Delete place'
-
 /**
  * Renders a stylable clickable button for editing/selecting a user's favorite place,
  * and buttons for viewing and deleting the place if corresponding handlers are provided.
@@ -56,6 +52,9 @@ const Place = ({
   path,
   title = `${mainText}${detailText && ` (${detailText})`}`
 }) => {
+  const intl = useIntl()
+  const viewStopLabel = intl.formatMessage({ id: 'components.Place.viewStop' })
+  const deletePlaceLabel = intl.formatMessage({ id: 'components.Place.deleteThisPlace' })
   const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
   return (
@@ -69,10 +68,10 @@ const Place = ({
           onClick={onClick}
           title={title}
         >
-          {largeIcon && <Icon name={icon} size='2x' />}
+          {largeIcon && <Icon size='2x' type={icon} />}
           <PlaceContent>
             <PlaceText className='place-text'>
-              {!largeIcon && <Icon name={icon} />}
+              {!largeIcon && <Icon type={icon} />}
               <PlaceName>{mainText}</PlaceName>
             </PlaceText>
             <PlaceDetail className='place-detail'>
@@ -85,21 +84,22 @@ const Place = ({
       {/* Action buttons. If none, render a placeholder. */}
       {!onView && !onDelete && <ActionButtonPlaceholder />}
       {onView && (
+        // This button is only used for viewing stops.
         <ActionButton
-          aria-label={VIEW_LABEL}
+          aria-label={viewStopLabel}
           onClick={onView}
-          title={VIEW_LABEL}
+          title={viewStopLabel}
         >
-          <Icon name='search' size={iconSize} />
+          <Icon size={iconSize} type='search' />
         </ActionButton>
       )}
       {onDelete && (
         <ActionButton
-          aria-label={DELETE_LABEL}
+          aria-label={deletePlaceLabel}
           onClick={onDelete}
-          title={DELETE_LABEL}
+          title={deletePlaceLabel}
         >
-          <Icon name='trash-o' size={iconSize} />
+          <Icon size={iconSize} type='trash-o' />
         </ActionButton>
       )}
     </Container>
@@ -108,13 +108,13 @@ const Place = ({
 
 Place.propTypes = {
   /** The detail text displayed for the place */
-  detailText: PropTypes.string,
+  detailText: PropTypes.node,
   /** The font-awesome icon name for the place. */
   icon: PropTypes.string,
   /** Whether to render icons large. */
   largeIcon: PropTypes.bool,
   /** The displayed name for the place. */
-  mainText: PropTypes.string,
+  mainText: PropTypes.node,
   /** Called when the "main" button is clicked. Takes precedence over the path prop. */
   onClick: PropTypes.func,
   /** Determines whether the Delete button is shown. Called when the Delete button is clicked. */

From 44f4c337742a59a3acb49fab2bca85a48db63ce7 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 29 Nov 2021 15:21:24 +0000
Subject: [PATCH 057/270] feat(api): fetch route information from OTP-2
 instance

---
 lib/actions/api.js                            | 429 +++++++++++++-----
 lib/components/map/connected-stops-overlay.js |   7 +-
 2 files changed, 318 insertions(+), 118 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index d076d5a9b..c33d7cbb1 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -644,6 +644,9 @@ export function findRoutes(params) {
     findRoutesResponse,
     findRoutesError,
     {
+      postprocess: (payload, dispatch) => {
+        return dispatch(findRoutesV2())
+      },
       rewritePayload: (payload) => {
         const routes = {}
         payload.forEach((rte) => {
@@ -656,6 +659,66 @@ export function findRoutes(params) {
   )
 }
 
+export function findRoutesV2() {
+  return createGraphQLQueryAction(
+    `{ 
+      routes {
+        gtfsId
+        shortName
+        longName
+        mode
+        color
+        agency {
+          name
+          gtfsId
+        }
+      } 
+    }`,
+    {},
+    findRoutesResponse,
+    findRoutesError,
+    {
+      noThrottle: true,
+      // Rewrite to match OTP-1 response object
+      // If OTP-1 is removed, this can probably be removed as well
+      rewritePayload: (payload, dispatch, getState) => {
+        const existingRouteIds = new Map()
+        const state = getState()
+        Object.keys(state?.otp?.transitIndex?.routes).forEach((routeId) => {
+          // Strip out the agency part of the route ID which can sometimes differ
+          let strippedRouteId = routeId.split(':')
+          strippedRouteId = strippedRouteId[strippedRouteId.length - 1]
+
+          existingRouteIds.set(strippedRouteId, true)
+        })
+
+        const routes = {}
+        payload?.data?.routes?.forEach((rte) => {
+          // Strip out the agency part of the route ID which can sometimes differ
+          let strippedRouteId = rte.gtfsId.split(':')
+          strippedRouteId = strippedRouteId[strippedRouteId.length - 1]
+          if (existingRouteIds.get(strippedRouteId)) {
+            return
+          }
+
+          rte.agencyName = rte.agency.name
+          // OTP-2 includes the feed ID in the agency ID. Stripping it
+          // matches OTP-1 behavior
+          rte.agencyId = rte.agency.gtfsId.split(':')[0]
+          rte.id = rte.gtfsId
+
+          // Mark this route as a v2 route so that future requests relating to it
+          // will be made to the v2 endpoint
+          rte.v2 = true
+
+          routes[rte.gtfsId] = rte
+        })
+        return routes
+      },
+      serviceId: 'routes'
+    }
+  )
+}
 // Patterns for Route lookup query
 // TODO: replace with GraphQL query for route => patterns => geometry
 const findPatternsForRouteResponse = createAction(
@@ -669,57 +732,163 @@ export const findRouteResponse = createAction('FIND_ROUTE_RESPONSE')
 export const findRouteError = createAction('FIND_ROUTE_ERROR')
 
 export function findRoute(params) {
-  return createQueryAction(
-    `index/routes/${params.routeId}`,
-    findRouteResponse,
-    findRouteError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        // load patterns
-        dispatch(findPatternsForRoute({ routeId: params.routeId }))
-      }
+  return async function (dispatch, getState) {
+    const state = getState()
+    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
+    // This can sometimes result in extra requests, but given that requests are
+    // already being sprayed, this is a safe and clean solution for now
+    if (!route) {
+      await dispatch(findRoutes())
     }
-  )
-}
 
-export function findPatternsForRoute(params) {
-  return createQueryAction(
-    `index/routes/${params.routeId}/patterns?includeGeometry=true`,
-    findPatternsForRouteResponse,
-    findPatternsForRouteError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        // load geometry for each pattern
-        payload.forEach((ptn) => {
-          // Some OTP instances don't support includeGeometry.
-          // We need to manually fetch geometry in these cases.
-          if (!ptn.geometry) {
-            dispatch(
-              findGeometryForPattern({
-                patternId: ptn.id,
-                routeId: params.routeId
-              })
-            )
+    if (route?.v2) {
+      return dispatch(
+        createGraphQLQueryAction(
+          // TODO: cleanup stops query
+          `{
+            route(id: "${route.gtfsId}") {
+              gtfsId
+              desc
+              agency {
+                gtfsId
+                name
+                url
+                timezone
+                lang
+                phone
+              }
+              longName
+              type
+              color
+              textColor
+              bikesAllowed
+          
+              patterns {
+                id
+                name
+                patternGeometry {
+                  points
+                  length
+                }
+
+                stops {
+                  code
+                  id
+                  lat
+                  lon
+                  name
+                  locationType
+                  geometries {
+                    geoJson
+                    polylines {
+                      points
+                      length
+                    }
+                  }
+                }
+              }
+            }
           }
-        })
-      },
+          `,
+          {},
+          findRouteResponse,
+          findRouteError,
+          {
+            noThrottle: true,
+            rewritePayload: (payload) => {
+              const { route } = payload.data
+              // Re-write query to achieve otp-v1 compatibility
+              route.id = route.gtfsId
+              route.agency.id = route.agency.gtfsId
+              route.routeBikesAllowed = route.bikesAllowed
+              // Ensure this isn't overwritten
+              route.v2 = true
+
+              const routePatterns = {}
+              route.patterns.forEach((pattern) => {
+                routePatterns[pattern.id] = {
+                  ...pattern,
+                  desc: pattern.name,
+                  geometry: pattern.patternGeometry
+                }
+              })
+              route.patterns = routePatterns
 
-      rewritePayload: (payload) => {
-        // convert pattern array to ID-mapped object
-        const patterns = {}
-        payload.forEach((ptn) => {
-          patterns[ptn.id] = ptn
-        })
+              return route
+            }
+          }
+        )
+      )
+    }
 
-        return {
-          patterns,
-          routeId: params.routeId
+    return dispatch(
+      createQueryAction(
+        `index/routes/${params.routeId}`,
+        findRouteResponse,
+        findRouteError,
+        {
+          noThrottle: true,
+          postprocess: (payload, dispatch) => {
+            // load patterns
+            dispatch(findPatternsForRoute({ routeId: params.routeId }))
+          }
         }
+      )
+    )
+  }
+}
+
+export function findPatternsForRoute(params) {
+  return function (dispatch, getState) {
+    const state = getState()
+    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
+    // If a route was fetched from GraphQL, it already has patterns
+    if (route && route.v2) {
+      if (!route.patterns) {
+        return dispatch(findRoute(params))
       }
+      return
     }
-  )
+
+    return dispatch(
+      createQueryAction(
+        `index/routes/${params.routeId}/patterns?includeGeometry=true`,
+        findPatternsForRouteResponse,
+        findPatternsForRouteError,
+        {
+          noThrottle: true,
+          postprocess: (payload, dispatch) => {
+            // load geometry for each pattern
+            payload.forEach((ptn) => {
+              // Some OTP instances don't support includeGeometry.
+              // We need to manually fetch geometry in these cases.
+              if (!ptn.geometry) {
+                dispatch(
+                  findGeometryForPattern({
+                    patternId: ptn.id,
+                    routeId: params.routeId
+                  })
+                )
+              }
+            })
+          },
+
+          rewritePayload: (payload) => {
+            // convert pattern array to ID-mapped object
+            const patterns = {}
+            payload.forEach((ptn) => {
+              patterns[ptn.id] = ptn
+            })
+
+            return {
+              patterns,
+              routeId: params.routeId
+            }
+          }
+        }
+      )
+    )
+  }
 }
 
 // Geometry for Pattern lookup query
@@ -732,20 +901,31 @@ const findGeometryForPatternError = createAction(
 )
 
 export function findGeometryForPattern(params) {
-  return createQueryAction(
-    `index/patterns/${params.patternId}/geometry`,
-    findGeometryForPatternResponse,
-    findGeometryForPatternError,
-    {
-      rewritePayload: (payload) => {
-        return {
-          geometry: payload,
-          patternId: params.patternId,
-          routeId: params.routeId
-        }
-      }
+  return function (dispatch, getState) {
+    const state = getState()
+    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
+    // If a route was fetched from GraphQL, it already has geometry
+    if (route && route.v2) {
+      return
     }
-  )
+
+    return dispatch(
+      createQueryAction(
+        `index/patterns/${params.patternId}/geometry`,
+        findGeometryForPatternResponse,
+        findGeometryForPatternError,
+        {
+          rewritePayload: (payload) => {
+            return {
+              geometry: payload,
+              patternId: params.patternId,
+              routeId: params.routeId
+            }
+          }
+        }
+      )
+    )
+  }
 }
 
 // Stops for pattern query
@@ -758,21 +938,31 @@ export const findStopsForPatternError = createAction(
 )
 
 export function findStopsForPattern(params) {
-  return createQueryAction(
-    `index/patterns/${params.patternId}/stops`,
-    findStopsForPatternResponse,
-    findStopsForPatternError,
-    {
-      noThrottle: true,
-      rewritePayload: (payload) => {
-        return {
-          patternId: params.patternId,
-          routeId: params.routeId,
-          stops: payload
-        }
-      }
+  return function (dispatch, getState) {
+    const state = getState()
+    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
+    // If a route was fetched from GraphQL, it already has patterns
+    if (route && route.v2) {
+      return
     }
-  )
+    return dispatch(
+      createQueryAction(
+        `index/patterns/${params.patternId}/stops`,
+        findStopsForPatternResponse,
+        findStopsForPatternError,
+        {
+          noThrottle: true,
+          rewritePayload: (payload) => {
+            return {
+              patternId: params.patternId,
+              routeId: params.routeId,
+              stops: payload
+            }
+          }
+        }
+      )
+    )
+  }
 }
 
 // TNC ETA estimate lookup query
@@ -924,19 +1114,29 @@ const receivedVehiclePositionsError = createAction(
 )
 
 export function getVehiclePositionsForRoute(routeId) {
-  return createQueryAction(
-    `index/routes/${routeId}/vehicles`,
-    receivedVehiclePositions,
-    receivedVehiclePositionsError,
-    {
-      rewritePayload: (payload) => {
-        return {
-          routeId: routeId,
-          vehicles: payload
-        }
-      }
+  return function (dispatch, getState) {
+    const state = getState()
+    const route = state?.otp?.transitIndex?.routes?.[routeId]
+    // If a route was fetched from GraphQL, it doens't support realtime vehicle positions
+    if (route && route.v2) {
+      return
     }
-  )
+    return dispatch(
+      createQueryAction(
+        `index/routes/${routeId}/vehicles`,
+        receivedVehiclePositions,
+        receivedVehiclePositionsError,
+        {
+          rewritePayload: (payload) => {
+            return {
+              routeId: routeId,
+              vehicles: payload
+            }
+          }
+        }
+      )
+    )
+  }
 }
 
 const throttledUrls = {}
@@ -1006,20 +1206,7 @@ function createQueryAction(
   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
@@ -1029,7 +1216,10 @@ function createQueryAction(
 
     let payload
     try {
-      const response = await fetch(url, getOtpFetchOptions(state))
+      const response = await fetch(url, {
+        ...getOtpFetchOptions(state),
+        ...options.fetchOptions
+      })
       if (response.status >= 400) {
         // If a second endpoint is configured, try that before failing
         if (!!config.api_v2 && !options.v2) {
@@ -1050,7 +1240,9 @@ function createQueryAction(
     }
 
     if (typeof options.rewritePayload === 'function') {
-      dispatch(responseAction(options.rewritePayload(payload)))
+      dispatch(
+        responseAction(options.rewritePayload(payload, dispatch, getState))
+      )
     } else {
       dispatch(responseAction(payload))
     }
@@ -1085,24 +1277,29 @@ function makeApiUrl(config, endpoint, options) {
   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
-// GraphQL queries could introduce potential difficulties for maintainers.
-// function createGraphQLQueryAction (query, variables, responseAction, errorAction, options) {
-//   const endpoint = `index/graphql`
-//   const fetchOptions = {
-//     method: 'POST',
-//     body: JSON.stringify({ query, variables }),
-//     headers: { 'Content-Type': 'application/json' }
-//   }
-//   return createQueryAction(
-//     endpoint,
-//     responseAction,
-//     errorAction,
-//     { ...options, fetchOptions }
-//   )
-// }
+/**
+ * Generic helper for crafting GraphQL queries.
+ */
+function createGraphQLQueryAction(
+  query,
+  variables,
+  responseAction,
+  errorAction,
+  options
+) {
+  const endpoint = 'index/graphql'
+  const fetchOptions = {
+    body: JSON.stringify({ query, variables }),
+    headers: { 'Content-Type': 'application/json' },
+    method: 'POST'
+  }
+  return createQueryAction(endpoint, responseAction, errorAction, {
+    ...options,
+    fetchOptions,
+    // For now, all GraphQL requests are OTP-V2
+    v2: true
+  })
+}
 
 /**
  * Update the browser/URL history with new parameters
diff --git a/lib/components/map/connected-stops-overlay.js b/lib/components/map/connected-stops-overlay.js
index 643f08c7c..30e89e3f1 100644
--- a/lib/components/map/connected-stops-overlay.js
+++ b/lib/components/map/connected-stops-overlay.js
@@ -1,5 +1,5 @@
-import StopsOverlay from '@opentripplanner/stops-overlay'
 import { connect } from 'react-redux'
+import StopsOverlay from '@opentripplanner/stops-overlay'
 
 import { findStopsWithinBBox } from '../../actions/api'
 
@@ -15,7 +15,10 @@ const mapStateToProps = (state, ownProps) => {
 
   // If a pattern is being shown, show only the pattern's stops and show them large
   if (viewedRoute?.patternId && state.otp.transitIndex.routes) {
-    stops = state.otp.transitIndex.routes[viewedRoute.routeId]?.patterns?.[viewedRoute.patternId].stops
+    stops =
+      state.otp.transitIndex.routes[viewedRoute.routeId]?.patterns?.[
+        viewedRoute.patternId
+      ]?.stops
     minZoom = 2
   }
 

From d57202b84ef79958d2ab1fa22509a99706d46801 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 29 Nov 2021 18:27:04 +0000
Subject: [PATCH 058/270] refactor(api): move otp-1 query rewrite to graphql
 call

---
 lib/actions/api.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index c33d7cbb1..3e93f9cd6 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -663,7 +663,7 @@ export function findRoutesV2() {
   return createGraphQLQueryAction(
     `{ 
       routes {
-        gtfsId
+        id: gtfsId
         shortName
         longName
         mode
@@ -695,7 +695,7 @@ export function findRoutesV2() {
         const routes = {}
         payload?.data?.routes?.forEach((rte) => {
           // Strip out the agency part of the route ID which can sometimes differ
-          let strippedRouteId = rte.gtfsId.split(':')
+          let strippedRouteId = rte.id.split(':')
           strippedRouteId = strippedRouteId[strippedRouteId.length - 1]
           if (existingRouteIds.get(strippedRouteId)) {
             return
@@ -705,13 +705,12 @@ export function findRoutesV2() {
           // OTP-2 includes the feed ID in the agency ID. Stripping it
           // matches OTP-1 behavior
           rte.agencyId = rte.agency.gtfsId.split(':')[0]
-          rte.id = rte.gtfsId
 
           // Mark this route as a v2 route so that future requests relating to it
           // will be made to the v2 endpoint
           rte.v2 = true
 
-          routes[rte.gtfsId] = rte
+          routes[rte.id] = rte
         })
         return routes
       },
@@ -746,11 +745,11 @@ export function findRoute(params) {
         createGraphQLQueryAction(
           // TODO: cleanup stops query
           `{
-            route(id: "${route.gtfsId}") {
-              gtfsId
+            route(id: "${route.id}") {
+              id: gtfsId
               desc
               agency {
-                gtfsId
+                id: gtfsId
                 name
                 url
                 timezone
@@ -762,6 +761,7 @@ export function findRoute(params) {
               color
               textColor
               bikesAllowed
+              routeBikesAllowed: bikesAllowed
           
               patterns {
                 id
@@ -773,7 +773,7 @@ export function findRoute(params) {
 
                 stops {
                   code
-                  id
+                  id: gtfsId
                   lat
                   lon
                   name
@@ -797,10 +797,6 @@ export function findRoute(params) {
             noThrottle: true,
             rewritePayload: (payload) => {
               const { route } = payload.data
-              // Re-write query to achieve otp-v1 compatibility
-              route.id = route.gtfsId
-              route.agency.id = route.agency.gtfsId
-              route.routeBikesAllowed = route.bikesAllowed
               // Ensure this isn't overwritten
               route.v2 = true
 

From 105307c5c77318f38c64d562b80419dbe19d4a1a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 29 Nov 2021 18:45:44 +0000
Subject: [PATCH 059/270] refactor(flex-indicator): avoid phone number getting
 cut off

---
 lib/components/narrative/default/flex-indicator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/narrative/default/flex-indicator.tsx b/lib/components/narrative/default/flex-indicator.tsx
index 678495990..eed787cf6 100644
--- a/lib/components/narrative/default/flex-indicator.tsx
+++ b/lib/components/narrative/default/flex-indicator.tsx
@@ -67,7 +67,7 @@ const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
     grid-column: 3 / span 2;
     grid-row: 2;
     text-overflow: ellipsis;
-    overflow-y: hidden;
+    overflow-y: clip;
   }
 
   /* Barber pole at left */

From 3b8ef6461bd0fbc955c402d87b4bb29d15a9ab89 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 30 Nov 2021 15:26:23 +0000
Subject: [PATCH 060/270] refactor(stop-viewer): support flex stops

---
 i18n/en-US.yml                        |  1 +
 lib/actions/api.js                    | 40 +++++++++++++++++++++++++++
 lib/components/viewers/stop-viewer.js |  5 ++++
 3 files changed, 46 insertions(+)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 913b8de83..3302d3c95 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -436,6 +436,7 @@ components:
   StopViewer:
     displayStopId: "<strong>Stop ID</strong>: {stopId}"
     header: Stop Viewer
+    flexStop: This is a flex stop. Vehicles will drop off and pick up passengers in this flexible zone by request. You may have to call ahead for service in this area.
     loadingText: Loading Stop...
     noStopsFound: No stop times found for date.
     planTrip: "Plan a trip:"
diff --git a/lib/actions/api.js b/lib/actions/api.js
index 3e93f9cd6..2fc2cad7d 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -421,6 +421,39 @@ export function fetchStopInfo(stop) {
     }
   }
 }
+export function fetchGraphQLOnlyStopInfo(stopId) {
+  if (!stopId) return
+  return createGraphQLQueryAction(
+    `{
+      stop(id: "${stopId}") {
+        id: gtfsId
+        lat
+        lon
+        locationType
+        name
+        wheelchairBoarding
+        zoneId
+        geometries {
+          geoJson
+          polylines {
+            points
+            length
+          }
+        }
+      }
+    }
+  `,
+    {},
+    findStopResponse,
+    findStopError,
+    {
+      noThrottle: true,
+      rewritePayload: (payload) => {
+        return payload.data.stop
+      }
+    }
+  )
+}
 
 export const findNearbyAmenitiesResponse = createAction(
   'FIND_NEARBY_AMENITIES_RESPONSE'
@@ -621,6 +654,13 @@ export function findStopTimesForStop(params) {
         findStopTimesForStopError,
         {
           noThrottle: true,
+          postprocess: (payload, dispatch) => {
+            // if the payload doesn't contain any stoptimes but does contain routes,
+            // try grabbing stop data from graphql
+            if (payload.length === 0) {
+              dispatch(fetchGraphQLOnlyStopInfo(stopId))
+            }
+          },
           rewritePayload: (stopTimes) => {
             return {
               stopId,
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 82311d312..9d01f0adc 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -285,6 +285,11 @@ class StopViewer extends Component {
           <FormattedMessage id="components.StopViewer.noStopsFound" />
         </div>
       )
+      // If geometries are available and stop times are not, it is a strong indication
+      // that the stop is a flex stop.
+      if (stopData?.geometries) {
+        contents = (<div><FormattedMessage id="components.StopViewer.flexStop" /></div>)
+      }
     } else if (scheduleView) {
       contents = (
         <StopScheduleTable

From 50cd28980eecfe2afa7bc7d21a68f18e667a52ab Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 1 Dec 2021 11:47:28 +0000
Subject: [PATCH 061/270] refactor(actions/api): include main route color in
 graphql stop response

---
 lib/actions/api.js | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 2fc2cad7d..b468c16a7 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -16,6 +16,7 @@ import { getStopViewerConfig, queryIsValid } from '../util/state'
 
 import { ItineraryView, setItineraryView } from './ui'
 import { rememberPlace, zoomToStop } from './map'
+import { setMapZoom } from './config'
 
 if (typeof fetch === 'undefined') require('isomorphic-fetch')
 
@@ -435,10 +436,9 @@ export function fetchGraphQLOnlyStopInfo(stopId) {
         zoneId
         geometries {
           geoJson
-          polylines {
-            points
-            length
-          }
+        }
+        routes {
+          color
         }
       }
     }
@@ -448,8 +448,15 @@ export function fetchGraphQLOnlyStopInfo(stopId) {
     findStopError,
     {
       noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        if (payload?.data?.stop?.geometries) {
+          dispatch(setMapZoom(10))
+        }
+      },
       rewritePayload: (payload) => {
-        return payload.data.stop
+        const { stop } = payload.data
+        const color = stop.routes?.length > 0 && `#${stop.routes[0].color}`
+        return { ...stop, color }
       }
     }
   )
@@ -783,7 +790,6 @@ export function findRoute(params) {
     if (route?.v2) {
       return dispatch(
         createGraphQLQueryAction(
-          // TODO: cleanup stops query
           `{
             route(id: "${route.id}") {
               id: gtfsId
@@ -820,10 +826,9 @@ export function findRoute(params) {
                   locationType
                   geometries {
                     geoJson
-                    polylines {
-                      points
-                      length
-                    }
+                  }
+                  routes {
+                    color
                   }
                 }
               }
@@ -842,6 +847,12 @@ export function findRoute(params) {
 
               const routePatterns = {}
               route.patterns.forEach((pattern) => {
+                pattern.stops = pattern.stops.map((stop) => {
+                  const color =
+                    stop.routes?.length > 0 && `#${stop.routes[0].color}`
+                  if (stop.routes) delete stop.routes
+                  return { ...stop, color }
+                })
                 routePatterns[pattern.id] = {
                   ...pattern,
                   desc: pattern.name,

From e8baf73da879e63ca1a0bff5e5960b69d6bfeb63 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 2 Dec 2021 12:04:27 +0000
Subject: [PATCH 062/270] chore(reducers/create-otp-reducer): run autoformatter

---
 lib/reducers/create-otp-reducer.js | 324 +++++++++++++++++------------
 1 file changed, 190 insertions(+), 134 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 914a05a2e..5dfd53c7e 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -1,22 +1,20 @@
+/* eslint-disable no-case-declarations */
 import clone from 'clone'
-import update from 'immutability-helper'
+import coreUtils from '@opentripplanner/core-utils'
 import isEqual from 'lodash.isequal'
 import objectPath from 'object-path'
-import coreUtils from '@opentripplanner/core-utils'
+import update from 'immutability-helper'
 
+import { FETCH_STATUS } from '../util/constants'
+import { getTimestamp } from '../util/state'
+import { isBatchRoutingEnabled } from '../util/itinerary'
 import { MainPanelContent, MobileScreens } from '../actions/ui'
-import {FETCH_STATUS} from '../util/constants'
-import {getTimestamp} from '../util/state'
-import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { getTransitModes, isTransit } = coreUtils.itinerary
 const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
-const {
-  ensureSingleAccessMode,
-  getDefaultQuery,
-  getTripOptionsFromQuery
-} = coreUtils.query
+const { ensureSingleAccessMode, getDefaultQuery, getTripOptionsFromQuery } =
+  coreUtils.query
 const { getItem, removeItem, storeItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
@@ -31,8 +29,8 @@ const MAX_RECENT_STORAGE = 5
  * TODO: maybe it's a better idea to move all of this to a script that can do
  *  JSON Schema validation and other stuff.
  */
-function validateInitialState (initialState) {
-  const {config} = initialState
+function validateInitialState(initialState) {
+  const { config } = initialState
 
   const errors = []
 
@@ -45,17 +43,18 @@ function validateInitialState (initialState) {
     objectPath.get(config, 'persistence.strategy') === 'localStorage' &&
     objectPath.get(config, 'geocoder.type') === 'ARCGIS'
   ) {
-    errors.push(new Error('Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'))
+    errors.push(
+      new Error(
+        'Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'
+      )
+    )
   }
 
   if (errors.length > 0) {
     throw new Error(
-      errors.reduce(
-        (message, error) => {
-          return `${message}\n- ${error.message}`
-        },
-        'Encountered the following configuration errors:'
-      )
+      errors.reduce((message, error) => {
+        return `${message}\n- ${error.message}`
+      }, 'Encountered the following configuration errors:')
     )
   }
 }
@@ -64,7 +63,7 @@ function validateInitialState (initialState) {
  * Create the initial state of otp-react-redux using user-provided config, any
  * items in localStorage and a few defaults.
  */
-export function getInitialState (userDefinedConfig) {
+export function getInitialState(userDefinedConfig) {
   const defaultConfig = {
     autoPlan: {
       default: 'ONE_LOCATION_CHANGED',
@@ -131,14 +130,16 @@ export function getInitialState (userDefinedConfig) {
   // Recent trip plan searches (excluding time/date parameters to avoid complexity).
   const recentSearches = getItem('recentSearches', [])
   // Filter valid locations found into locations list.
-  const locations = [home, work].filter(p => p)
+  const locations = [home, work].filter((p) => p)
   // TODO: parse and merge URL query params w/ default query
 
   // populate query by merging any provided query params w/ the default params
   const currentQuery = Object.assign(defaults, userDefinedConfig.initialQuery)
   // Add configurable locations to home and work locations
   if (config.locations) {
-    locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
+    locations.push(
+      ...config.locations.map((l) => ({ ...l, type: 'suggested' }))
+    )
   }
   // Check for alternative routerId in session storage. This is generally used
   // for testing single GTFS feed OTP graphs that are deployed to feed-specific
@@ -159,7 +160,7 @@ export function getInitialState (userDefinedConfig) {
   // If 'TRANSIT' is included in the mode list, replace it with individual modes
   if (queryModes.includes('TRANSIT')) {
     // Isolate the non-transit modes in queryModes
-    queryModes = queryModes.filter(m => !isTransit(m))
+    queryModes = queryModes.filter((m) => !isTransit(m))
     // Add all possible transit modes
     queryModes = queryModes.concat(getTransitModes(config))
     // Stringify and set as OTP 'mode' query param
@@ -256,7 +257,7 @@ export function getInitialState (userDefinedConfig) {
   }
 }
 
-function createOtpReducer (config) {
+function createOtpReducer(config) {
   const initialState = getInitialState(config)
   // validate the initial state
   validateInitialState(initialState)
@@ -268,35 +269,32 @@ function createOtpReducer (config) {
     const activeSearch = state.searches[searchId]
     switch (action.type) {
       case 'ROUTING_REQUEST':
-        const {
-          activeItinerary,
-          pending,
-          updateSearchInReducer
-        } = action.payload
+        const { activeItinerary, pending, updateSearchInReducer } =
+          action.payload
         const searchUpdate = updateSearchInReducer
           ? {
-            activeItinerary: { $set: activeItinerary },
-            activeLeg: { $set: null },
-            activeStep: { $set: null },
-            pending: { $set: pending },
-            // FIXME: get query from action payload?
-            query: { $set: clone(state.currentQuery) },
-            // omit requests reset to make sure requests can be added to this
-            // search
-            timestamp: { $set: getTimestamp() }
-          }
-          : {
-            $set: {
-              activeItinerary,
-              activeLeg: null,
-              activeStep: null,
-              pending,
+              activeItinerary: { $set: activeItinerary },
+              activeLeg: { $set: null },
+              activeStep: { $set: null },
+              pending: { $set: pending },
               // FIXME: get query from action payload?
-              query: clone(state.currentQuery),
-              response: [],
-              timestamp: getTimestamp()
+              query: { $set: clone(state.currentQuery) },
+              // omit requests reset to make sure requests can be added to this
+              // search
+              timestamp: { $set: getTimestamp() }
+            }
+          : {
+              $set: {
+                activeItinerary,
+                activeLeg: null,
+                activeStep: null,
+                pending,
+                // FIXME: get query from action payload?
+                query: clone(state.currentQuery),
+                response: [],
+                timestamp: getTimestamp()
+              }
             }
-          }
         return update(state, {
           activeSearchId: { $set: searchId },
           searches: { [searchId]: searchUpdate }
@@ -307,19 +305,22 @@ function createOtpReducer (config) {
             [searchId]: {
               pending: { $set: activeSearch.pending - 1 },
               response: {
-                $push: [{
-                  error: action.payload.error,
-                  requestId,
-                  url: action.payload.url
-                }]
+                $push: [
+                  {
+                    error: action.payload.error,
+                    requestId,
+                    url: action.payload.url
+                  }
+                ]
               }
             }
           }
         })
       case 'ROUTING_RESPONSE':
-        const response = (state.currentQuery.routingType === 'PROFILE')
-          ? filterProfileOptions(action.payload.response)
-          : action.payload.response
+        const response =
+          state.currentQuery.routingType === 'PROFILE'
+            ? filterProfileOptions(action.payload.response)
+            : action.payload.response
         response.requestId = requestId
         return update(state, {
           searches: {
@@ -350,8 +351,8 @@ function createOtpReducer (config) {
         })
       case 'SET_ACTIVE_ITINERARIES':
         const responseUpdate = {}
-        Object.entries(action.payload.assignedItinerariesByResponse)
-          .forEach(([ responseIdx, responsePlanItineraries ]) => {
+        Object.entries(action.payload.assignedItinerariesByResponse).forEach(
+          ([responseIdx, responsePlanItineraries]) => {
             responseUpdate[responseIdx] = {
               plan: {
                 itineraries: {
@@ -359,7 +360,8 @@ function createOtpReducer (config) {
                 }
               }
             }
-          })
+          }
+        )
         return update(state, {
           searches: {
             [searchId]: {
@@ -532,18 +534,26 @@ function createOtpReducer (config) {
         if (action.payload.indexOf('recent') !== -1) {
           const recentPlaces = clone(state.user.recentPlaces)
           // Remove recent from list of recent places
-          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
+          const removeIndex = recentPlaces.findIndex(
+            (l) => l.id === action.payload
+          )
           recentPlaces.splice(removeIndex, 1)
           storeItem('recent', recentPlaces)
           return removeIndex !== -1
-            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { recentPlaces: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         } else {
           const locations = clone(state.user.locations)
-          const removeIndex = locations.findIndex(l => l.id === action.payload)
+          const removeIndex = locations.findIndex(
+            (l) => l.id === action.payload
+          )
           removeItem(action.payload)
           return removeIndex !== -1
-            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { locations: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         }
       }
@@ -552,23 +562,29 @@ function createOtpReducer (config) {
         switch (type) {
           case 'recent': {
             const recentPlaces = clone(state.user.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            const index = recentPlaces.findIndex((l) =>
+              matchLatLon(l, location)
+            )
             // Replace recent place if duplicate found or add to list.
             if (index !== -1) recentPlaces.splice(index, 1, location)
             else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            const sortedPlaces = recentPlaces.sort(
+              (a, b) => b.timestamp - a.timestamp
+            )
             // Only keep up to 5 recent locations
             // FIXME: Check for duplicates
             if (recentPlaces.length >= MAX_RECENT_STORAGE) {
               sortedPlaces.splice(MAX_RECENT_STORAGE)
             }
             storeItem('recent', recentPlaces)
-            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
+            return update(state, {
+              user: { recentPlaces: { $set: sortedPlaces } }
+            })
           }
           default: {
             const locations = clone(state.user.locations)
             // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
+            const index = locations.findIndex((l) => l.type === type)
             if (index !== -1) locations.splice(index, 1, location)
             else locations.push(location)
             storeItem(type, location)
@@ -580,11 +596,15 @@ function createOtpReducer (config) {
         // Payload is the stop ID.
         const favoriteStops = clone(state.user.favoriteStops)
         // Remove stop from favorites
-        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
+        const removeIndex = favoriteStops.findIndex(
+          (l) => l.id === action.payload
+        )
         favoriteStops.splice(removeIndex, 1)
         storeItem('favoriteStops', favoriteStops)
         return removeIndex !== -1
-          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
+          ? update(state, {
+              user: { favoriteStops: { $splice: [[removeIndex, 1]] } }
+            })
           : state
       }
       case 'REMEMBER_STOP': {
@@ -601,10 +621,12 @@ function createOtpReducer (config) {
         }
         const favoriteStops = clone(state.user.favoriteStops)
         if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          window.alert(
+            `Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`
+          )
           return state
         }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        const index = favoriteStops.findIndex((s) => s.id === stop.id)
         // Do nothing if duplicate stop found.
         if (index !== -1) {
           console.warn(`Stop with id ${stop.id} already exists in favorites.`)
@@ -613,15 +635,19 @@ function createOtpReducer (config) {
           favoriteStops.unshift(stop)
         }
         storeItem('favoriteStops', favoriteStops)
-        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
+        return update(state, {
+          user: { favoriteStops: { $set: favoriteStops } }
+        })
       }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
         if (!action.payload) removeItem('expandAdvanced')
-        return update(state, { user: {
-          expandAdvanced: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            expandAdvanced: { $set: action.payload }
+          }
+        })
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)
         let recentPlaces = clone(state.user.recentPlaces)
@@ -633,19 +659,25 @@ function createOtpReducer (config) {
           removeItem('recent')
           removeItem('recentSearches')
         }
-        return update(state, { user: {
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches },
-          trackRecent: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            recentPlaces: { $set: recentPlaces },
+            recentSearches: { $set: recentSearches },
+            trackRecent: { $set: action.payload }
+          }
+        })
       }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
-        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
+        const duplicateIndex = searches.findIndex((s) =>
+          isEqual(s.query, action.payload.query)
+        )
         // Overwrite duplicate search (so that new timestamp is stored).
         if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
         else searches.unshift(action.payload)
-        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
+        const sortedSearches = searches.sort(
+          (a, b) => b.timestamp - a.timestamp
+        )
         // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
         if (sortedSearches.length >= MAX_RECENT_STORAGE) {
           sortedSearches.splice(MAX_RECENT_STORAGE)
@@ -654,12 +686,14 @@ function createOtpReducer (config) {
         return update(state, { user: { searches: { $set: sortedSearches } } })
       case 'FORGET_SEARCH': {
         const recentSearches = clone(state.user.recentSearches)
-        const index = recentSearches.findIndex(l => l.id === action.payload)
+        const index = recentSearches.findIndex((l) => l.id === action.payload)
         // Remove item from list of recent searches
         recentSearches.splice(index, 1)
         storeItem('recentSearches', recentSearches)
         return index !== -1
-          ? update(state, { user: { recentSearches: { $splice: [[index, 1]] } } })
+          ? update(state, {
+              user: { recentSearches: { $splice: [[index, 1]] } }
+            })
           : state
       }
       case 'SET_AUTOPLAN':
@@ -686,12 +720,13 @@ function createOtpReducer (config) {
       case 'SET_ROUTER_ID':
         const routerId = action.payload
         // Store original path value in originalPath variable.
-        const originalPath = config.api.originalPath || config.api.path || '/otp/routers/default'
+        const originalPath =
+          config.api.originalPath || config.api.path || '/otp/routers/default'
         const path = routerId
           ? `/otp/routers/${routerId}`
-          // If routerId is null, revert to the original config's API path (or
-          // the standard path if that is not found).
-          : originalPath
+          : // If routerId is null, revert to the original config's API path (or
+            // the standard path if that is not found).
+            originalPath
         // Store routerId in session storage (persists through page reloads but
         // not when a new tab/window is opened).
         if (routerId) window.sessionStorage.setItem('routerId', routerId)
@@ -742,13 +777,15 @@ function createOtpReducer (config) {
         })
 
       case 'NEARBY_STOPS_RESPONSE':
-        const {focusStopId, stops} = action.payload
+        const { focusStopId, stops } = action.payload
         const stopLookup = {}
-        stops.forEach(s => {
+        stops.forEach((s) => {
           stopLookup[s.id] = s
         })
 
-        const stopIds = stops.map(stop => stop.id).filter(id => focusStopId !== id)
+        const stopIds = stops
+          .map((stop) => stop.id)
+          .filter((id) => focusStopId !== id)
 
         if (!focusStopId) {
           return update(state, {
@@ -762,20 +799,24 @@ function createOtpReducer (config) {
           // losing the child stops field we're adding here.
           delete stopLookup[focusStopId]
           return update(state, {
-            transitIndex: { stops: {
-              // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
-              $merge: stopLookup, // going to include the parentStop
-              // For the parent stop, we want to add the nearby stops as a new child stops field
-              [focusStopId]: {$merge: {nearbyStops: stopIds}}
-            } }
+            transitIndex: {
+              stops: {
+                // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
+                $merge: stopLookup, // going to include the parentStop
+                // For the parent stop, we want to add the nearby stops as a new child stops field
+                [focusStopId]: { $merge: { nearbyStops: stopIds } }
+              }
+            }
           })
         }
       case 'FIND_NEARBY_AMENITIES_RESPONSE':
         const { stopId, ...amenities } = action.payload
         return update(state, {
-          transitIndex: { stops: {
-            [stopId]: {$merge: amenities}
-          } }
+          transitIndex: {
+            stops: {
+              [stopId]: { $merge: amenities }
+            }
+          }
         })
       case 'STOPS_WITHIN_BBOX_RESPONSE':
         return update(state, {
@@ -826,10 +867,12 @@ function createOtpReducer (config) {
       case 'SET_VIEWED_STOP':
         if (action.payload) {
           // If setting to a stop (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
-            viewedStop: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
+              viewedStop: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed stop with null
           return update(state, { ui: { viewedStop: { $set: action.payload } } })
@@ -843,18 +886,24 @@ function createOtpReducer (config) {
         return update(state, { ui: { viewedTrip: { $set: null } } })
 
       case 'SET_HOVERED_STOP':
-        return update(state, { ui: { highlightedStop: { $set: action.payload } } })
+        return update(state, {
+          ui: { highlightedStop: { $set: action.payload } }
+        })
 
       case 'SET_VIEWED_ROUTE':
         if (action.payload) {
           // If setting to a route (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
-            viewedRoute: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
+              viewedRoute: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed route with null
-          return update(state, { ui: { viewedRoute: { $set: action.payload } } })
+          return update(state, {
+            ui: { viewedRoute: { $set: action.payload } }
+          })
         }
       case 'FIND_STOP_RESPONSE':
         return update(state, {
@@ -934,7 +983,9 @@ function createOtpReducer (config) {
         })
       case 'TOGGLE_AUTO_REFRESH':
         storeItem('autoRefreshStopTimes', action.payload)
-        return update(state, { user: { autoRefreshStopTimes: { $set: action.payload } } })
+        return update(state, {
+          user: { autoRefreshStopTimes: { $set: action.payload } }
+        })
 
       case 'FIND_ROUTES_RESPONSE':
         // If routes is undefined, initialize it w/ the full payload
@@ -951,7 +1002,9 @@ function createOtpReducer (config) {
         // If routes is undefined, initialize it w/ this route only
         if (!state.transitIndex.routes) {
           return update(state, {
-            transitIndex: { routes: { $set: { [action.payload.id]: action.payload } } }
+            transitIndex: {
+              routes: { $set: { [action.payload.id]: action.payload } }
+            }
           })
         }
         // Otherwise, overwrite only this route
@@ -1008,19 +1061,20 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             etaEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const estimates = action.payload.estimates || []
-                estimates.forEach(estimate => {
+                estimates.forEach((estimate) => {
                   if (!fromData[estimate.company]) {
                     fromData[estimate.company] = {}
                   }
-                  fromData[estimate.company][estimate.productId] = Object.assign(
-                    {
-                      estimateTimestamp: new Date()
-                    },
-                    estimate
-                  )
+                  fromData[estimate.company][estimate.productId] =
+                    Object.assign(
+                      {
+                        estimateTimestamp: new Date()
+                      },
+                      estimate
+                    )
                 })
                 return fromData
               }
@@ -1031,7 +1085,7 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             rideEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const { company, rideEstimate, to } = action.payload
                 if (!rideEstimate) {
@@ -1078,23 +1132,25 @@ function createOtpReducer (config) {
       case 'UPDATE_OVERLAY_VISIBILITY':
         const mapOverlays = clone(state.config.map.overlays)
         for (const key in action.payload) {
-          const overlay = mapOverlays.find(o => o.name === key)
+          const overlay = mapOverlays.find((o) => o.name === key)
           overlay.visible = action.payload[key]
         }
-        return update(state,
-          { config: { map: { overlays: { $set: mapOverlays } } } }
-        )
+        return update(state, {
+          config: { map: { overlays: { $set: mapOverlays } } }
+        })
       case 'UPDATE_ITINERARY_FILTER':
-        return update(state,
-          { filter: { $set: action.payload } }
-        )
+        return update(state, { filter: { $set: action.payload } })
       case 'SET_PREVIOUS_ITINERARY_VIEW':
-        return update(state, { ui: { previousItineraryView: { $set: action.payload } } })
+        return update(state, {
+          ui: { previousItineraryView: { $set: action.payload } }
+        })
       case 'UPDATE_LOCALE':
-        return update(state, { ui: {
-          locale: { $set: action.payload.locale },
-          localizedMessages: { $set: action.payload.messages }
-        }})
+        return update(state, {
+          ui: {
+            locale: { $set: action.payload.locale },
+            localizedMessages: { $set: action.payload.messages }
+          }
+        })
 
       case 'UPDATE_ROUTE_VIEWER_FILTER':
         return update(state, {

From 3e1e3a9c9145d1b2af92876d7792d85e8f0ed0d1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 2 Dec 2021 14:32:07 +0000
Subject: [PATCH 063/270] refactor(connected-stops-overlay): show flex stops
 when viewing flex rotue

---
 lib/actions/api.js                            |  4 +--
 lib/components/map/connected-stops-overlay.js | 30 ++++++++++++++-----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index b468c16a7..cb29e7b74 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -1164,8 +1164,8 @@ export function getVehiclePositionsForRoute(routeId) {
   return function (dispatch, getState) {
     const state = getState()
     const route = state?.otp?.transitIndex?.routes?.[routeId]
-    // If a route was fetched from GraphQL, it doens't support realtime vehicle positions
-    if (route && route.v2) {
+    // If a route was fetched from GraphQL, it doesn't support realtime vehicle positions
+    if (route?.v2) {
       return
     }
     return dispatch(
diff --git a/lib/components/map/connected-stops-overlay.js b/lib/components/map/connected-stops-overlay.js
index 30e89e3f1..b5fa86198 100644
--- a/lib/components/map/connected-stops-overlay.js
+++ b/lib/components/map/connected-stops-overlay.js
@@ -9,17 +9,33 @@ import StopMarker from './connected-stop-marker'
 
 const mapStateToProps = (state, ownProps) => {
   const { viewedRoute } = state.otp.ui
+  const { routes } = state.otp.transitIndex
 
   let { stops } = state.otp.overlay.transit
   let minZoom = 15
 
-  // If a pattern is being shown, show only the pattern's stops and show them large
-  if (viewedRoute?.patternId && state.otp.transitIndex.routes) {
-    stops =
-      state.otp.transitIndex.routes[viewedRoute.routeId]?.patterns?.[
-        viewedRoute.patternId
-      ]?.stops
-    minZoom = 2
+  // There are a number of cases when stops within route objects should be shown
+  // although there are no stops from the stops index active
+  if (routes) {
+    // All cases of stops being force-shown only apply when a route is being actively viewed
+    const route = routes?.[viewedRoute?.routeId]
+    if (route?.patterns) {
+      // If the pattern viewer is active, stops along that pattern should be shown
+      let viewedPattern = viewedRoute?.patternId
+      // If a flex route is being shown but the pattern viewer is not active, then the
+      // stops of the first pattern of the route should be shown
+      // This will ensure that the flex zone stops are shown.
+      // TODO: if the time to show flex stops changes, this is where that change
+      // should be made.
+      if (!viewedPattern && route.v2) {
+        viewedPattern = Object.keys(route?.patterns)?.[0]
+      }
+
+      // Override the stop index so that only relevant stops are shown
+      stops = route.patterns?.[viewedPattern]?.stops
+      // Override the minimum zoom so that the stops appear even if zoomed out
+      minZoom = 2
+    }
   }
 
   return {

From de005fb1c5531e0d54978365734edc2dd20c4fc7 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 2 Dec 2021 15:48:21 +0000
Subject: [PATCH 064/270] refactor(trip-viewer): run autoformatter

---
 lib/components/viewers/trip-viewer.js | 111 +++++++++++++-------------
 1 file changed, 54 insertions(+), 57 deletions(-)

diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index 1affef978..8e10b2f9a 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -1,25 +1,23 @@
 // FIXME: Remove this eslint rule exception.
 /* eslint-disable jsx-a11y/label-has-for */
+import { Button, Label } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedMessage, FormattedTime } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { Button, Label } from 'react-bootstrap'
-import { FormattedMessage, FormattedTime } from 'react-intl'
-import { connect } from 'react-redux'
 
-import Icon from '../util/icon'
-import SpanWithSpace from '../util/span-with-space'
-import { setViewedTrip } from '../../actions/ui'
 import { findTrip } from '../../actions/api'
 import { setLocation } from '../../actions/map'
+import { setViewedTrip } from '../../actions/ui'
+import Icon from '../util/icon'
+import SpanWithSpace from '../util/span-with-space'
 import Strong from '../util/strong-text'
 
 import ViewStopButton from './view-stop-button'
 
-const {
-  getUserTimezone
-} = coreUtils.time
+const { getUserTimezone } = coreUtils.time
 
 class TripViewer extends Component {
   static propTypes = {
@@ -32,51 +30,44 @@ class TripViewer extends Component {
     this.props.setViewedTrip(null)
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const { findTrip, viewedTrip } = this.props
     const { tripId } = viewedTrip
     findTrip({ tripId })
   }
 
-  render () {
-    const {
-      hideBackButton,
-      tripData,
-      viewedTrip
-    } = this.props
+  render() {
+    const { hideBackButton, tripData, viewedTrip } = this.props
 
     return (
-      <div className='trip-viewer'>
+      <div className="trip-viewer">
         {/* Header Block */}
-        <div className='trip-viewer-header'>
+        <div className="trip-viewer-header">
           {/* Back button */}
           {!hideBackButton && (
-            <div className='back-button-container'>
-              <Button
-                bsSize='small'
-                onClick={this._backClicked}
-              >
-                <Icon type='arrow-left' />
-                <FormattedMessage id='common.forms.back' />
+            <div className="back-button-container">
+              <Button bsSize="small" onClick={this._backClicked}>
+                <Icon type="arrow-left" />
+                <FormattedMessage id="common.forms.back" />
               </Button>
             </div>
           )}
 
           {/* Header Text */}
-          <div className='header-text'>
-            <FormattedMessage id={'components.TripViewer.header'} />
+          <div className="header-text">
+            <FormattedMessage id="components.TripViewer.header" />
           </div>
           <div style={{ clear: 'both' }} />
         </div>
 
-        <div className='trip-viewer-body'>
+        <div className="trip-viewer-body">
           {/* Basic Trip Info */}
           {tripData && (
             <div>
               {/* Route name */}
               <div>
                 <FormattedMessage
-                  id='components.TripViewer.routeHeader'
+                  id="components.TripViewer.routeHeader"
                   values={{
                     routeLongName: tripData.route.longName,
                     routeShortName: tripData.route.shortName,
@@ -87,36 +78,42 @@ class TripViewer extends Component {
 
               {/* Wheelchair/bike accessibility badges, if applicable */}
               <h4>
-                {tripData.wheelchairAccessible === 1 &&
-                  <Label bsStyle='primary'>
-                    <Icon type='wheelchair-alt' withSpace />
-                    <FormattedMessage id='components.TripViewer.accessible' />
+                {tripData.wheelchairAccessible === 1 && (
+                  <Label bsStyle="primary">
+                    <Icon type="wheelchair-alt" withSpace />
+                    <FormattedMessage id="components.TripViewer.accessible" />
                   </Label>
-                }
+                )}
                 <SpanWithSpace margin={0.25} />
-                {tripData.bikesAllowed === 1 &&
-                  <Label bsStyle='success'>
-                    <Icon type='bicycle' withSpace />
-                    <FormattedMessage id='components.TripViewer.bicyclesAllowed' />
+                {tripData.bikesAllowed === 1 && (
+                  <Label bsStyle="success">
+                    <Icon type="bicycle" withSpace />
+                    <FormattedMessage id="components.TripViewer.bicyclesAllowed" />
                   </Label>
-                }
+                )}
               </h4>
             </div>
           )}
 
           {/* Stop Listing */}
-          {tripData && tripData.stops && tripData.stopTimes && (
+          {tripData &&
+            tripData.stops &&
+            tripData.stopTimes &&
             tripData.stops.map((stop, i) => {
               // determine whether to use special styling for first/last stop
               let stripMapLineClass = 'strip-map-line'
               if (i === 0) stripMapLineClass = 'strip-map-line-first'
-              else if (i === tripData.stops.length - 1) stripMapLineClass = 'strip-map-line-last'
+              else if (i === tripData.stops.length - 1)
+                stripMapLineClass = 'strip-map-line-last'
 
               // determine whether to show highlight in strip map
               let highlightClass
-              if (i === viewedTrip.fromIndex) highlightClass = 'strip-map-highlight-first'
-              else if (i > viewedTrip.fromIndex && i < viewedTrip.toIndex) highlightClass = 'strip-map-highlight'
-              else if (i === viewedTrip.toIndex) highlightClass = 'strip-map-highlight-last'
+              if (i === viewedTrip.fromIndex)
+                highlightClass = 'strip-map-highlight-first'
+              else if (i > viewedTrip.fromIndex && i < viewedTrip.toIndex)
+                highlightClass = 'strip-map-highlight'
+              else if (i === viewedTrip.toIndex)
+                highlightClass = 'strip-map-highlight-last'
 
               // Convert to unix (millisceonds) for FormattedTime
               // Use timezone to avoid spying on startOf in future tests
@@ -128,39 +125,39 @@ class TripViewer extends Component {
               return (
                 <div key={i}>
                   {/* the departure time */}
-                  <div className='stop-time'>
+                  <div className="stop-time">
                     <FormattedTime
-                      timeStyle='short'
+                      timeStyle="short"
                       value={departureTimestamp}
                     />
                   </div>
 
                   {/* the vertical strip map */}
-                  <div className='strip-map-container'>
-                    { highlightClass && <div className={highlightClass} /> }
+                  <div className="strip-map-container">
+                    {highlightClass && <div className={highlightClass} />}
                     <div className={stripMapLineClass} />
-                    <div className='strip-map-icon'><Icon type='circle' /></div>
+                    <div className="strip-map-icon">
+                      <Icon type="circle" />
+                    </div>
                   </div>
 
                   {/* the stop-viewer button */}
-                  <div className='stop-button-container'>
+                  <div className="stop-button-container">
                     <ViewStopButton
                       stopId={stop.id}
-                      text={<FormattedMessage id='components.TripViewer.viewStop' />}
+                      text={
+                        <FormattedMessage id="components.TripViewer.viewStop" />
+                      }
                     />
                   </div>
 
                   {/* the main stop label */}
-                  <div className='stop-name'>
-                    {stop.name}
-                  </div>
+                  <div className="stop-name">{stop.name}</div>
 
                   <div style={{ clear: 'both' }} />
-
                 </div>
               )
-            })
-          )}
+            })}
         </div>
       </div>
     )

From 231dcc9ca4714c0fdb51dbf642006a64d1d35a5c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 2 Dec 2021 15:50:35 +0000
Subject: [PATCH 065/270] fix(trip-viewer): grab supplemental trip info from
 graphQL if needed

---
 lib/actions/api.js                    | 51 +++++++++++++++++++++++++++
 lib/components/viewers/trip-viewer.js | 29 ++++++++++-----
 2 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index cb29e7b74..3e0c18c63 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -535,6 +535,7 @@ export function findTrip(params) {
     findTripResponse,
     findTripError,
     {
+      noThrottle: true,
       postprocess: (payload, dispatch) => {
         dispatch(findStopsForTrip({ tripId: params.tripId }))
         dispatch(findStopTimesForTrip({ tripId: params.tripId }))
@@ -543,6 +544,56 @@ export function findTrip(params) {
     }
   )
 }
+export function findGraphQLTrip(params) {
+  // Attempt an otp-2 graphQL request for the same trip before failing
+  // since the otp-2 rest api doesn't return the needed fields
+
+  // TODO: for now, this matches the OTP-1 output. In the future this should be
+  // reduced to only include what is needed
+  return createGraphQLQueryAction(
+    `{
+        trip(id: "${params.tripId}") {
+          id: gtfsId
+          route {
+            id: gtfsId
+            agency {
+              id: gtfsId
+              name
+              url
+              timezone
+              lang
+              phone
+              fareUrl
+            }
+            shortName
+            longName
+            type
+            url
+            color
+            textColor
+            routeBikesAllowed: bikesAllowed
+            bikesAllowed
+          }
+          serviceId
+          tripHeadsign
+          directionId
+          blockId
+          shapeId
+          wheelchairAccessible
+          bikesAllowed
+          tripBikesAllowed: bikesAllowed
+        }
+      }`,
+    {},
+    findTripResponse,
+    findTripError,
+    {
+      rewritePayload: (payload) => {
+        return payload.data.trip
+      }
+    }
+  )
+}
 
 // Stops for trip query
 
diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index 8e10b2f9a..f4675fd40 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -8,7 +8,7 @@ import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import { findTrip } from '../../actions/api'
+import { findGraphQLTrip, findTrip } from '../../actions/api'
 import { setLocation } from '../../actions/map'
 import { setViewedTrip } from '../../actions/ui'
 import Icon from '../util/icon'
@@ -36,6 +36,14 @@ class TripViewer extends Component {
     findTrip({ tripId })
   }
 
+  componentDidUpdate() {
+    const { findGraphQLTrip, tripData, viewedTrip } = this.props
+    const { tripId } = viewedTrip
+    if (!tripData.route) {
+      findGraphQLTrip({ tripId })
+    }
+  }
+
   render() {
     const { hideBackButton, tripData, viewedTrip } = this.props
 
@@ -66,14 +74,16 @@ class TripViewer extends Component {
             <div>
               {/* Route name */}
               <div>
-                <FormattedMessage
-                  id="components.TripViewer.routeHeader"
-                  values={{
-                    routeLongName: tripData.route.longName,
-                    routeShortName: tripData.route.shortName,
-                    strong: Strong
-                  }}
-                />
+                {tripData.route && (
+                  <FormattedMessage
+                    id="components.TripViewer.routeHeader"
+                    values={{
+                      routeLongName: tripData.route.longName,
+                      routeShortName: tripData.route.shortName,
+                      strong: Strong
+                    }}
+                  />
+                )}
               </div>
 
               {/* Wheelchair/bike accessibility badges, if applicable */}
@@ -173,6 +183,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
+  findGraphQLTrip,
   findTrip,
   setLocation,
   setViewedTrip

From 2c8d81dc9d58b3ff23a2652d765063c188e9c69d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 2 Dec 2021 15:52:11 +0000
Subject: [PATCH 066/270] refactor(trip-viewer): adjust for linter

---
 lib/components/viewers/trip-viewer.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index f4675fd40..ed09410a8 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -21,7 +21,10 @@ const { getUserTimezone } = coreUtils.time
 
 class TripViewer extends Component {
   static propTypes = {
+    findGraphQLTrip: findGraphQLTrip.type,
+    findTrip: findTrip.type,
     hideBackButton: PropTypes.bool,
+    setViewedTrip: setViewedTrip.type,
     tripData: PropTypes.object,
     viewedTrip: PropTypes.object
   }
@@ -174,7 +177,7 @@ class TripViewer extends Component {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const viewedTrip = state.otp.ui.viewedTrip
   return {
     tripData: state.otp.transitIndex.trips[viewedTrip.tripId],

From d8038ace7b477545c6d962316467d7fa17712a82 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 6 Dec 2021 11:54:41 +0100
Subject: [PATCH 067/270] chore(RouteRow): run autoformatter

---
 lib/components/viewers/RouteRow.js | 163 +++++++++++++++--------------
 1 file changed, 84 insertions(+), 79 deletions(-)

diff --git a/lib/components/viewers/RouteRow.js b/lib/components/viewers/RouteRow.js
index c9446eca2..cf49ad4f1 100644
--- a/lib/components/viewers/RouteRow.js
+++ b/lib/components/viewers/RouteRow.js
@@ -1,7 +1,9 @@
-import { Label, Button } from 'react-bootstrap'
+// TODO: Typescript, which doesn't make sense to do in this file until common types are established
+/* eslint-disable react/prop-types */
+import { Button, Label } from 'react-bootstrap'
+import { VelocityTransitionGroup } from 'velocity-react'
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
-import { VelocityTransitionGroup } from 'velocity-react'
 
 import { ComponentContext } from '../../util/contexts'
 import { getColorAndNameFromRoute, getModeFromRoute } from '../../util/viewer'
@@ -9,10 +11,70 @@ import { getFormattedMode } from '../../util/i18n'
 
 import RouteDetails from './route-details'
 
+export const StyledRouteRow = styled.div`
+  background-color: white;
+  border-bottom: 1px solid gray;
+`
+
+export const RouteRowButton = styled(Button)`
+  align-items: center;
+  display: flex;
+  padding: 6px;
+  width: 100%;
+  transition: all ease-in-out 0.1s;
+`
+
+export const RouteRowElement = styled.span``
+
+export const OperatorImg = styled.img`
+  height: 25px;
+  margin-right: 8px;
+`
+
+export const ModeIconElement = styled.span`
+  display: inline-block;
+  vertical-align: bottom;
+  height: 22px;
+`
+
+const RouteNameElement = styled(Label)`
+  background-color: ${(props) =>
+    props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
+      ? 'rgba(0,0,0,0)'
+      : props.backgroundColor};
+  color: ${(props) => props.color};
+  flex: 0 1 auto;
+  font-size: medium;
+  font-weight: 400;
+  margin-left: ${(props) =>
+    props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
+      ? 0
+      : '8px'};
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+export const RouteName = ({ operator, route }) => {
+  const { backgroundColor, color, longName } = getColorAndNameFromRoute(
+    operator,
+    route
+  )
+  return (
+    <RouteNameElement
+      backgroundColor={backgroundColor}
+      color={color}
+      title={`${route.shortName} ${longName}`}
+    >
+      <b>{route.shortName}</b> {longName}
+    </RouteNameElement>
+  )
+}
+
 export class RouteRow extends PureComponent {
-  static contextType = ComponentContext;
+  static contextType = ComponentContext
 
-  constructor (props) {
+  constructor(props) {
     super(props)
     // Create a ref used to scroll to
     this.activeRef = React.createRef()
@@ -26,9 +88,9 @@ export class RouteRow extends PureComponent {
       // This is fired when coming back from the route details view
       this.activeRef.current.scrollIntoView()
     }
-  };
+  }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     /*
        If the initial route row list is being rendered and there is an active
        route, scroll to it. The initialRender prop prohibits the row being scrolled to
@@ -40,7 +102,13 @@ export class RouteRow extends PureComponent {
   }
 
   _onClick = () => {
-    const { findRoute, getVehiclePositionsForRoute, isActive, route, setViewedRoute } = this.props
+    const {
+      findRoute,
+      getVehiclePositionsForRoute,
+      isActive,
+      route,
+      setViewedRoute
+    } = this.props
     if (isActive) {
       // Deselect current route if active.
       setViewedRoute({ patternId: null, routeId: null })
@@ -50,19 +118,16 @@ export class RouteRow extends PureComponent {
       getVehiclePositionsForRoute(route.id)
       setViewedRoute({ routeId: route.id })
     }
-  };
+  }
 
-  render () {
+  render() {
     const { intl, isActive, operator, route } = this.props
     const { ModeIcon } = this.context
 
     return (
-      <StyledRouteRow
-        isActive={isActive}
-        ref={this.activeRef}
-      >
+      <StyledRouteRow isActive={isActive} ref={this.activeRef}>
         <RouteRowButton
-          className='clear-button-formatting'
+          className="clear-button-formatting"
           isActive={isActive}
           onClick={this._onClick}
         >
@@ -75,7 +140,8 @@ export class RouteRow extends PureComponent {
                   },
                   { operatorName: operator.name }
                 )}
-                src={operator.logo} />
+                src={operator.logo}
+              />
             )}
           </RouteRowElement>
           <ModeIconElement>
@@ -86,11 +152,10 @@ export class RouteRow extends PureComponent {
               )}
               height={22}
               mode={getModeFromRoute(route)}
-              width={22} />
+              width={22}
+            />
           </ModeIconElement>
-          <RouteName
-            operator={operator}
-            route={route} />
+          <RouteName operator={operator} route={route} />
         </RouteRowButton>
         <VelocityTransitionGroup
           enter={{ animation: 'slideDown' }}
@@ -102,63 +167,3 @@ export class RouteRow extends PureComponent {
     )
   }
 }
-
-export const StyledRouteRow = styled.div`
-  background-color: white;
-  border-bottom: 1px solid gray;
-`
-
-export const RouteRowButton = styled(Button)`
-  align-items: center;
-  display: flex;
-  padding: 6px;
-  width: 100%;
-  transition: all ease-in-out 0.1s;
-`
-
-export const RouteRowElement = styled.span``
-
-export const OperatorImg = styled.img`
-  height: 25px;
-  margin-right: 8px;
-`
-
-export const ModeIconElement = styled.span`
-  display: inline-block;
-  vertical-align: bottom;
-  height: 22px;
-`
-
-const RouteNameElement = styled(Label)`
-  background-color: ${(props) =>
-    props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
-      ? 'rgba(0,0,0,0)'
-      : props.backgroundColor};
-  color: ${(props) => props.color};
-  flex: 0 1 auto;
-  font-size: medium;
-  font-weight: 400;
-  margin-left: ${(props) =>
-    props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
-      ? 0
-      : '8px'};
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`
-
-export const RouteName = ({operator, route}) => {
-  const { backgroundColor, color, longName } = getColorAndNameFromRoute(
-    operator,
-    route
-  )
-  return (
-    <RouteNameElement
-      backgroundColor={backgroundColor}
-      color={color}
-      title={`${route.shortName} ${longName}`}
-    >
-      <b>{route.shortName}</b> {longName}
-    </RouteNameElement>
-  )
-}

From 9e8c1a71c74ad9a476f0f15049a5e2086f661ca3 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 6 Dec 2021 11:56:28 +0100
Subject: [PATCH 068/270] refactor: allow graphQL route queries to fail without
 crash

---
 lib/actions/api.js                 |  6 ++++++
 lib/components/viewers/RouteRow.js | 24 +++++++++++++-----------
 lib/util/state.js                  |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index cb29e7b74..d00cf083f 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -454,6 +454,9 @@ export function fetchGraphQLOnlyStopInfo(stopId) {
         }
       },
       rewritePayload: (payload) => {
+        if (payload.errors) {
+          return findRouteError(payload.errors)
+        }
         const { stop } = payload.data
         const color = stop.routes?.length > 0 && `#${stop.routes[0].color}`
         return { ...stop, color }
@@ -841,6 +844,9 @@ export function findRoute(params) {
           {
             noThrottle: true,
             rewritePayload: (payload) => {
+              if (payload.errors) {
+                return dispatch(findRouteError(payload.errors))
+              }
               const { route } = payload.data
               // Ensure this isn't overwritten
               route.v2 = true
diff --git a/lib/components/viewers/RouteRow.js b/lib/components/viewers/RouteRow.js
index cf49ad4f1..a789cda46 100644
--- a/lib/components/viewers/RouteRow.js
+++ b/lib/components/viewers/RouteRow.js
@@ -144,17 +144,19 @@ export class RouteRow extends PureComponent {
               />
             )}
           </RouteRowElement>
-          <ModeIconElement>
-            <ModeIcon
-              aria-label={getFormattedMode(
-                getModeFromRoute(route).toLowerCase(),
-                intl
-              )}
-              height={22}
-              mode={getModeFromRoute(route)}
-              width={22}
-            />
-          </ModeIconElement>
+          {route.mode && (
+            <ModeIconElement>
+              <ModeIcon
+                aria-label={getFormattedMode(
+                  getModeFromRoute(route).toLowerCase(),
+                  intl
+                )}
+                height={22}
+                mode={getModeFromRoute(route)}
+                width={22}
+              />
+            </ModeIconElement>
+          )}
           <RouteName operator={operator} route={route} />
         </RouteRowButton>
         <VelocityTransitionGroup
diff --git a/lib/util/state.js b/lib/util/state.js
index 9c5c2d196..35a4d0045 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -572,7 +572,7 @@ export const getModesForActiveAgencyFilter = createSelector(
  */
 export const getAgenciesFromRoutes = createSelector(routeSelector, (routes) =>
   Array.from(
-    new Set(routes.map((route) => route.agencyName || route.agency.name))
+    new Set(routes.map((route) => route.agencyName || route?.agency?.name))
   )
     .filter((agency) => agency !== undefined)
     .sort()

From 4ed2535b44c3c689423fe8a905e44b6b275859e8 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 8 Dec 2021 12:47:06 +0100
Subject: [PATCH 069/270] feat(craco): clarify how craco accepts env variables

BREAKING CHANGE: the old method of passing in env variables is no longer supported
---
 README.md       | 4 ++--
 craco.config.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 2f6b8f2f7..59f4e7857 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ yarn start
 Should you want to maintain multiple configuration files, OTP-RR can be made to use a custom config file by using environment variables. Other environment variables also exist. `CUSTOM_CSS` can be used to point to a css file to inject, and `JS_CONFIG` can be used to point to a `config.js` file to override the one shipped with OTP-RR.
 
 ```bash
-yarn start --env.YAML_CONFIG=/absolute/path/to/config.yml
+env YAML_CONFIG=/absolute/path/to/config.yml yarn start
 ```
 
 ## Deploying the UI
@@ -31,7 +31,7 @@ Build the js/css bundle by running `yarn build`. The build will appear in the `d
 The same environment variables which affect the behavior of `yarn start` also affect `yarn build`. Running the following command builds OTP-RR with customized js and css:
 
 ```bash
-yarn build --env.JS_CONFIG=my-custom-js.js env.CUSTOM_CSS=my-custom-css.css
+env JS_CONFIG=my-custom-js.js CUSTOM_CSS=my-custom-css.css yarn build
 ```
 
 ## Library Documentation
diff --git a/craco.config.js b/craco.config.js
index ebd4141fc..e7a912485 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -20,10 +20,10 @@ module.exports = {
   /**
    * Webpack can be passed a few environment variables to override the default
    * files used to run this project. The environment variables are CUSTOM_CSS,
-   * HTML_FILE, YAML_CONFIG, and JS_CONFIG. They must each be passed in the
-   * format --env.*=/path/to/file. For example:
+   * HTML_FILE, YAML_CONFIG, and JS_CONFIG. They must each be passed via env
+   * variables *=/path/to/file. For example:
    *
-   *    yarn start --env.YAML_CONFIG=/absolute/path/to/config.yml
+   *    env YAML_CONFIG=/absolute/path/to/config.yml yarn start
    */
   webpack: {
     // eslint-disable-next-line complexity

From df65233aedb82681fc75566272efb8a1532ab4d2 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 8 Dec 2021 14:40:52 +0100
Subject: [PATCH 070/270] improvement: maintain compatibility with non-flex
 configs

---
 lib/actions/api.js               | 2 +-
 lib/components/viewers/styled.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index d00cf083f..c968b30ef 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -1324,7 +1324,7 @@ function makeApiUrl(config, endpoint, options) {
     console.log('Using alt service for ' + options.serviceId)
     url = config.alternateTransitIndex.apiRoot + endpoint
   } else {
-    const api = options.v2 ? config.api_v2 : config.api
+    const api = options.v2 && config.api_v2 ? config.api_v2 : config.api
     url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
   }
   return url
diff --git a/lib/components/viewers/styled.js b/lib/components/viewers/styled.js
index 61a25ef30..f402cb4c9 100644
--- a/lib/components/viewers/styled.js
+++ b/lib/components/viewers/styled.js
@@ -51,7 +51,7 @@ export const Stop = styled.a`
   white-space: nowrap;
   margin-left: 45px;
   /* negative margin accounts for the height of the stop blob */
-  margin-top: -25px;
+  margin-top: -28px;
 
   &:hover {
     color: #23527c;

From 49f0fdd5257d472b41920962e37a033912a8423e Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 8 Dec 2021 15:43:10 +0100
Subject: [PATCH 071/270] refactor(actions/api): support otp-2 only instances

---
 lib/actions/api.js                    | 25 +++++++++++++++++++++----
 lib/components/viewers/stop-viewer.js |  6 +++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index c968b30ef..24073255c 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -260,13 +260,18 @@ function getJsonAndCheckResponse(res) {
 function getOtpFetchOptions(state, includeToken = false) {
   let apiBaseUrl, apiKey, token
 
-  const { api, persistence } = state.otp.config
+  // eslint-disable-next-line camelcase
+  const { api: api_v1, api_v2, persistence } = state.otp.config
   if (persistence && persistence.otp_middleware) {
     // Prettier does not understand the syntax on this line
     // eslint-disable-next-line prettier/prettier
     ({ apiBaseUrl, apiKey } = persistence.otp_middleware)
   }
 
+  // Use only the v2 api if only a v2 api is presented
+  // eslint-disable-next-line camelcase
+  const api = api_v1 || api_v2
+
   const isOtpServerSameAsMiddleware = apiBaseUrl === api.host
   if (isOtpServerSameAsMiddleware) {
     if (includeToken && state.user) {
@@ -297,7 +302,8 @@ function constructRoutingQuery(
     config.routingTypes.find((rt) => rt.key === routingType)
 
   // 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 useOtp2 =
+    (!!config.api_v2 && routingMode.includes('FLEX')) || !config.api
 
   const api = (rt && rt.api) || (useOtp2 && config.api_v2) || config.api
   const planEndpoint = `${api.host}${api.port ? ':' + api.port : ''}${
@@ -697,9 +703,18 @@ export function findRoutes(params) {
       postprocess: (payload, dispatch) => {
         return dispatch(findRoutesV2())
       },
-      rewritePayload: (payload) => {
+      rewritePayload: (payload, dispatch, getState) => {
+        const { otp } = getState()
+        // eslint-disable-next-line camelcase
+        const { api: api_v1, api_v2 } = otp.config
+        // eslint-disable-next-line camelcase
+        const usingV2Only = !api_v1 && !!api_v2
         const routes = {}
         payload.forEach((rte) => {
+          // If coming from a v2 server,
+          // force V2 flag to ensure follow-up requests are graphQL
+          rte.v2 = usingV2Only
+
           routes[rte.id] = rte
         })
         return routes
@@ -1324,7 +1339,9 @@ function makeApiUrl(config, endpoint, options) {
     console.log('Using alt service for ' + options.serviceId)
     url = config.alternateTransitIndex.apiRoot + endpoint
   } else {
-    const api = options.v2 && config.api_v2 ? config.api_v2 : config.api
+    const api =
+      // v2 is either selected or used when there is no alternative
+      (options.v2 && config.api_v2) || !config.api ? config.api_v2 : config.api
     url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
   }
   return url
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 9d01f0adc..73508cbed 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -285,9 +285,9 @@ class StopViewer extends Component {
           <FormattedMessage id="components.StopViewer.noStopsFound" />
         </div>
       )
-      // If geometries are available and stop times are not, it is a strong indication
-      // that the stop is a flex stop.
-      if (stopData?.geometries) {
+      // If geometries are available (and are not a point) and stop times 
+      // are not, it is a strong indication that the stop is a flex stop.
+      if (stopData?.geometries?.geoJson?.type !== 'Point') {
         contents = (<div><FormattedMessage id="components.StopViewer.flexStop" /></div>)
       }
     } else if (scheduleView) {

From fc28866781790cff9cdca9c528cf32a5ac60ca84 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 14 Dec 2021 14:16:17 +0100
Subject: [PATCH 072/270] chore(deps): upgrade stops-overlay

---
 package.json |  2 +-
 yarn.lock    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 9309472ca..0afe9cf68 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "@opentripplanner/printable-itinerary": "^1.3.1",
     "@opentripplanner/route-viewer-overlay": "^1.1.1",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
-    "@opentripplanner/stops-overlay": "^3.3.1",
+    "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
     "@opentripplanner/transitive-overlay": "^1.1.2",
     "@opentripplanner/trip-details": "^1.6.0",
diff --git a/yarn.lock b/yarn.lock
index d7b1be84c..2a6c9a3b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2588,14 +2588,14 @@
     "@opentripplanner/core-utils" "^4.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/stops-overlay@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-3.3.1.tgz#02a51522bda0667e84d058562a484c917b9547f7"
-  integrity sha512-8BBMdd2a40jbcjMcIPo7gfTVfKRCNg7+AB5F01d+9TVRZoM1++9ffeLuiFpebD3OR1Cip6gepyz1i0O/FV55mg==
+"@opentripplanner/stops-overlay@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-3.4.0.tgz#0ded677db2dead7e02a968fca4177c341b527033"
+  integrity sha512-cq40s9iy5t9L1fN3/cyaFjf4OzNsecCSdZC5f+N9/FL8/lLgpE8bsEh03Ggy40T6T3mY23sRPGw3Fqk+rEI62A==
   dependencies:
-    "@opentripplanner/core-utils" "^4.1.0"
-    "@opentripplanner/from-to-location-picker" "^1.2.1"
-    "@opentripplanner/zoom-based-markers" "^1.2.0"
+    "@opentripplanner/core-utils" "^4.5.0"
+    "@opentripplanner/from-to-location-picker" "^1.3.0"
+    "@opentripplanner/zoom-based-markers" "^1.2.1"
 
 "@opentripplanner/transit-vehicle-overlay@^2.3.1":
   version "2.3.1"
@@ -2668,7 +2668,7 @@
     lodash.memoize "^4.1.2"
     prop-types "^15.7.2"
 
-"@opentripplanner/zoom-based-markers@^1.2.0":
+"@opentripplanner/zoom-based-markers@^1.2.0", "@opentripplanner/zoom-based-markers@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/zoom-based-markers/-/zoom-based-markers-1.2.1.tgz#a6ce157ed0169b1098d1ddad3691a712fb6b243b"
   integrity sha512-2MatM0+PrymcOzRsaCwmHO1nBkJfsBraGUqVkl04oUdwXQx9qKuzba2zq5CEPLacnGOF3EViZcT0kSd/wLzUpA==

From 4625964adf904cc51904868c6b0c431ca004a1e2 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 14 Dec 2021 14:42:22 +0100
Subject: [PATCH 073/270] refactor(actions/api): don't crash if api not defined

---
 lib/actions/api.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 24073255c..c8ff4a796 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -1342,6 +1342,10 @@ function makeApiUrl(config, endpoint, options) {
     const api =
       // v2 is either selected or used when there is no alternative
       (options.v2 && config.api_v2) || !config.api ? config.api_v2 : config.api
+
+    // Don't crash if no api is defined (such as in the unit test env)
+    if (!api?.host) return null
+
     url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
   }
   return url

From 0abd4ab2118efd028de770df59b34d55b450f0f0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 15 Dec 2021 13:42:41 +0100
Subject: [PATCH 074/270] refactor(connected-stops-overlay): update flex zone
 comment

---
 lib/components/map/connected-stops-overlay.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/components/map/connected-stops-overlay.js b/lib/components/map/connected-stops-overlay.js
index b5fa86198..cacff0ea3 100644
--- a/lib/components/map/connected-stops-overlay.js
+++ b/lib/components/map/connected-stops-overlay.js
@@ -25,8 +25,9 @@ const mapStateToProps = (state, ownProps) => {
       // If a flex route is being shown but the pattern viewer is not active, then the
       // stops of the first pattern of the route should be shown
       // This will ensure that the flex zone stops are shown.
-      // TODO: if the time to show flex stops changes, this is where that change
-      // should be made.
+
+      // Preferably, the flex stops would be rendered in a separate layer.
+      // However, without changes to GraphQL, getting this data is very expensive
       if (!viewedPattern && route.v2) {
         viewedPattern = Object.keys(route?.patterns)?.[0]
       }

From cfb271c5d72be0ddbec66987edc04ad723fa216a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 15 Dec 2021 15:29:18 +0100
Subject: [PATCH 075/270] ci: restore lint step removed in 39fd703

---
 .github/workflows/node-ci.yml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
index d2191a848..ed1b484eb 100644
--- a/.github/workflows/node-ci.yml
+++ b/.github/workflows/node-ci.yml
@@ -23,7 +23,11 @@ jobs:
         uses: bahmutov/npm-install@v1
       - name: Copy example config
         run: cp example-config.yml config.yml
-        # Actual lint step temporarily removed to allow for package release
+      - name: Lint code
+        # Move everything from latest commit back to staged
+        run: git reset --soft HEAD^ && yarn lint
+        # For our info, lint all files but don't mark them as failure
+        # TODO: remove this once project is typescripted
       - name: Lint all code (ignoring errors)
         run: yarn lint-all || true
       - name: Run tests

From d4a80e131339cf206cdd7ce323cde35d9bb8c6d9 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 16 Dec 2021 12:40:31 +0100
Subject: [PATCH 076/270] refactor(craco.config): remove superfluous comment

---
 craco.config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/craco.config.js b/craco.config.js
index c753c6648..e54f98412 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -31,8 +31,7 @@ module.exports = {
   /**
    * Webpack can be passed a few environment variables to override the default
    * files used to run this project. The environment variables are CUSTOM_CSS,
-   * HTML_FILE, YAML_CONFIG, and JS_CONFIG. They must each be passed via env
-   * variables *=/path/to/file. For example:
+   * HTML_FILE, YAML_CONFIG, and JS_CONFIG. For example:
    *
    *    env YAML_CONFIG=/absolute/path/to/config.yml yarn start
    */

From ab4179f662d0be72a4382268d2ab45aa40bd1912 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 21 Dec 2021 13:06:29 +0100
Subject: [PATCH 077/270] feat(connected-route-viewer-overlay): support not
 rendering route inside flex zones

---
 example-config.yml                                   | 4 ++++
 lib/components/map/connected-route-viewer-overlay.js | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index a91baec1c..c0bcbb370 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -405,3 +405,7 @@ dateTime:
 #   # departure and it is not entirely excluded from display
 #   # (defaults to 4 days/345600s if unspecified).
 #   timeRange: 345600
+# routeViewer:
+#   # Whether to render routes within flex zones of a route's patterns. If set to true,
+#   # routes will not be rendered within flex zones.
+#   clipRouteRenderToPatternStops: true
diff --git a/lib/components/map/connected-route-viewer-overlay.js b/lib/components/map/connected-route-viewer-overlay.js
index adb99c8a4..aa229afd7 100644
--- a/lib/components/map/connected-route-viewer-overlay.js
+++ b/lib/components/map/connected-route-viewer-overlay.js
@@ -1,5 +1,5 @@
-import RouteViewerOverlay from '@opentripplanner/route-viewer-overlay'
 import { connect } from 'react-redux'
+import RouteViewerOverlay from '@opentripplanner/route-viewer-overlay'
 
 // connect to the redux store
 
@@ -14,10 +14,14 @@ const mapStateToProps = (state, ownProps) => {
 
   // If a pattern is selected, hide all other patterns
   if (viewedRoute?.patternId && routeData?.patterns) {
-    filteredPatterns = {[viewedRoute.patternId]: routeData.patterns[viewedRoute.patternId]}
+    filteredPatterns = {
+      [viewedRoute.patternId]: routeData.patterns[viewedRoute.patternId]
+    }
   }
 
   return {
+    clipToPatternStops:
+      state.otp.config.routeViewer.clipRouteRenderToPatternStops,
     routeData: { ...routeData, patterns: filteredPatterns }
   }
 }

From 04daa4b7000472f9a5b547d37936429ef0824c3b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 28 Dec 2021 16:25:01 +0100
Subject: [PATCH 078/270] refactor(connected-route-viewer-overlay): rename
 clipToPatternStops config variable

---
 example-config.yml                                   | 2 +-
 lib/components/map/connected-route-viewer-overlay.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index c0bcbb370..123383bcd 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -408,4 +408,4 @@ dateTime:
 # routeViewer:
 #   # Whether to render routes within flex zones of a route's patterns. If set to true,
 #   # routes will not be rendered within flex zones.
-#   clipRouteRenderToPatternStops: true
+#   hideRouteShapesWithinFlexZones: true
diff --git a/lib/components/map/connected-route-viewer-overlay.js b/lib/components/map/connected-route-viewer-overlay.js
index aa229afd7..03cbd0370 100644
--- a/lib/components/map/connected-route-viewer-overlay.js
+++ b/lib/components/map/connected-route-viewer-overlay.js
@@ -21,7 +21,7 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     clipToPatternStops:
-      state.otp.config.routeViewer.clipRouteRenderToPatternStops,
+      state.otp.config.routeViewer.hideRouteShapesWithinFlexZones,
     routeData: { ...routeData, patterns: filteredPatterns }
   }
 }

From 09f76f5465f479055bbee002754862223cddac37 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 28 Dec 2021 18:16:24 -0500
Subject: [PATCH 079/270] chore(i18n): Add corresponding FR message.

---
 i18n/en-US.yml | 2 +-
 i18n/fr-FR.yml | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 3302d3c95..692ead24b 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -435,8 +435,8 @@ components:
   # Used in both desktop and mobile
   StopViewer:
     displayStopId: "<strong>Stop ID</strong>: {stopId}"
-    header: Stop Viewer
     flexStop: This is a flex stop. Vehicles will drop off and pick up passengers in this flexible zone by request. You may have to call ahead for service in this area.
+    header: Stop Viewer
     loadingText: Loading Stop...
     noStopsFound: No stop times found for date.
     planTrip: "Plan a trip:"
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 64ca23425..15ebb83be 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -419,6 +419,7 @@ components:
   # Used in both desktop and mobile
   StopViewer:
     displayStopId: "<strong>Arrêt n°</strong>{stopId}"
+    flexStop: Cet arrêt fait partie d'une zone 'Flex' et est desservi à la demande. Une réservation préalable peut être exigée pour obtenir la desserte.
     header: Info arrêt
     loadingText: Chargement de l'arrêt...
     noStopsFound: Aucun passage n'a été trouvé pour cette date.

From 6ffc02cb8262fbc542bc259d5275ddc5a62fb900 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 29 Dec 2021 11:38:06 +0100
Subject: [PATCH 080/270] refactor: address pr comments

---
 lib/actions/api.js                            | 55 +++++++++----------
 lib/components/map/connected-stops-overlay.js |  6 +-
 lib/components/viewers/RouteRow.js            |  4 +-
 lib/components/viewers/stop-viewer.js         |  2 +-
 4 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index c8ff4a796..e3bccbd71 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -798,7 +798,8 @@ export const findRouteError = createAction('FIND_ROUTE_ERROR')
 export function findRoute(params) {
   return async function (dispatch, getState) {
     const state = getState()
-    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
+    const { routeId } = params
+    const route = state?.otp?.transitIndex?.routes?.[routeId]
     // This can sometimes result in extra requests, but given that requests are
     // already being sprayed, this is a safe and clean solution for now
     if (!route) {
@@ -891,14 +892,14 @@ export function findRoute(params) {
 
     return dispatch(
       createQueryAction(
-        `index/routes/${params.routeId}`,
+        `index/routes/${routeId}`,
         findRouteResponse,
         findRouteError,
         {
           noThrottle: true,
           postprocess: (payload, dispatch) => {
             // load patterns
-            dispatch(findPatternsForRoute({ routeId: params.routeId }))
+            dispatch(findPatternsForRoute({ routeId }))
           }
         }
       )
@@ -909,7 +910,8 @@ export function findRoute(params) {
 export function findPatternsForRoute(params) {
   return function (dispatch, getState) {
     const state = getState()
-    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
+    const { routeId } = params
+    const route = state?.otp?.transitIndex?.routes?.[routeId]
     // If a route was fetched from GraphQL, it already has patterns
     if (route && route.v2) {
       if (!route.patterns) {
@@ -920,7 +922,7 @@ export function findPatternsForRoute(params) {
 
     return dispatch(
       createQueryAction(
-        `index/routes/${params.routeId}/patterns?includeGeometry=true`,
+        `index/routes/${routeId}/patterns?includeGeometry=true`,
         findPatternsForRouteResponse,
         findPatternsForRouteError,
         {
@@ -934,7 +936,7 @@ export function findPatternsForRoute(params) {
                 dispatch(
                   findGeometryForPattern({
                     patternId: ptn.id,
-                    routeId: params.routeId
+                    routeId
                   })
                 )
               }
@@ -950,7 +952,7 @@ export function findPatternsForRoute(params) {
 
             return {
               patterns,
-              routeId: params.routeId
+              routeId
             }
           }
         }
@@ -977,19 +979,18 @@ export function findGeometryForPattern(params) {
       return
     }
 
+    const { patternId, routeId } = params
     return dispatch(
       createQueryAction(
         `index/patterns/${params.patternId}/geometry`,
         findGeometryForPatternResponse,
         findGeometryForPatternError,
         {
-          rewritePayload: (payload) => {
-            return {
-              geometry: payload,
-              patternId: params.patternId,
-              routeId: params.routeId
-            }
-          }
+          rewritePayload: (payload) => ({
+            geometry: payload,
+            patternId,
+            routeId
+          })
         }
       )
     )
@@ -1013,6 +1014,8 @@ export function findStopsForPattern(params) {
     if (route && route.v2) {
       return
     }
+
+    const { patternId, routeId } = params
     return dispatch(
       createQueryAction(
         `index/patterns/${params.patternId}/stops`,
@@ -1020,13 +1023,11 @@ export function findStopsForPattern(params) {
         findStopsForPatternError,
         {
           noThrottle: true,
-          rewritePayload: (payload) => {
-            return {
-              patternId: params.patternId,
-              routeId: params.routeId,
-              stops: payload
-            }
-          }
+          rewritePayload: (payload) => ({
+            patternId,
+            routeId,
+            stops: payload
+          })
         }
       )
     )
@@ -1195,12 +1196,10 @@ export function getVehiclePositionsForRoute(routeId) {
         receivedVehiclePositions,
         receivedVehiclePositionsError,
         {
-          rewritePayload: (payload) => {
-            return {
-              routeId: routeId,
-              vehicles: payload
-            }
-          }
+          rewritePayload: (payload) => ({
+            routeId,
+            vehicles: payload
+          })
         }
       )
     )
@@ -1341,7 +1340,7 @@ function makeApiUrl(config, endpoint, options) {
   } else {
     const api =
       // v2 is either selected or used when there is no alternative
-      (options.v2 && config.api_v2) || !config.api ? config.api_v2 : config.api
+      (options.v2 && config.api_v2) || config.api || config.api_v2
 
     // Don't crash if no api is defined (such as in the unit test env)
     if (!api?.host) return null
diff --git a/lib/components/map/connected-stops-overlay.js b/lib/components/map/connected-stops-overlay.js
index cacff0ea3..38d217af3 100644
--- a/lib/components/map/connected-stops-overlay.js
+++ b/lib/components/map/connected-stops-overlay.js
@@ -15,9 +15,11 @@ const mapStateToProps = (state, ownProps) => {
   let minZoom = 15
 
   // There are a number of cases when stops within route objects should be shown
-  // although there are no stops from the stops index active
+  // although there are no stops that would otherwise be shown. In this case we need
+  // to override the stops index
   if (routes) {
-    // All cases of stops being force-shown only apply when a route is being actively viewed
+    // All cases of stops being shown even when stops are otherwise hidden
+    // only apply when a route is being actively viewed
     const route = routes?.[viewedRoute?.routeId]
     if (route?.patterns) {
       // If the pattern viewer is active, stops along that pattern should be shown
diff --git a/lib/components/viewers/RouteRow.js b/lib/components/viewers/RouteRow.js
index a789cda46..db9136fc2 100644
--- a/lib/components/viewers/RouteRow.js
+++ b/lib/components/viewers/RouteRow.js
@@ -20,8 +20,8 @@ export const RouteRowButton = styled(Button)`
   align-items: center;
   display: flex;
   padding: 6px;
-  width: 100%;
   transition: all ease-in-out 0.1s;
+  width: 100%;
 `
 
 export const RouteRowElement = styled.span``
@@ -33,8 +33,8 @@ export const OperatorImg = styled.img`
 
 export const ModeIconElement = styled.span`
   display: inline-block;
-  vertical-align: bottom;
   height: 22px;
+  vertical-align: bottom;
 `
 
 const RouteNameElement = styled(Label)`
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 73508cbed..2f92127b0 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -288,7 +288,7 @@ class StopViewer extends Component {
       // If geometries are available (and are not a point) and stop times 
       // are not, it is a strong indication that the stop is a flex stop.
       if (stopData?.geometries?.geoJson?.type !== 'Point') {
-        contents = (<div><FormattedMessage id="components.StopViewer.flexStop" /></div>)
+        contents = <div><FormattedMessage id="components.StopViewer.flexStop" /></div>
       }
     } else if (scheduleView) {
       contents = (

From 15ac1aa9a3ad1922f7207f69dec2ff17da38df07 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 30 Dec 2021 10:54:04 +0100
Subject: [PATCH 081/270] refactor(connected-route-viewer-overlay): avoid crash
 when routeViewer missing from config

---
 lib/components/map/connected-route-viewer-overlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/map/connected-route-viewer-overlay.js b/lib/components/map/connected-route-viewer-overlay.js
index 03cbd0370..a11101a22 100644
--- a/lib/components/map/connected-route-viewer-overlay.js
+++ b/lib/components/map/connected-route-viewer-overlay.js
@@ -21,7 +21,7 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     clipToPatternStops:
-      state.otp.config.routeViewer.hideRouteShapesWithinFlexZones,
+      state.otp.config?.routeViewer?.hideRouteShapesWithinFlexZones,
     routeData: { ...routeData, patterns: filteredPatterns }
   }
 }

From f5cbd05d30f14b1b08358dd2ad37c818783a4970 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 30 Dec 2021 11:06:48 +0100
Subject: [PATCH 082/270] refactor(stop-viewer): don't show flex message during
 stopData load

---
 lib/components/viewers/stop-viewer.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 2f92127b0..1667a96f8 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -285,9 +285,13 @@ class StopViewer extends Component {
           <FormattedMessage id="components.StopViewer.noStopsFound" />
         </div>
       )
-      // If geometries are available (and are not a point) and stop times 
-      // are not, it is a strong indication that the stop is a flex stop.
-      if (stopData?.geometries?.geoJson?.type !== 'Point') {
+      /* If geometries are available (and are not a point) and stop times 
+         are not, it is a strong indication that the stop is a flex stop.
+
+         The extra checks stopData are needed to ensure that the message is 
+         not shown while stopData is loading
+         */
+      if (stopData && stopData.geometries && stopData.geometries.geoJson?.type !== 'Point') {
         contents = <div><FormattedMessage id="components.StopViewer.flexStop" /></div>
       }
     } else if (scheduleView) {

From 9d1dd5b5b35cd24c6e0205d2d0c33c0dac9ac623 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 5 Jan 2022 12:10:49 +0100
Subject: [PATCH 083/270] chore(deps): upgrade otp-ui

---
 package.json |    2 +-
 yarn.lock    | 1171 +++++++-------------------------------------------
 2 files changed, 159 insertions(+), 1014 deletions(-)

diff --git a/package.json b/package.json
index 0d9d81e77..74415c515 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.1.1",
+    "@opentripplanner/route-viewer-overlay": "^1.2.0",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.3.1",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
diff --git a/yarn.lock b/yarn.lock
index 4fdb66764..16b8684b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -419,7 +419,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
+"@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
   integrity sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==
@@ -1401,7 +1401,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.12.6", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.12.6", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
   integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
@@ -2552,13 +2552,14 @@
     "@opentripplanner/humanize-distance" "^1.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.1.1.tgz#41735ce5c021e96a8cd679d57e2772735709e237"
-  integrity sha512-SMzRYuLEbSNuSh7SUr/pRKVP5CqEfapdrQpjRxDHIuPK/RXYI7uu9IhT0+iQH361qP9uMBdlbEwiV2IcZ9Fnjg==
+"@opentripplanner/route-viewer-overlay@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.0.tgz#b1a8954fa9f3cad15f1ee06b665813e8f4539448"
+  integrity sha512-W0jRot7pWWll33NdXDkG/lV+hgVfybqAx1C7at0CcAHTLWk9l92HmPhbXaZExYJYL2ZY9szWvNIAehCmbxIuxQ==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
-    "@opentripplanner/core-utils" "^4.1.0"
+    "@opentripplanner/core-utils" "^4.5.0"
+    point-in-polygon "^1.1.0"
     prop-types "^15.7.2"
 
 "@opentripplanner/stop-viewer-overlay@^1.1.1":
@@ -3162,42 +3163,18 @@
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.15.tgz#2ccfb1ad55a02c83f8e0ad327cbc332f55eb1024"
   integrity sha512-bxlMKPDbY8x5h6HBwVzEOk2C8fb6SLfYQ5Jw3uBYuYF1lfWk/kbLd81la82vrIkBb0l+JdmrZaDikPrNxpS/Ew==
   dependencies:
-    "@typescript-eslint/types" "3.10.1"
-    "@typescript-eslint/visitor-keys" "3.10.1"
-    debug "^4.1.1"
-    glob "^7.1.6"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@types/babel__generator@*":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.3.tgz#f456b4b2ce79137f768aa130d2423d2f0ccfaba5"
-  integrity sha512-/GWCmzJWqV7diQW54smJZzWbSFf4QYtF71WCKhcx6Ru/tFyQIY2eiiITcCAeuPbNSvT9YCGkVMqqvSk2Z0mXiA==
-  dependencies:
-    "@typescript-eslint/types" "4.30.0"
-    "@typescript-eslint/visitor-keys" "4.30.0"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
-"@types/babel__template@*":
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
-  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
 
-"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+"@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
   version "7.14.2"
   resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
   integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
   dependencies:
-    "@typescript-eslint/types" "4.30.0"
-    eslint-visitor-keys "^2.0.0"
+    "@babel/types" "^7.3.0"
 
 "@types/cheerio@^0.22.22":
   version "0.22.30"
@@ -3254,8 +3231,8 @@
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
   dependencies:
-    "@vue/compiler-core" "3.2.6"
-    "@vue/shared" "3.2.6"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
 
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.2"
@@ -3272,8 +3249,7 @@
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
   integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
   dependencies:
-    "@vue/compiler-dom" "3.2.6"
-    "@vue/shared" "3.2.6"
+    "@types/istanbul-lib-coverage" "*"
 
 "@types/istanbul-reports@^1.1.1":
   version "1.1.2"
@@ -3308,10 +3284,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@vue/shared@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.6.tgz#2c22bae88fe2b7b59fa68a9c9c4cd60bae2c1794"
-  integrity sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw==
+"@types/long@^3.0.32":
+  version "3.0.32"
+  resolved "https://registry.yarnpkg.com/@types/long/-/long-3.0.32.tgz#f4e5af31e9e9b196d8e5fca8a5e2e20aa3d60b69"
+  integrity sha512-ZXyOOm83p7X8p3s0IYM3VeueNmHpkk/yMlP8CLeOnEcu6hIwPH7YjZBvhQkR0ZFS2DqZAxKtJ/M5fcuv3OU5BA==
 
 "@types/minimatch@*":
   version "3.0.5"
@@ -3333,10 +3309,10 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@webassemblyjs/helper-buffer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
-  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
 "@types/prettier@^2.0.0", "@types/prettier@^2.1.5":
   version "2.3.2"
@@ -3395,12 +3371,18 @@
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991"
   integrity sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==
   dependencies:
-    "@webassemblyjs/ast" "1.9.0"
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
-"@webassemblyjs/helper-wasm-bytecode@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
-  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+"@types/react@17":
+  version "17.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
 "@types/resolve@0.0.8":
   version "0.0.8"
@@ -3431,12 +3413,10 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
-"@webassemblyjs/leb128@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
-  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
-  dependencies:
-    "@xtuc/long" "4.2.2"
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
@@ -3509,15 +3489,12 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@webassemblyjs/wasm-opt@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
-  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+"@types/yauzl@^2.9.1":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
+  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
   dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@types/node" "*"
 
 "@typescript-eslint/eslint-plugin@^4.28.2", "@typescript-eslint/eslint-plugin@^4.5.0":
   version "4.30.0"
@@ -3625,6 +3602,30 @@
     "@typescript-eslint/types" "4.30.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vue/compiler-core@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.6.tgz#7162bb0670273f04566af0d353009187ab577915"
+  integrity sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@vue/shared" "3.2.6"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz#3764d7fe1a696e39fb2a3c9d638da0749e369b2d"
+  integrity sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==
+  dependencies:
+    "@vue/compiler-core" "3.2.6"
+    "@vue/shared" "3.2.6"
+
+"@vue/shared@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.6.tgz#2c22bae88fe2b7b59fa68a9c9c4cd60bae2c1794"
+  integrity sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -5896,11 +5897,6 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
-  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
-
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
@@ -6791,40 +6787,6 @@ conventional-changelog-angular@^5.0.0:
     compare-func "^2.0.0"
     q "^1.5.1"
 
-conventional-changelog-eslint@^3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-3.0.9.tgz#689bd0a470e02f7baafe21a495880deea18b7cdb"
-  integrity sha512-6NpUCMgU8qmWmyAMSZO5NrRd7rTgErjrm4VASam2u5jrZS0n38V7Y9CzTtLT2qwz5xEChDR4BduoWIr8TfwvXA==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-express@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-2.0.6.tgz#420c9d92a347b72a91544750bffa9387665a6ee8"
-  integrity sha512-SDez2f3iVJw6V563O3pRtNwXtQaSmEfTCaTBPCqn0oG0mfkq0rX4hHBq5P7De2MncoRixrALj3u3oQsNK+Q0pQ==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-jquery@^3.0.11:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-3.0.11.tgz#d142207400f51c9e5bb588596598e24bba8994bf"
-  integrity sha512-x8AWz5/Td55F7+o/9LQ6cQIPwrCjfJQ5Zmfqi8thwUEKHstEn4kTIofXub7plf1xvFA2TqhZlq7fy5OmV6BOMw==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-jshint@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-2.0.9.tgz#f2d7f23e6acd4927a238555d92c09b50fe3852ff"
-  integrity sha512-wMLdaIzq6TNnMHMy31hql02OEQ8nCQfExw1SE0hYL5KvU+JCTuPaDO+7JiogGT2gJAxiUGATdtYYfh+nT+6riA==
-  dependencies:
-    compare-func "^2.0.0"
-    q "^1.5.1"
-
-conventional-changelog-preset-loader@^2.3.4:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
-  integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
-
 conventional-changelog-writer@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.1.0.tgz#1ca7880b75aa28695ad33312a1f2366f4b12659f"
@@ -8831,6 +8793,11 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -9283,11 +9250,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-filter-obj@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
-  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
-
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -9564,13 +9526,6 @@ fromentries@^1.3.2:
   resolved "https://registry.yarnpkg.com/fromentries/-/fromentries-1.3.2.tgz#e4bca6808816bf8f93b52750f1127f5a6fd86e3a"
   integrity sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==
 
-fs-access@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
-  integrity sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=
-  dependencies:
-    null-check "^1.0.0"
-
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -9582,15 +9537,6 @@ fs-extra@8.1.0, fs-extra@^8.1.0:
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
   dependencies:
     graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
-fs-extra@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
@@ -10776,14 +10722,6 @@ is-arguments@^1.0.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-arguments@^1.0.4:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -11099,11 +11037,6 @@ is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
-is-plain-obj@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
-  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
-
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -12036,829 +11969,96 @@ jest-serializer@^26.6.2:
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
   integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
   dependencies:
-    lodash.capitalize "^4.2.1"
-    lodash.escaperegexp "^4.1.2"
-    lodash.isplainobject "^4.0.6"
-    lodash.isstring "^4.0.1"
-    lodash.uniqby "^4.7.0"
-
-istanbul-lib-coverage@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
-  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
 
-istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
-  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+jest-serializer@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.0.6.tgz#93a6c74e0132b81a2d54623251c46c498bb5bec1"
+  integrity sha512-PtGdVK9EGC7dsaziskfqaAPib6wTViY3G8E5wz9tLVPhHyiDNTZn/xjZ4khAw+09QkoOVpn7vF5nPSN6dtBexA==
   dependencies:
-    "@babel/core" "^7.7.5"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.0.0"
-    semver "^6.3.0"
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
 
-istanbul-lib-report@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
-  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+jest-snapshot@^26.6.0, jest-snapshot@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
+  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
   dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    make-dir "^3.0.0"
-    supports-color "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^26.6.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
+    natural-compare "^1.4.0"
+    pretty-format "^26.6.2"
+    semver "^7.3.2"
 
-istanbul-lib-source-maps@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
-  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
+jest-snapshot@^27.1.0:
+  version "27.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.1.0.tgz#2a063ab90064017a7e9302528be7eaea6da12d17"
+  integrity sha512-eaeUBoEjuuRwmiRI51oTldUsKOohB1F6fPqWKKILuDi/CStxzp2IWekVUXbuHHoz5ik33ioJhshiHpgPFbYgcA==
   dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^3.0.0"
-    source-map "^0.6.1"
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/parser" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.1.0"
+    "@jest/types" "^27.1.0"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.1.0"
+    graceful-fs "^4.2.4"
+    jest-diff "^27.1.0"
+    jest-get-type "^27.0.6"
+    jest-haste-map "^27.1.0"
+    jest-matcher-utils "^27.1.0"
+    jest-message-util "^27.1.0"
+    jest-resolve "^27.1.0"
+    jest-util "^27.1.0"
+    natural-compare "^1.4.0"
+    pretty-format "^27.1.0"
+    semver "^7.3.2"
 
-istanbul-reports@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
-  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
-  dependencies:
-    html-escaper "^2.0.0"
-    istanbul-lib-report "^3.0.0"
+jest-transform-stub@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d"
+  integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==
 
-java-properties@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-1.0.2.tgz#ccd1fa73907438a5b5c38982269d0e771fe78211"
-  integrity sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==
+jest-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
+  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    make-dir "^3.0.0"
 
-jest-changed-files@^26.6.2:
+jest-util@^26.6.0, jest-util@^26.6.2:
   version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
-  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
+  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
   dependencies:
     "@jest/types" "^26.6.2"
-    execa "^4.0.0"
-    throat "^5.0.0"
-
-jest-changed-files@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.1.0.tgz#42da6ea00f06274172745729d55f42b60a9dffe0"
-  integrity sha512-eRcb13TfQw0xiV2E98EmiEgs9a5uaBIqJChyl0G7jR9fCIvGjXovnDS6Zbku3joij4tXYcSK4SE1AXqOlUxjWg==
-  dependencies:
-    "@jest/types" "^27.1.0"
-    execa "^5.0.0"
-    throat "^6.0.1"
-
-jest-circus@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-26.6.0.tgz#7d9647b2e7f921181869faae1f90a2629fd70705"
-  integrity sha512-L2/Y9szN6FJPWFK8kzWXwfp+FOR7xq0cUL4lIsdbIdwz3Vh6P1nrpcqOleSzr28zOtSHQNV9Z7Tl+KkuK7t5Ng==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.0"
-    "@jest/test-result" "^26.6.0"
-    "@jest/types" "^26.6.0"
-    "@types/babel__traverse" "^7.0.4"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    expect "^26.6.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^26.6.0"
-    jest-matcher-utils "^26.6.0"
-    jest-message-util "^26.6.0"
-    jest-runner "^26.6.0"
-    jest-runtime "^26.6.0"
-    jest-snapshot "^26.6.0"
-    jest-util "^26.6.0"
-    pretty-format "^26.6.0"
-    stack-utils "^2.0.2"
-    throat "^5.0.0"
-
-jest-circus@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.1.0.tgz#24c280c90a625ea57da20ee231d25b1621979a57"
-  integrity sha512-6FWtHs3nZyZlMBhRf1wvAC5CirnflbGJAY1xssSAnERLiiXQRH+wY2ptBVtXjX4gz4AA2EwRV57b038LmifRbA==
-  dependencies:
-    "@jest/environment" "^27.1.0"
-    "@jest/test-result" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    expect "^27.1.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^27.1.0"
-    jest-matcher-utils "^27.1.0"
-    jest-message-util "^27.1.0"
-    jest-runtime "^27.1.0"
-    jest-snapshot "^27.1.0"
-    jest-util "^27.1.0"
-    pretty-format "^27.1.0"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-    throat "^6.0.1"
-
-jest-cli@^26.6.0:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
-  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
-  dependencies:
-    "@jest/core" "^26.6.3"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    import-local "^3.0.2"
-    is-ci "^2.0.0"
-    jest-config "^26.6.3"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    prompts "^2.0.1"
-    yargs "^15.4.1"
-
-jest-cli@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.1.0.tgz#118438e4d11cf6fb66cb2b2eb5778817eab3daeb"
-  integrity sha512-h6zPUOUu+6oLDrXz0yOWY2YXvBLk8gQinx4HbZ7SF4V3HzasQf+ncoIbKENUMwXyf54/6dBkYXvXJos+gOHYZw==
-  dependencies:
-    "@jest/core" "^27.1.0"
-    "@jest/test-result" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    import-local "^3.0.2"
-    jest-config "^27.1.0"
-    jest-util "^27.1.0"
-    jest-validate "^27.1.0"
-    prompts "^2.0.1"
-    yargs "^16.0.3"
-
-jest-config@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
-  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^26.6.3"
-    "@jest/types" "^26.6.2"
-    babel-jest "^26.6.3"
-    chalk "^4.0.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.1"
-    graceful-fs "^4.2.4"
-    jest-environment-jsdom "^26.6.2"
-    jest-environment-node "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-jasmine2 "^26.6.3"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
-
-jest-config@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.1.0.tgz#e6826e2baaa34c07c3839af86466870e339d9ada"
-  integrity sha512-GMo7f76vMYUA3b3xOdlcKeKQhKcBIgurjERO2hojo0eLkKPGcw7fyIoanH+m6KOP2bLad+fGnF8aWOJYxzNPeg==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    babel-jest "^27.1.0"
-    chalk "^4.0.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.1"
-    graceful-fs "^4.2.4"
-    is-ci "^3.0.0"
-    jest-circus "^27.1.0"
-    jest-environment-jsdom "^27.1.0"
-    jest-environment-node "^27.1.0"
-    jest-get-type "^27.0.6"
-    jest-jasmine2 "^27.1.0"
-    jest-regex-util "^27.0.6"
-    jest-resolve "^27.1.0"
-    jest-runner "^27.1.0"
-    jest-util "^27.1.0"
-    jest-validate "^27.1.0"
-    micromatch "^4.0.4"
-    pretty-format "^27.1.0"
-
-jest-diff@^25.2.1:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
-  integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
-  dependencies:
-    chalk "^3.0.0"
-    diff-sequences "^25.2.6"
-    jest-get-type "^25.2.6"
-    pretty-format "^25.5.0"
-
-jest-diff@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
-  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-diff@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.1.0.tgz#c7033f25add95e2218f3c7f4c3d7b634ab6b3cd2"
-  integrity sha512-rjfopEYl58g/SZTsQFmspBODvMSytL16I+cirnScWTLkQVXYVZfxm78DFfdIIXc05RCYuGjxJqrdyG4PIFzcJg==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^27.0.6"
-    jest-get-type "^27.0.6"
-    pretty-format "^27.1.0"
-
-jest-docblock@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
-  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-docblock@^27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.0.6.tgz#cc78266acf7fe693ca462cbbda0ea4e639e4e5f3"
-  integrity sha512-Fid6dPcjwepTFraz0YxIMCi7dejjJ/KL9FBjPYhBp4Sv1Y9PdhImlKZqYU555BlN4TQKaTc+F2Av1z+anVyGkA==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-each@^26.6.0, jest-each@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
-  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-
-jest-each@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.1.0.tgz#36ac75f7aeecb3b8da2a8e617ccb30a446df408c"
-  integrity sha512-K/cNvQlmDqQMRHF8CaQ0XPzCfjP5HMJc2bIJglrIqI9fjwpNqITle63IWE+wq4p+3v+iBgh7Wq0IdGpLx5xjDg==
-  dependencies:
-    "@jest/types" "^27.1.0"
-    chalk "^4.0.0"
-    jest-get-type "^27.0.6"
-    jest-util "^27.1.0"
-    pretty-format "^27.1.0"
-
-jest-environment-jsdom@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
-  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-    jsdom "^16.4.0"
-
-jest-environment-jsdom@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.1.0.tgz#5fb3eb8a67e02e6cc623640388d5f90e33075f18"
-  integrity sha512-JbwOcOxh/HOtsj56ljeXQCUJr3ivnaIlM45F5NBezFLVYdT91N5UofB1ux2B1CATsQiudcHdgTaeuqGXJqjJYQ==
-  dependencies:
-    "@jest/environment" "^27.1.0"
-    "@jest/fake-timers" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/node" "*"
-    jest-mock "^27.1.0"
-    jest-util "^27.1.0"
-    jsdom "^16.6.0"
-
-jest-environment-node@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
-  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-
-jest-environment-node@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.1.0.tgz#feea6b765f1fd4582284d4f1007df2b0a8d15b7f"
-  integrity sha512-JIyJ8H3wVyM4YCXp7njbjs0dIT87yhGlrXCXhDKNIg1OjurXr6X38yocnnbXvvNyqVTqSI4M9l+YfPKueqL1lw==
-  dependencies:
-    "@jest/environment" "^27.1.0"
-    "@jest/fake-timers" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/node" "*"
-    jest-mock "^27.1.0"
-    jest-util "^27.1.0"
-
-jest-get-type@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
-  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
-
-jest-get-type@^26.3.0:
-  version "26.3.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
-  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
-
-jest-get-type@^27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.0.6.tgz#0eb5c7f755854279ce9b68a9f1a4122f69047cfe"
-  integrity sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg==
-
-jest-haste-map@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
-  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/graceful-fs" "^4.1.2"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-regex-util "^26.0.0"
-    jest-serializer "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    sane "^4.0.3"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.1.2"
-
-jest-haste-map@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.1.0.tgz#a39f456823bd6a74e3c86ad25f6fa870428326bf"
-  integrity sha512-7mz6LopSe+eA6cTFMf10OfLLqRoIPvmMyz5/OnSXnHO7hB0aDP1iIeLWCXzAcYU5eIJVpHr12Bk9yyq2fTW9vg==
-  dependencies:
-    "@jest/types" "^27.1.0"
-    "@types/graceful-fs" "^4.1.2"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-regex-util "^27.0.6"
-    jest-serializer "^27.0.6"
-    jest-util "^27.1.0"
-    jest-worker "^27.1.0"
-    micromatch "^4.0.4"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
-jest-jasmine2@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
-  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    expect "^26.6.2"
-    is-generator-fn "^2.0.0"
-    jest-each "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-    throat "^5.0.0"
-
-jest-jasmine2@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.1.0.tgz#324a3de0b2ee20d238b2b5b844acc4571331a206"
-  integrity sha512-Z/NIt0wBDg3przOW2FCWtYjMn3Ip68t0SL60agD/e67jlhTyV3PIF8IzT9ecwqFbeuUSO2OT8WeJgHcalDGFzQ==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^27.1.0"
-    "@jest/source-map" "^27.0.6"
-    "@jest/test-result" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    expect "^27.1.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^27.1.0"
-    jest-matcher-utils "^27.1.0"
-    jest-message-util "^27.1.0"
-    jest-runtime "^27.1.0"
-    jest-snapshot "^27.1.0"
-    jest-util "^27.1.0"
-    pretty-format "^27.1.0"
-    throat "^6.0.1"
-
-jest-leak-detector@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
-  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
-  dependencies:
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-leak-detector@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.1.0.tgz#fe7eb633c851e06280ec4dd248067fe232c00a79"
-  integrity sha512-oHvSkz1E80VyeTKBvZNnw576qU+cVqRXUD3/wKXh1zpaki47Qty2xeHg2HKie9Hqcd2l4XwircgNOWb/NiGqdA==
-  dependencies:
-    jest-get-type "^27.0.6"
-    pretty-format "^27.1.0"
-
-jest-matcher-utils@^26.6.0, jest-matcher-utils@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
-  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-matcher-utils@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.1.0.tgz#68afda0885db1f0b9472ce98dc4c535080785301"
-  integrity sha512-VmAudus2P6Yt/JVBRdTPFhUzlIN8DYJd+et5Rd9QDsO/Z82Z4iwGjo43U8Z+PTiz8CBvKvlb6Fh3oKy39hykkQ==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^27.1.0"
-    jest-get-type "^27.0.6"
-    pretty-format "^27.1.0"
-
-jest-message-util@^25.5.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.5.0.tgz#ea11d93204cc7ae97456e1d8716251185b8880ea"
-  integrity sha512-ezddz3YCT/LT0SKAmylVyWWIGYoKHOFOFXx3/nA4m794lfVUskMcwhip6vTgdVrOtYdjeQeis2ypzes9mZb4EA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^25.5.0"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^3.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.2"
-    slash "^3.0.0"
-    stack-utils "^1.0.1"
-
-jest-message-util@^26.6.0, jest-message-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
-  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^26.6.2"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
-    slash "^3.0.0"
-    stack-utils "^2.0.2"
-
-jest-message-util@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.1.0.tgz#e77692c84945d1d10ef00afdfd3d2c20bd8fb468"
-  integrity sha512-Eck8NFnJ5Sg36R9XguD65cf2D5+McC+NF5GIdEninoabcuoOfWrID5qJhufq5FB0DRKoiyxB61hS7MKoMD0trQ==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^27.1.0"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.4"
-    pretty-format "^27.1.0"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-
-jest-mock@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
-  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-
-jest-mock@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.1.0.tgz#7ca6e4d09375c071661642d1c14c4711f3ab4b4f"
-  integrity sha512-iT3/Yhu7DwAg/0HvvLCqLvrTKTRMyJlrrfJYWzuLSf9RCAxBoIXN3HoymZxMnYsC3eD8ewGbUa9jUknwBenx2w==
-  dependencies:
-    "@jest/types" "^27.1.0"
-    "@types/node" "*"
-
-jest-pnp-resolver@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
-  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
-
-jest-regex-util@^25.2.1:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
-  integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
-
-jest-regex-util@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
-  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
-
-jest-regex-util@^27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5"
-  integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==
-
-jest-resolve-dependencies@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
-  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-snapshot "^26.6.2"
-
-jest-resolve-dependencies@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.1.0.tgz#d32ea4a2c82f76410f6157d0ec6cde24fbff2317"
-  integrity sha512-Kq5XuDAELuBnrERrjFYEzu/A+i2W7l9HnPWqZEeKGEQ7m1R+6ndMbdXCVCx29Se1qwLZLgvoXwinB3SPIaitMQ==
-  dependencies:
-    "@jest/types" "^27.1.0"
-    jest-regex-util "^27.0.6"
-    jest-snapshot "^27.1.0"
-
-jest-resolve@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.0.tgz#070fe7159af87b03e50f52ea5e17ee95bbee40e1"
-  integrity sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==
-  dependencies:
-    "@jest/types" "^26.6.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.0"
-    read-pkg-up "^7.0.1"
-    resolve "^1.17.0"
-    slash "^3.0.0"
-
-jest-resolve@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
-  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.2"
-    read-pkg-up "^7.0.1"
-    resolve "^1.18.1"
-    slash "^3.0.0"
-
-jest-resolve@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.1.0.tgz#bb22303c9e240cccdda28562e3c6fbcc6a23ac86"
-  integrity sha512-TXvzrLyPg0vLOwcWX38ZGYeEztSEmW+cQQKqc4HKDUwun31wsBXwotRlUz4/AYU/Fq4GhbMd/ileIWZEtcdmIA==
-  dependencies:
-    "@jest/types" "^27.1.0"
-    chalk "^4.0.0"
-    escalade "^3.1.1"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^27.1.0"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^27.1.0"
-    jest-validate "^27.1.0"
-    resolve "^1.20.0"
-    slash "^3.0.0"
-
-jest-runner@^26.6.0, jest-runner@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
-  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    emittery "^0.7.1"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-docblock "^26.0.0"
-    jest-haste-map "^26.6.2"
-    jest-leak-detector "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    source-map-support "^0.5.6"
-    throat "^5.0.0"
-
-jest-runner@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.1.0.tgz#1b28d114fb3b67407b8354c9385d47395e8ff83f"
-  integrity sha512-ZWPKr9M5w5gDplz1KsJ6iRmQaDT/yyAFLf18fKbb/+BLWsR1sCNC2wMT0H7pP3gDcBz0qZ6aJraSYUNAGSJGaw==
-  dependencies:
-    "@jest/console" "^27.1.0"
-    "@jest/environment" "^27.1.0"
-    "@jest/test-result" "^27.1.0"
-    "@jest/transform" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    emittery "^0.8.1"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-docblock "^27.0.6"
-    jest-environment-jsdom "^27.1.0"
-    jest-environment-node "^27.1.0"
-    jest-haste-map "^27.1.0"
-    jest-leak-detector "^27.1.0"
-    jest-message-util "^27.1.0"
-    jest-resolve "^27.1.0"
-    jest-runtime "^27.1.0"
-    jest-util "^27.1.0"
-    jest-worker "^27.1.0"
-    source-map-support "^0.5.6"
-    throat "^6.0.1"
-
-jest-runtime@^26.6.0, jest-runtime@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
-  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/globals" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-    cjs-module-lexer "^0.6.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-    yargs "^15.4.1"
-
-jest-runtime@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.1.0.tgz#1a98d984ffebc16a0b4f9eaad8ab47c00a750cf5"
-  integrity sha512-okiR2cpGjY0RkWmUGGado6ETpFOi9oG3yV0CioYdoktkVxy5Hv0WRLWnJFuArSYS8cHMCNcceUUMGiIfgxCO9A==
-  dependencies:
-    "@jest/console" "^27.1.0"
-    "@jest/environment" "^27.1.0"
-    "@jest/fake-timers" "^27.1.0"
-    "@jest/globals" "^27.1.0"
-    "@jest/source-map" "^27.0.6"
-    "@jest/test-result" "^27.1.0"
-    "@jest/transform" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/yargs" "^16.0.0"
-    chalk "^4.0.0"
-    cjs-module-lexer "^1.0.0"
-    collect-v8-coverage "^1.0.0"
-    execa "^5.0.0"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^27.1.0"
-    jest-message-util "^27.1.0"
-    jest-mock "^27.1.0"
-    jest-regex-util "^27.0.6"
-    jest-resolve "^27.1.0"
-    jest-snapshot "^27.1.0"
-    jest-util "^27.1.0"
-    jest-validate "^27.1.0"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-    yargs "^16.0.3"
-
-jest-serializer@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
-  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
-  dependencies:
-    "@types/node" "*"
-    graceful-fs "^4.2.4"
-
-jest-serializer@^27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.0.6.tgz#93a6c74e0132b81a2d54623251c46c498bb5bec1"
-  integrity sha512-PtGdVK9EGC7dsaziskfqaAPib6wTViY3G8E5wz9tLVPhHyiDNTZn/xjZ4khAw+09QkoOVpn7vF5nPSN6dtBexA==
-  dependencies:
-    "@types/node" "*"
-    graceful-fs "^4.2.4"
-
-jest-snapshot@^26.6.0, jest-snapshot@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
-  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
-  dependencies:
-    "@babel/types" "^7.0.0"
-    "@jest/types" "^26.6.2"
-    "@types/babel__traverse" "^7.0.4"
-    "@types/prettier" "^2.0.0"
-    chalk "^4.0.0"
-    expect "^26.6.2"
-    graceful-fs "^4.2.4"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-haste-map "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
-    natural-compare "^1.4.0"
-    pretty-format "^26.6.2"
-    semver "^7.3.2"
-
-jest-snapshot@^27.1.0:
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.1.0.tgz#2a063ab90064017a7e9302528be7eaea6da12d17"
-  integrity sha512-eaeUBoEjuuRwmiRI51oTldUsKOohB1F6fPqWKKILuDi/CStxzp2IWekVUXbuHHoz5ik33ioJhshiHpgPFbYgcA==
-  dependencies:
-    "@babel/core" "^7.7.2"
-    "@babel/generator" "^7.7.2"
-    "@babel/parser" "^7.7.2"
-    "@babel/plugin-syntax-typescript" "^7.7.2"
-    "@babel/traverse" "^7.7.2"
-    "@babel/types" "^7.0.0"
-    "@jest/transform" "^27.1.0"
-    "@jest/types" "^27.1.0"
-    "@types/babel__traverse" "^7.0.4"
-    "@types/prettier" "^2.1.5"
-    babel-preset-current-node-syntax "^1.0.0"
-    chalk "^4.0.0"
-    expect "^27.1.0"
-    graceful-fs "^4.2.4"
-    jest-diff "^27.1.0"
-    jest-get-type "^27.0.6"
-    jest-haste-map "^27.1.0"
-    jest-matcher-utils "^27.1.0"
-    jest-message-util "^27.1.0"
-    jest-resolve "^27.1.0"
-    jest-util "^27.1.0"
-    natural-compare "^1.4.0"
-    pretty-format "^27.1.0"
-    semver "^7.3.2"
-
-jest-transform-stub@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d"
-  integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==
-
-jest-util@^25.5.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
-  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
-  dependencies:
-    "@jest/types" "^25.5.0"
-    chalk "^3.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    make-dir "^3.0.0"
-
-jest-util@^26.6.0, jest-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    micromatch "^4.0.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
 
 jest-util@^27.0.0, jest-util@^27.1.0:
   version "27.1.0"
@@ -13633,11 +12833,6 @@ lodash.camelcase@^3.0.1:
   dependencies:
     lodash._createcompounder "^3.0.0"
 
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
-
 lodash.capitalize@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
@@ -14077,23 +13272,6 @@ meow@^6.1.1:
     type-fest "^0.13.1"
     yargs-parser "^18.1.3"
 
-meow@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-7.1.1.tgz#7c01595e3d337fcb0ec4e8eed1666ea95903d306"
-  integrity sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    camelcase-keys "^6.2.2"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "4.1.0"
-    normalize-package-data "^2.5.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.13.1"
-    yargs-parser "^18.1.3"
-
 meow@^8.0.0:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
@@ -14464,24 +13642,6 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
-ms@^2.0.0, ms@^2.1.1, ms@^2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
-multicast-dns-service-types@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
-  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
-
-multicast-dns@^6.0.1:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
-  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
-  dependencies:
-    dns-packet "^1.3.1"
-    thunky "^1.0.2"
-
 mute-stream@0.0.7, mute-stream@~0.0.4:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -15732,6 +14892,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+point-in-polygon@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/point-in-polygon/-/point-in-polygon-1.1.0.tgz#b0af2616c01bdee341cbf2894df643387ca03357"
+  integrity sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -16843,21 +16008,6 @@ prompts@2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-promise@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
-  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
-  dependencies:
-    asap "~2.0.6"
-
-prompts@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
-  integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.5"
-
 prompts@^2.0.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
@@ -21369,8 +20519,3 @@ yup@^0.29.3:
     property-expr "^2.0.2"
     synchronous-promise "^2.0.13"
     toposort "^2.0.2"
-
-zwitch@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
-  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==

From 4d9c80ffab393628a577f6109987a944aafc8cf9 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 5 Jan 2022 12:22:09 +0100
Subject: [PATCH 084/270] chore(deps): upgrade otp-ui

---
 package.json |  4 ++--
 yarn.lock    | 34 ++++++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 0afe9cf68..8494d6c0e 100644
--- a/package.json
+++ b/package.json
@@ -33,14 +33,14 @@
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",
     "@opentripplanner/base-map": "^2.0.0",
-    "@opentripplanner/core-utils": "^4.6.0",
+    "@opentripplanner/core-utils": "^4.7.0",
     "@opentripplanner/endpoints-overlay": "^1.3.0",
     "@opentripplanner/from-to-location-picker": "^1.3.0",
     "@opentripplanner/geocoder": "^1.1.1",
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
     "@opentripplanner/itinerary-body": "^2.7.0",
-    "@opentripplanner/location-field": "^1.8.0",
+    "@opentripplanner/location-field": "^1.11.1",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
diff --git a/yarn.lock b/yarn.lock
index 2a6c9a3b2..e2c871bc7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2429,7 +2429,7 @@
     "@opentripplanner/core-utils" "^4.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/core-utils@^4.1.0", "@opentripplanner/core-utils@^4.2.0":
+"@opentripplanner/core-utils@^4.1.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.4.0.tgz#3eb8f9718d32ce50e3b79d975d682559c5a7b0bf"
   integrity sha512-qCd+NXa0PxwcN2DFR0HX1u/76RzQwHe2r0VGcaOS4GxvQ5HEL4zPyaT+lkxAyE6AFQAvNynyofhxlnMwbxtqEA==
@@ -2447,7 +2447,7 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/core-utils@^4.5.0", "@opentripplanner/core-utils@^4.6.0":
+"@opentripplanner/core-utils@^4.5.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.6.0.tgz#f0f9924a2312b89a3f84d0a34c1a2d9f6c1ca615"
   integrity sha512-LQs8BrwqFXKHJOgRduKic9wEGqnNAcyrypTgKmx//Jzz6OmZyXNskrFNJwLR6HIgsps7isN/7hi3NuVFticgIA==
@@ -2465,6 +2465,24 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
+"@opentripplanner/core-utils@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.7.0.tgz#0a59f26344702e6a9b45f977c338c58d1773dc45"
+  integrity sha512-YqGbIG1vnZSaBsZO3ss0IZ16Tdx6Ze29iHOVO+kC3Plqu7HPv7/lhzA/3qCqlTLwNp+rkfsDlv06H/Gqr1mjHg==
+  dependencies:
+    "@mapbox/polyline" "^1.1.0"
+    "@opentripplanner/geocoder" "^1.1.2"
+    "@styled-icons/foundation" "^10.34.0"
+    "@turf/along" "^6.0.1"
+    bowser "^2.7.0"
+    date-fns "^2.23.0"
+    date-fns-tz "^1.1.4"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+    moment "^2.24.0"
+    prop-types "^15.7.2"
+    qs "^6.9.1"
+
 "@opentripplanner/endpoints-overlay@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-1.3.0.tgz#cda25f81963d28a0580d4737f82798de2a143904"
@@ -2532,14 +2550,14 @@
     react-resize-detector "^4.2.1"
     velocity-react "^1.4.3"
 
-"@opentripplanner/location-field@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.8.0.tgz#a210c9b7fbddd7a503b1077bdfbcfdd3c1dca579"
-  integrity sha512-0CKWy9kV/odd0mpSSCPm+F/XinYkus5xUHXsBjKcN4Fc5y+uA9mR9pfXaL7ztNARbdQMWwtPhenzsO+qae8D/Q==
+"@opentripplanner/location-field@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.11.1.tgz#78ed05d1191f2aed3a7253841627ed39c2425575"
+  integrity sha512-zVBSp9K693UJZrU0yLUqGsZHIBGQv0Y9VTKPYzHtBOrLjV6rnbAClRFWzl75eVXL/OIP0uf79SagAinePRwfWA==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@opentripplanner/core-utils" "^4.2.0"
-    "@opentripplanner/geocoder" "^1.1.1"
+    "@opentripplanner/core-utils" "^4.5.0"
+    "@opentripplanner/geocoder" "^1.1.2"
     "@opentripplanner/humanize-distance" "^1.1.0"
     "@opentripplanner/location-icon" "^1.4.0"
     "@styled-icons/fa-solid" "^10.34.0"

From 37d101343a032a8b8e75c7e31280bd5145124e4d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 7 Jan 2022 13:08:14 +0100
Subject: [PATCH 085/270] refactor(actions/api): merge headers to support
 graphql calls with API key headers

---
 lib/actions/api.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index e3bccbd71..f7ca133ca 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -1283,9 +1283,16 @@ function createQueryAction(
 
     let payload
     try {
+      // Need to merge headers to support graphQL POST request with an api key
+      const mergedHeaders = {
+        ...getOtpFetchOptions(state)?.headers,
+        ...options.fetchOptions?.headers
+      }
+
       const response = await fetch(url, {
         ...getOtpFetchOptions(state),
-        ...options.fetchOptions
+        ...options.fetchOptions,
+        headers: mergedHeaders
       })
       if (response.status >= 400) {
         // If a second endpoint is configured, try that before failing

From 80e514b7a4134c60600fd3a92b8b48474c920f66 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 7 Jan 2022 18:38:11 +0100
Subject: [PATCH 086/270] refactor(actions/api): correctly use v2 server as v1
 failover

---
 lib/actions/api.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index f7ca133ca..168a5e749 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -383,11 +383,17 @@ export function vehicleRentalQuery(
 const findStopResponse = createAction('FIND_STOP_RESPONSE')
 const findStopError = createAction('FIND_STOP_ERROR')
 
+// Finds a stop using the v1 endpoint, and retries using the v2 endpoint if that fails.
+// We can't check for the v2 flag on a stop because we don't have the entire stop object
 export function findStop(params) {
   return createQueryAction(
     `index/stops/${params.stopId}`,
     findStopResponse,
-    findStopError,
+    () => {
+      // The error doesn't have to be fired since the graphql fetch
+      // also returns an error
+      return fetchGraphQLOnlyStopInfo(params.stopId)
+    },
     {
       noThrottle: true,
       postprocess: (payload, dispatch) => {
@@ -400,6 +406,9 @@ export function findStop(params) {
 }
 
 export function fetchStopInfo(stop) {
+  if (stop.v2) {
+    return fetchGraphQLOnlyStopInfo(stop)
+  }
   return async function (dispatch, getState) {
     await dispatch(findStop({ stopId: stop.stopId }))
     const state = getState()
@@ -465,7 +474,7 @@ export function fetchGraphQLOnlyStopInfo(stopId) {
         }
         const { stop } = payload.data
         const color = stop.routes?.length > 0 && `#${stop.routes[0].color}`
-        return { ...stop, color }
+        return { ...stop, color, v2: true }
       }
     }
   )
@@ -873,7 +882,7 @@ export function findRoute(params) {
                   const color =
                     stop.routes?.length > 0 && `#${stop.routes[0].color}`
                   if (stop.routes) delete stop.routes
-                  return { ...stop, color }
+                  return { ...stop, color, v2: true }
                 })
                 routePatterns[pattern.id] = {
                   ...pattern,
@@ -1295,21 +1304,21 @@ function createQueryAction(
         headers: mergedHeaders
       })
       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
       }
       payload = await response.json()
     } catch (err) {
+      // 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
+          })
+        )
+      }
       return dispatch(errorAction(err))
     }
 

From 01ca5af6312adc2a4bd0a3e854c655d2fa378767 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 7 Jan 2022 15:48:19 -0500
Subject: [PATCH 087/270] fix(CallTakerPanel): Add lost narrative scrolling
 feature.

---
 lib/components/app/call-taker-panel.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index cd196bc2f..22b5733fa 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -287,10 +287,17 @@ class CallTakerPanel extends Component {
             <UserSettings />
           )}
           <div className="desktop-narrative-container">
+            {/* FIXME: Achieve this partially scrolling layout as below
+                without using absolute positioning and by sharing styles with BatchRoutingPanel. */}
             <NarrativeItineraries
               containerStyle={{
+                bottom: '0',
                 display: 'flex',
-                flexDirection: 'column'
+                flexDirection: 'column',
+                left: '0',
+                position: 'absolute',
+                right: '0',
+                top: '210px'
               }}
             />
           </div>

From f6b9f7143137f4384601e0e4fb84dff1b8e661ed Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 11 Jan 2022 15:59:37 -0500
Subject: [PATCH 088/270] fix(call taker DateTimeOptions): Fix frozen time
 input.

---
 .../form/call-taker/date-time-options.js      | 106 ++++++++++--------
 1 file changed, 58 insertions(+), 48 deletions(-)

diff --git a/lib/components/form/call-taker/date-time-options.js b/lib/components/form/call-taker/date-time-options.js
index 4a469dee5..c4dba40ef 100644
--- a/lib/components/form/call-taker/date-time-options.js
+++ b/lib/components/form/call-taker/date-time-options.js
@@ -1,27 +1,30 @@
+/* eslint-disable react/prop-types */
+import { injectIntl } from 'react-intl'
 import {
   OTP_API_DATE_FORMAT,
   OTP_API_TIME_FORMAT
 } from '@opentripplanner/core-utils/lib/time'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import moment from 'moment'
 import React, { Component } from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { injectIntl } from 'react-intl'
 
-const departureOptions = [
-  {
-    // Default option.
-    childMessageId: 'components.DateTimeOptions.now',
-    value: 'NOW'
-  },
-  {
-    childMessageId: 'components.DateTimeOptions.departAt',
-    value: 'DEPART'
-  },
-  {
-    childMessageId: 'components.DateTimeOptions.arriveBy',
-    value: 'ARRIVE'
-  }
-]
+function getDepartureOptions(intl) {
+  return [
+    {
+      // Default option.
+      text: intl.formatMessage({ id: 'components.DateTimeOptions.now' }),
+      value: 'NOW'
+    },
+    {
+      text: intl.formatMessage({ id: 'components.DateTimeOptions.departAt' }),
+      value: 'DEPART'
+    },
+    {
+      text: intl.formatMessage({ id: 'components.DateTimeOptions.arriveBy' }),
+      value: 'ARRIVE'
+    }
+  ]
+}
 
 /**
  * Time formats passed to moment.js used to parse the user's time input.
@@ -38,14 +41,14 @@ const SUPPORTED_TIME_FORMATS = [
   'ha',
   'h',
   'HH:mm'
-].map(format => `YYYY-MM-DDT${format}`)
+].map((format) => `YYYY-MM-DDT${format}`)
 
 /**
  * Convert input moment object to date/time query params in OTP API format.
  * @param  {[type]} [time=moment(] [description]
  * @return {[type]}                [description]
  */
-function momentToQueryParams (time = moment()) {
+function momentToQueryParams(time = moment()) {
   return {
     date: time.format(OTP_API_DATE_FORMAT),
     time: time.format(OTP_API_TIME_FORMAT)
@@ -70,18 +73,18 @@ class DateTimeOptions extends Component {
     timeInput: ''
   }
 
-  componentDidMount () {
+  componentDidMount() {
     if (this.props.departArrive === 'NOW') {
       this._startAutoRefresh()
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this._stopAutoRefresh()
   }
 
-  componentDidUpdate (prevProps) {
-    const {date, departArrive, time} = this.props
+  componentDidUpdate(prevProps) {
+    const { date, departArrive, time } = this.props
     const dateTime = this.dateTimeAsMoment()
     const parsedTime = this.parseInputAsTime(this.state.timeInput, date)
     // Update time input if time changes and the parsed time does not match what
@@ -100,7 +103,7 @@ class DateTimeOptions extends Component {
   _updateTimeInput = (time = moment()) =>
     // If auto-updating time input (for leave now), use short 24-hr format to
     // avoid writing a value that is too long for the time input's width.
-    this.setState({timeInput: time.format('H:mm')})
+    this.setState({ timeInput: time.format('H:mm') })
 
   _startAutoRefresh = () => {
     const timer = window.setInterval(this._refreshDateTime, 1000)
@@ -109,7 +112,7 @@ class DateTimeOptions extends Component {
 
   _stopAutoRefresh = () => {
     window.clearInterval(this.state.timer)
-    this.setState({timer: null})
+    this.setState({ timer: null })
   }
 
   _refreshDateTime = () => {
@@ -122,8 +125,8 @@ class DateTimeOptions extends Component {
     }
   }
 
-  _setDepartArrive = evt => {
-    const {value: departArrive} = evt.target
+  _setDepartArrive = (evt) => {
+    const { value: departArrive } = evt.target
     if (departArrive === 'NOW') {
       const now = moment()
       // If setting to leave now, update date/time and start auto refresh to keep
@@ -142,14 +145,15 @@ class DateTimeOptions extends Component {
     }
   }
 
-  handleDateChange = evt => this.handleDateTimeChange({ date: evt.target.value })
+  handleDateChange = (evt) =>
+    this.handleDateTimeChange({ date: evt.target.value })
 
   /**
    * Handler that should be used when date or time is manually updated. This
    * will also update the departArrive value if need be.
    */
-  handleDateTimeChange = params => {
-    const {departArrive: prevDepartArrive} = this.props
+  handleDateTimeChange = (params) => {
+    const { departArrive: prevDepartArrive } = this.props
     // If previously set to leave now, change to depart at when time changes.
     if (prevDepartArrive === 'NOW') params.departArrive = 'DEPART'
     this.props.setQueryParam(params)
@@ -158,25 +162,28 @@ class DateTimeOptions extends Component {
   /**
    * Select input string when time input is focused by user (for quick changes).
    */
-  handleTimeFocus = evt => evt.target.select()
+  handleTimeFocus = (evt) => evt.target.select()
 
-  parseInputAsTime = (timeInput, date = moment().startOf('day').format('YYYY-MM-DD')) => {
+  parseInputAsTime = (
+    timeInput,
+    date = moment().startOf('day').format('YYYY-MM-DD')
+  ) => {
     return moment(date + 'T' + timeInput, SUPPORTED_TIME_FORMATS)
   }
 
   dateTimeAsMoment = () => moment(`${this.props.date}T${this.props.time}`)
 
-  handleTimeChange = evt => {
+  handleTimeChange = (evt) => {
     if (this.state.timer) this._stopAutoRefresh()
     const timeInput = evt.target.value
     const parsedTime = this.parseInputAsTime(timeInput)
     this.handleDateTimeChange({ time: parsedTime.format(OTP_API_TIME_FORMAT) })
-    this.setState({timeInput})
+    this.setState({ timeInput })
   }
 
-  render () {
-    const {departArrive, intl, onKeyDown} = this.props
-    const {timeInput} = this.state
+  render() {
+    const { departArrive, intl, onKeyDown } = this.props
+    const { timeInput } = this.state
     const dateTime = this.dateTimeAsMoment()
     return (
       <>
@@ -186,15 +193,21 @@ class DateTimeOptions extends Component {
           onKeyDown={onKeyDown}
           value={departArrive}
         >
-          {departureOptions.map(o => <option key={o.value}>{intl.formatMessage({id: o.childMessageId})}</option>)}
+          {getDepartureOptions(intl).map(({ text, value }) => (
+            <option key={value} value={value}>
+              {text}
+            </option>
+          ))}
         </select>
         <OverlayTrigger
-          overlay={<Tooltip id='time-tooltip'>{intl.formatTime(dateTime.unix())}</Tooltip>}
-          placement='bottom'
+          overlay={
+            <Tooltip id="time-tooltip">{intl.formatTime(dateTime)}</Tooltip>
+          }
+          placement="bottom"
           trigger={['focus', 'hover']}
         >
           <input
-            className='datetime-slim'
+            className="datetime-slim"
             onChange={this.handleTimeChange}
             onFocus={this.handleTimeFocus}
             onKeyDown={onKeyDown}
@@ -205,15 +218,12 @@ class DateTimeOptions extends Component {
               padding: '0px',
               width: '50px'
             }}
-            value={timeInput
-              ? intl.formatTime(
-                this.parseInputAsTime(timeInput).unix()
-              )
-              : intl.formatTime(dateTime.unix())}
+            // Don't use intl.formatTime, so that users can enter time in 12hr or 24hr format at their leisure.
+            value={timeInput || dateTime.format('H:mm')}
           />
         </OverlayTrigger>
         <input
-          className='datetime-slim'
+          className="datetime-slim"
           onChange={this.handleDateChange}
           onKeyDown={onKeyDown}
           style={{
@@ -222,7 +232,7 @@ class DateTimeOptions extends Component {
             outline: 'none',
             width: '109px'
           }}
-          type='date'
+          type="date"
           value={dateTime.format('YYYY-MM-DD')}
         />
       </>

From 82e62f08d89160bb9a5ce2e9c5854cb7b5fc8865 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 11 Jan 2022 17:17:43 -0500
Subject: [PATCH 089/270] fix(calltaker AdvancedOptions): Fix route display in
 preferred/banned routes.

---
 lib/components/app/call-taker-panel.js        |   3 +-
 .../form/call-taker/advanced-options.js       | 147 +++++++++++-------
 lib/components/viewers/route-viewer.js        | 102 ++++++------
 package.json                                  |   1 +
 yarn.lock                                     |  69 ++++----
 5 files changed, 184 insertions(+), 138 deletions(-)

diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index cd196bc2f..164b2a63d 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -15,6 +15,7 @@ import * as formActions from '../../actions/form'
 import {
   getActiveSearch,
   getShowUserSettings,
+  getSortedFilteredRoutes,
   hasValidLocation
 } from '../../util/state'
 import { getGroupSize } from '../../util/call-taker'
@@ -313,7 +314,7 @@ const mapStateToProps = (state) => {
     mainPanelContent: state.otp.ui.mainPanelContent,
     maxGroupSize: getGroupSize(request),
     modes: state.otp.config.modes,
-    routes: state.otp.transitIndex.routes,
+    routes: getSortedFilteredRoutes(state),
     showUserSettings,
     timeFormat: getTimeFormat(state.otp.config)
   }
diff --git a/lib/components/form/call-taker/advanced-options.js b/lib/components/form/call-taker/advanced-options.js
index d74d809d6..0bbb19757 100644
--- a/lib/components/form/call-taker/advanced-options.js
+++ b/lib/components/form/call-taker/advanced-options.js
@@ -1,15 +1,17 @@
+/* eslint-disable react/prop-types */
 // FIXME: Remove the following eslint rule exception.
 /* eslint-disable jsx-a11y/label-has-for */
-import { hasBike } from '@opentripplanner/core-utils/lib/itinerary'
-import {SubmodeSelector} from '@opentripplanner/trip-form'
 import * as TripFormClasses from '@opentripplanner/trip-form/lib/styled'
-import React, { Component } from 'react'
 import { FormattedMessage, injectIntl } from 'react-intl'
+import { hasBike } from '@opentripplanner/core-utils/lib/itinerary'
+import { SubmodeSelector } from '@opentripplanner/trip-form'
+import isEmpty from 'lodash.isempty'
+import React, { Component } from 'react'
 import Select from 'react-select'
 import styled from 'styled-components'
 
-import { modeButtonButtonCss } from '../styled'
 import { ComponentContext } from '../../../util/contexts'
+import { modeButtonButtonCss } from '../styled'
 
 export const StyledSubmodeSelector = styled(SubmodeSelector)`
   ${TripFormClasses.SubmodeSelector.Row} {
@@ -32,73 +34,75 @@ export const StyledSubmodeSelector = styled(SubmodeSelector)`
   }
 
   ${TripFormClasses.SubmodeSelector} {
-      ${modeButtonButtonCss}
+    ${modeButtonButtonCss}
   }
 `
 
-const metersToMiles = meters => Math.round(meters * 0.000621371 * 100) / 100
-const milesToMeters = miles => miles / 0.000621371
+const metersToMiles = (meters) => Math.round(meters * 0.000621371 * 100) / 100
+const milesToMeters = (miles) => miles / 0.000621371
 
 class AdvancedOptions extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.state = {
       expandAdvanced: props.expandAdvanced,
       routeOptions: [],
-      transitModes: props.modes.transitModes.map(m => m.mode)
+      transitModes: props.modes.transitModes.map((m) => m.mode)
     }
   }
 
   static contextType = ComponentContext
 
-  componentDidMount () {
+  componentDidMount() {
     // Fetch routes for banned/preferred routes selectors.
     this.props.findRoutes()
   }
 
-  componentDidUpdate (prevProps) {
-    const {routes} = this.props
+  componentDidUpdate(prevProps) {
+    const { routes } = this.props
     // Once routes are available, map them to the route options format.
-    if (routes && !prevProps.routes) {
+    if (!isEmpty(routes) && isEmpty(prevProps.routes)) {
       const routeOptions = Object.values(routes).map(this.routeToOption)
-      this.setState({routeOptions})
+      this.setState({ routeOptions })
     }
   }
 
-  _setBannedRoutes = options => {
-    const bannedRoutes = options ? options.map(o => o.value).join(',') : ''
+  _setBannedRoutes = (options) => {
+    const bannedRoutes = options ? options.map((o) => o.value).join(',') : ''
     this.props.setQueryParam({ bannedRoutes })
   }
 
-  _setPreferredRoutes = options => {
-    const preferredRoutes = options ? options.map(o => (o.value)).join(',') : ''
+  _setPreferredRoutes = (options) => {
+    const preferredRoutes = options ? options.map((o) => o.value).join(',') : ''
     this.props.setQueryParam({ preferredRoutes })
   }
 
-  _isBannedRouteOptionDisabled = option => {
+  _isBannedRouteOptionDisabled = (option) => {
     // Disable routes that are preferred already.
     const preferredRoutes = this.getRouteList('preferredRoutes')
-    return preferredRoutes && preferredRoutes.find(o => o.value === option.value)
+    return (
+      preferredRoutes && preferredRoutes.find((o) => o.value === option.value)
+    )
   }
 
-  _isPreferredRouteOptionDisabled = option => {
+  _isPreferredRouteOptionDisabled = (option) => {
     // Disable routes that are banned already.
     const bannedRoutes = this.getRouteList('bannedRoutes')
-    return bannedRoutes && bannedRoutes.find(o => o.value === option.value)
+    return bannedRoutes && bannedRoutes.find((o) => o.value === option.value)
   }
 
-  getDistanceStep = distanceInMeters => {
+  getDistanceStep = (distanceInMeters) => {
     // Determine step for max walk/bike based on current value. Increment by a
     // quarter mile if dealing with small values, whatever number will round off
     // the number if it is not an integer, or default to one mile.
     return metersToMiles(distanceInMeters) <= 2
       ? '.25'
       : metersToMiles(distanceInMeters) % 1 !== 0
-        ? `${metersToMiles(distanceInMeters) % 1}`
-        : '1'
+      ? `${metersToMiles(distanceInMeters) % 1}`
+      : '1'
   }
 
-  _onSubModeChange = changedMode => {
+  _onSubModeChange = (changedMode) => {
     // Get previous transit modes from state and all modes from query.
     const transitModes = [...this.state.transitModes]
     const allModes = this.props.currentQuery.mode.split(',')
@@ -114,33 +118,37 @@ class AdvancedOptions extends Component {
       allModes.splice(i, 1)
     }
     // Update transit modes in state.
-    this.setState({transitModes})
+    this.setState({ transitModes })
     // Update all modes in query (set to walk if all transit modes inactive).
     this.props.setQueryParam({ mode: allModes.join(',') || 'WALK' })
   }
 
-  _setMaxWalkDistance = evt => {
-    this.props.setQueryParam({ maxWalkDistance: milesToMeters(evt.target.value) })
+  _setMaxWalkDistance = (evt) => {
+    this.props.setQueryParam({
+      maxWalkDistance: milesToMeters(evt.target.value)
+    })
   }
 
   /**
    * Get list of routes for specified key (either 'bannedRoutes' or
    * 'preferredRoutes').
    */
-  getRouteList = key => {
+  getRouteList = (key) => {
     const routesParam = this.props.currentQuery[key]
     const idList = routesParam ? routesParam.split(',') : []
     if (this.state.routeOptions) {
-      return this.state.routeOptions.filter(o => idList.indexOf(o.value) !== -1)
+      return this.state.routeOptions.filter(
+        (o) => idList.indexOf(o.value) !== -1
+      )
     } else {
       // If route list is not available, default labels to route IDs.
-      return idList.map(id => ({label: id, value: id}))
+      return idList.map((id) => ({ label: id, value: id }))
     }
   }
 
-  routeToOption = route => {
+  routeToOption = (route) => {
     if (!route) return null
-    const {id, longName, shortName} = route
+    const { id, longName, shortName } = route
     // For some reason the OTP API expects route IDs in this double
     // underscore format
     // FIXME: This replace is flimsy! What if there are more colons?
@@ -148,17 +156,17 @@ class AdvancedOptions extends Component {
     const label = shortName
       ? `${shortName}${longName ? ` - ${longName}` : ''}`
       : longName
-    return {label, value}
+    return { label, value }
   }
 
-  render () {
+  render() {
     const { currentQuery, intl, modes, onKeyDown } = this.props
     const { ModeIcon } = this.context
 
-    const {maxBikeDistance, maxWalkDistance, mode} = currentQuery
+    const { maxBikeDistance, maxWalkDistance, mode } = currentQuery
     const bannedRoutes = this.getRouteList('bannedRoutes')
     const preferredRoutes = this.getRouteList('preferredRoutes')
-    const transitModes = modes.transitModes.map(modeObj => {
+    const transitModes = modes.transitModes.map((modeObj) => {
       const modeStr = modeObj.mode || modeObj
       return {
         id: modeStr,
@@ -171,32 +179,45 @@ class AdvancedOptions extends Component {
     const unitsString = '(mi.)'
     return (
       <div>
-        <div style={{alignItems: 'center', display: 'flex', justifyContent: 'space-between'}}>
-          <label style={{fontWeight: '400'}}>
-            <FormattedMessage id='components.AdvancedOptions.maxWalk' values={{unitsString}} />
+        <div
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between'
+          }}
+        >
+          <label style={{ fontWeight: '400' }}>
+            <FormattedMessage
+              id="components.AdvancedOptions.maxWalk"
+              values={{ unitsString }}
+            />
             <input
-              min='0'
+              min="0"
               onChange={this._setMaxWalkDistance}
               onKeyDown={onKeyDown}
               step={this.getDistanceStep(maxWalkDistance)}
-              style={{display: 'block', marginRight: '10px', width: '60px'}}
-              type='number'
-              value={metersToMiles(maxWalkDistance)} />
+              style={{ display: 'block', marginRight: '10px', width: '60px' }}
+              type="number"
+              value={metersToMiles(maxWalkDistance)}
+            />
           </label>
-          {hasBike(mode)
-            ? <label style={{fontWeight: '400'}}>
-              <FormattedMessage id='components.AdvancedOptions.maxBike' values={{unitsString}} />
+          {hasBike(mode) ? (
+            <label style={{ fontWeight: '400' }}>
+              <FormattedMessage
+                id="components.AdvancedOptions.maxBike"
+                values={{ unitsString }}
+              />
               <input
-                min='0'
+                min="0"
                 onChange={this._setMaxBikeDistance}
                 onKeyDown={onKeyDown}
                 step={this.getDistanceStep(maxBikeDistance)}
-                style={{display: 'block', marginRight: '10px', width: '60px'}}
-                type='number'
-                value={metersToMiles(maxBikeDistance)} />
+                style={{ display: 'block', marginRight: '10px', width: '60px' }}
+                type="number"
+                value={metersToMiles(maxBikeDistance)}
+              />
             </label>
-            : null
-          }
+          ) : null}
           <StyledSubmodeSelector
             modes={transitModes}
             onChange={this._onSubModeChange}
@@ -206,21 +227,27 @@ class AdvancedOptions extends Component {
           />
         </div>
         <Select
-          id='preferredRoutes'
+          id="preferredRoutes"
           isMulti
           isOptionDisabled={this._isPreferredRouteOptionDisabled}
           onChange={this._setPreferredRoutes}
           options={this.state.routeOptions}
-          placeholder={intl.formatMessage({id: 'components.AdvancedOptions.preferredRoutes'})}
-          value={preferredRoutes} />
+          placeholder={intl.formatMessage({
+            id: 'components.AdvancedOptions.preferredRoutes'
+          })}
+          value={preferredRoutes}
+        />
         <Select
-          id='bannedRoutes'
+          id="bannedRoutes"
           isMulti
           isOptionDisabled={this._isBannedRouteOptionDisabled}
           onChange={this._setBannedRoutes}
           options={this.state.routeOptions}
-          placeholder={intl.formatMessage({id: 'components.AdvancedOptions.bannedRoutes'})}
-          value={bannedRoutes} />
+          placeholder={intl.formatMessage({
+            id: 'components.AdvancedOptions.bannedRoutes'
+          })}
+          value={bannedRoutes}
+        />
       </div>
     )
   }
diff --git a/lib/components/viewers/route-viewer.js b/lib/components/viewers/route-viewer.js
index fc9d56e8e..1f2ef3bf9 100644
--- a/lib/components/viewers/route-viewer.js
+++ b/lib/components/viewers/route-viewer.js
@@ -1,28 +1,33 @@
-import React, { Component } from 'react'
+/* eslint-disable react/prop-types */
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import coreUtils from '@opentripplanner/core-utils'
 import { FormattedMessage, injectIntl } from 'react-intl'
+import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import { ComponentContext } from '../../util/contexts'
-import { getModeFromRoute } from '../../util/viewer'
-import { getVehiclePositionsForRoute, findRoutes, findRoute } from '../../actions/api'
-import Icon from '../util/icon'
-import { getFormattedMode } from '../../util/i18n'
+import {
+  findRoute,
+  findRoutes,
+  getVehiclePositionsForRoute
+} from '../../actions/api'
 import {
   getAgenciesFromRoutes,
   getModesForActiveAgencyFilter,
   getSortedFilteredRoutes
 } from '../../util/state'
+import { getFormattedMode } from '../../util/i18n'
+import { getModeFromRoute } from '../../util/viewer'
 import {
   setMainPanelContent,
-  setViewedRoute,
-  setRouteViewerFilter
+  setRouteViewerFilter,
+  setViewedRoute
 } from '../../actions/ui'
+import Icon from '../util/icon'
 
+import { RouteName, RouteRow } from './RouteRow'
 import RouteDetails from './route-details'
-import { RouteRow, RouteName } from './RouteRow'
 
 class RouteViewer extends Component {
   static propTypes = {
@@ -45,7 +50,7 @@ class RouteViewer extends Component {
     }),
     // Routes have many more properties, but none are guaranteed
     viewedRouteObject: PropTypes.shape({ id: PropTypes.string })
-  };
+  }
 
   state = {
     /** Used to track if all routes have been rendered */
@@ -61,16 +66,20 @@ class RouteViewer extends Component {
   _backClicked = () =>
     this.props.viewedRoute === null
       ? this.props.setMainPanelContent(null)
-      : this.props.setViewedRoute({...this.props.viewedRoute, patternId: null});
+      : this.props.setViewedRoute({
+          ...this.props.viewedRoute,
+          patternId: null
+        })
 
-  componentDidMount () {
+  componentDidMount() {
     const { findRoutes } = this.props
     findRoutes()
   }
 
   /** Used to scroll to actively viewed route on load */
-  componentDidUpdate () {
+  componentDidUpdate() {
     const { routes } = this.props
+    console.log(routes)
     const { initialRender } = this.state
 
     // Wait until more than the one route is present.
@@ -81,7 +90,7 @@ class RouteViewer extends Component {
       window.requestAnimationFrame(() => {
         // Setting initialRender to false ensures that routeRow will not initiate
         // any more scrolling
-        this.setState({initialRender: false})
+        this.setState({ initialRender: false })
       })
     }
   }
@@ -111,7 +120,7 @@ class RouteViewer extends Component {
     this.props.setRouteViewerFilter({ search: value })
   }
 
-  render () {
+  render() {
     const {
       agencies,
       filter,
@@ -142,18 +151,18 @@ class RouteViewer extends Component {
         ) || {}
 
       return (
-        <div className='route-viewer'>
+        <div className="route-viewer">
           {/* Header Block */}
-          <div className='route-viewer-header'>
+          <div className="route-viewer-header">
             {/* Always show back button, as we don't write a route anymore */}
-            <div className='back-button-container'>
-              <Button bsSize='small' onClick={this._backClicked}>
-                <Icon type='arrow-left' />
-                <FormattedMessage id='common.forms.back' />
+            <div className="back-button-container">
+              <Button bsSize="small" onClick={this._backClicked}>
+                <Icon type="arrow-left" />
+                <FormattedMessage id="common.forms.back" />
               </Button>
             </div>
 
-            <div className='header-text route-expanded'>
+            <div className="header-text route-expanded">
               {route && ModeIcon && (
                 <ModeIcon
                   aria-label={getFormattedMode(
@@ -178,39 +187,39 @@ class RouteViewer extends Component {
     const { search } = filter
 
     return (
-      <div className='route-viewer'>
+      <div className="route-viewer">
         {/* Header Block */}
-        <div className='route-viewer-header'>
+        <div className="route-viewer-header">
           {/* Back button */}
           {!hideBackButton && (
-            <div className='back-button-container'>
-              <Button bsSize='small' onClick={this._backClicked}>
-                <Icon type='arrow-left' />
-                <FormattedMessage id='common.forms.back' />
+            <div className="back-button-container">
+              <Button bsSize="small" onClick={this._backClicked}>
+                <Icon type="arrow-left" />
+                <FormattedMessage id="common.forms.back" />
               </Button>
             </div>
           )}
 
           {/* Header Text */}
-          <div className='header-text'>
-            <FormattedMessage id='components.RouteViewer.title' />
+          <div className="header-text">
+            <FormattedMessage id="components.RouteViewer.title" />
           </div>
           <div>
-            <FormattedMessage id='components.RouteViewer.details' />
+            <FormattedMessage id="components.RouteViewer.details" />
           </div>
-          <section className='search-and-filter'>
-            <span className='routeFilter'>
-              <Icon type='filter' />
+          <section className="search-and-filter">
+            <span className="routeFilter">
+              <Icon type="filter" />
               <select
                 aria-label={intl.formatMessage({
                   id: 'components.RouteViewer.agencyFilter'
                 })}
-                id='agency'
+                id="agency"
                 onBlur={this.onFilterChange}
                 onChange={this.onFilterChange}
                 value={filter.agency || ''}
               >
-                <option value={''}>
+                <option value="">
                   {intl.formatMessage({
                     id: 'components.RouteViewer.allAgencies'
                   })}
@@ -225,12 +234,12 @@ class RouteViewer extends Component {
                 aria-label={intl.formatMessage({
                   id: 'components.RouteViewer.modeFilter'
                 })}
-                id='mode'
+                id="mode"
                 onBlur={this.onFilterChange}
                 onChange={this.onFilterChange}
                 value={filter.mode || ''}
               >
-                <option value={''}>
+                <option value="">
                   {intl.formatMessage({
                     id: 'components.RouteViewer.allModes'
                   })}
@@ -242,21 +251,21 @@ class RouteViewer extends Component {
                 ))}
               </select>
             </span>
-            <span className='routeSearch'>
-              <Icon type='search' />
+            <span className="routeSearch">
+              <Icon type="search" />
               <input
                 onChange={this.onSearchChange}
                 placeholder={intl.formatMessage({
                   id: 'components.RouteViewer.findARoute'
                 })}
-                type='search'
+                type="search"
                 value={search}
               />
             </span>
           </section>
         </div>
 
-        <div className='route-viewer-body'>
+        <div className="route-viewer-body">
           {sortedRoutes.map((route) => {
             // Find operator based on agency_id (extracted from OTP route ID).
             const operator =
@@ -280,10 +289,8 @@ class RouteViewer extends Component {
           })}
           {/* check modes length to differentiate between loading and over-filtered */}
           {modes.length > 0 && sortedRoutes.length === 0 && (
-            <span className='noRoutesFoundMessage'>
-              <FormattedMessage
-                id={'components.RouteViewer.noFilteredRoutesFound'}
-              />
+            <span className="noRoutesFoundMessage">
+              <FormattedMessage id="components.RouteViewer.noFilteredRoutesFound" />
             </span>
           )}
         </div>
@@ -302,7 +309,8 @@ const mapStateToProps = (state, ownProps) => {
     routes: getSortedFilteredRoutes(state),
     transitOperators: state.otp.config.transitOperators,
     viewedRoute: state.otp.ui.viewedRoute,
-    viewedRouteObject: state.otp.transitIndex.routes?.[state.otp.ui.viewedRoute?.routeId]
+    viewedRouteObject:
+      state.otp.transitIndex.routes?.[state.otp.ui.viewedRoute?.routeId]
   }
 }
 
diff --git a/package.json b/package.json
index 74415c515..f2e70ecf5 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "immutable": "^3.8.1",
     "isomorphic-fetch": "^2.2.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "lodash.memoize": "^4.1.2",
     "moment": "^2.17.1",
diff --git a/yarn.lock b/yarn.lock
index 16b8684b0..895f7809c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -386,6 +386,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
   integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -419,6 +424,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.1.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.8.tgz#61c243a3875f7d0b0962b0543a33ece6ff2f1f17"
+  integrity sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==
+
 "@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
@@ -1417,6 +1427,14 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.3.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -3169,7 +3187,22 @@
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
 
-"@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
   version "7.14.2"
   resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
   integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
@@ -3602,30 +3635,6 @@
     "@typescript-eslint/types" "4.30.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vue/compiler-core@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.6.tgz#7162bb0670273f04566af0d353009187ab577915"
-  integrity sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@babel/types" "^7.15.0"
-    "@vue/shared" "3.2.6"
-    estree-walker "^2.0.2"
-    source-map "^0.6.1"
-
-"@vue/compiler-dom@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz#3764d7fe1a696e39fb2a3c9d638da0749e369b2d"
-  integrity sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==
-  dependencies:
-    "@vue/compiler-core" "3.2.6"
-    "@vue/shared" "3.2.6"
-
-"@vue/shared@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.6.tgz#2c22bae88fe2b7b59fa68a9c9c4cd60bae2c1794"
-  integrity sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw==
-
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -8793,11 +8802,6 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
-  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -12880,6 +12884,11 @@ lodash.get@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
   integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
+lodash.isempty@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+  integrity sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"

From 51cb418c5808a377ef48c3e291929efb26a17cd1 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 11 Jan 2022 18:12:28 -0500
Subject: [PATCH 090/270] fix(CallTakerPanel): Replace abs positioning with
 flex layout.

---
 lib/components/app/call-taker-panel.js     | 278 ++++++++++-----------
 lib/components/viewers/viewer-container.js |  14 +-
 2 files changed, 144 insertions(+), 148 deletions(-)

diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 22b5733fa..a8e7cef23 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -151,157 +151,151 @@ class CallTakerPanel extends Component {
       zIndex: 99999
     }
     return (
-      <ViewerContainer>
-        {/* FIXME: should this be a styled component */}
-        <div
-          className="main-panel"
-          style={{
-            bottom: showPlanTripButton ? 55 : 0,
-            left: 0,
-            overflow: 'hidden',
-            paddingBottom: 15,
-            position: 'absolute',
-            right: 0,
-            top: 0
-          }}
-        >
-          <div className="form" style={{ padding: '5px 10px' }}>
-            <LocationField
-              inputPlaceholder={intl.formatMessage(
-                { id: 'common.searchForms.enterStartLocation' },
-                { mobile }
-              )}
-              locationType="from"
-              showClearButton
+      // {/* FIXME: should this be a styled component */}
+      <ViewerContainer
+        className="main-panel"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }}
+      >
+        <div className="form" style={{ padding: '5px 10px' }}>
+          <LocationField
+            inputPlaceholder={intl.formatMessage(
+              { id: 'common.searchForms.enterStartLocation' },
+              { mobile }
+            )}
+            locationType="from"
+            showClearButton
+          />
+          {Array.isArray(intermediatePlaces) &&
+            intermediatePlaces.map((place, i) => {
+              return (
+                <IntermediatePlace
+                  index={i}
+                  inputPlaceholder={intl.formatMessage({
+                    id: 'components.CallTakerPanel.intermediateDestination'
+                  })}
+                  key={i}
+                  location={place}
+                  // FIXME: allow intermediate location type.
+                  locationType="to"
+                  onLocationCleared={this._removePlace}
+                  // FIXME: function def
+                  onLocationSelected={(result) => this._addPlace(result, i)}
+                  showClearButton={!mobile}
+                />
+              )
+            })}
+          <LocationField
+            inputPlaceholder={intl.formatMessage(
+              { id: 'common.searchForms.enterDestination' },
+              { mobile }
+            )}
+            locationType="to"
+            showClearButton={!mobile}
+          />
+          <div className="switch-button-container" style={{ top: '20px' }}>
+            <SwitchButton
+              content={<i className="fa fa-exchange fa-rotate-90" />}
             />
-            {Array.isArray(intermediatePlaces) &&
-              intermediatePlaces.map((place, i) => {
-                return (
-                  <IntermediatePlace
-                    index={i}
-                    inputPlaceholder={intl.formatMessage({
-                      id: 'components.CallTakerPanel.intermediateDestination'
-                    })}
-                    key={i}
-                    location={place}
-                    // FIXME: allow intermediate location type.
-                    locationType="to"
-                    onLocationCleared={this._removePlace}
-                    // FIXME: function def
-                    onLocationSelected={(result) => this._addPlace(result, i)}
-                    showClearButton={!mobile}
-                  />
-                )
-              })}
-            <LocationField
-              inputPlaceholder={intl.formatMessage(
-                { id: 'common.searchForms.enterDestination' },
-                { mobile }
-              )}
-              locationType="to"
-              showClearButton={!mobile}
+          </div>
+          <AddPlaceButton
+            from={from}
+            intermediatePlaces={intermediatePlaces}
+            onClick={this._addPlace}
+            to={to}
+          />
+          <div className="search-options">
+            <DateTimeOptions
+              date={date}
+              departArrive={departArrive}
+              onKeyDown={this._handleFormKeyDown}
+              setQueryParam={setQueryParam}
+              time={time}
+              timeFormat={timeFormat}
             />
-            <div className="switch-button-container" style={{ top: '20px' }}>
-              <SwitchButton
-                content={<i className="fa fa-exchange fa-rotate-90" />}
-              />
-            </div>
-            <AddPlaceButton
-              from={from}
-              intermediatePlaces={intermediatePlaces}
-              onClick={this._addPlace}
-              to={to}
+            <ModeDropdown
+              mode={mode}
+              modes={modes}
+              onChange={setQueryParam}
+              onKeyDown={this._handleFormKeyDown}
+              selectedTransitModes={this.state.transitModes}
+              updateTransitModes={(transitModes) => {
+                this.setState({ transitModes })
+              }}
             />
-            <div className="search-options">
-              <DateTimeOptions
-                date={date}
-                departArrive={departArrive}
-                onKeyDown={this._handleFormKeyDown}
-                setQueryParam={setQueryParam}
-                time={time}
-                timeFormat={timeFormat}
-              />
-              <ModeDropdown
-                mode={mode}
+            <Button
+              bsSize="small"
+              bsStyle="default"
+              onClick={this._planTrip}
+              style={{
+                fontSize: '13px',
+                padding: '1px 10px'
+              }}
+            >
+              Plan
+            </Button>
+          </div>
+          <div className="advanced-search-options-container">
+            {groupSize !== null && maxGroupSize && (
+              <span className="pull-right">
+                <FormattedMessage id="components.CallTakerPanel.groupSize" />
+                <InputWithSpace
+                  max={maxGroupSize}
+                  min={0}
+                  onChange={this._updateGroupSize}
+                  onKeyDown={this._handleFormKeyDown}
+                  step={1}
+                  style={{ lineHeight: '0.8em' }}
+                  type="number"
+                  value={groupSize}
+                />
+              </span>
+            )}
+            <Button
+              className="hide-button clear-button-formatting"
+              onClick={this._onHideAdvancedClick}
+            >
+              <i className={`fa fa-caret-${expandAdvanced ? 'up' : 'down'}`} />
+              <FormattedMessage id="components.CallTakerPanel.advancedOptions" />
+            </Button>
+            <div
+              className="advanced-search-options"
+              style={advancedSearchStyle}
+            >
+              <AdvancedOptions
+                currentQuery={currentQuery}
+                findRoutes={this.props.findRoutes}
                 modes={modes}
-                onChange={setQueryParam}
                 onKeyDown={this._handleFormKeyDown}
-                selectedTransitModes={this.state.transitModes}
-                updateTransitModes={(transitModes) => {
-                  this.setState({ transitModes })
-                }}
+                routes={routes}
+                setQueryParam={setQueryParam}
               />
-              <Button
-                bsSize="small"
-                bsStyle="default"
-                onClick={this._planTrip}
-                style={{
-                  fontSize: '13px',
-                  padding: '1px 10px'
-                }}
-              >
-                Plan
-              </Button>
             </div>
-            <div className="advanced-search-options-container">
-              {groupSize !== null && maxGroupSize && (
-                <span className="pull-right">
-                  <FormattedMessage id="components.CallTakerPanel.groupSize" />
-                  <InputWithSpace
-                    max={maxGroupSize}
-                    min={0}
-                    onChange={this._updateGroupSize}
-                    onKeyDown={this._handleFormKeyDown}
-                    step={1}
-                    style={{ lineHeight: '0.8em' }}
-                    type="number"
-                    value={groupSize}
-                  />
-                </span>
-              )}
-              <Button
-                className="hide-button clear-button-formatting"
-                onClick={this._onHideAdvancedClick}
-              >
-                <i
-                  className={`fa fa-caret-${expandAdvanced ? 'up' : 'down'}`}
-                />
-                <FormattedMessage id="components.CallTakerPanel.advancedOptions" />
-              </Button>
-              <div
-                className="advanced-search-options"
-                style={advancedSearchStyle}
-              >
-                <AdvancedOptions
-                  currentQuery={currentQuery}
-                  findRoutes={this.props.findRoutes}
-                  modes={modes}
-                  onKeyDown={this._handleFormKeyDown}
-                  routes={routes}
-                  setQueryParam={setQueryParam}
-                />
-              </div>
-            </div>
-          </div>
-          {!activeSearch && !showPlanTripButton && showUserSettings && (
-            <UserSettings />
-          )}
-          <div className="desktop-narrative-container">
-            {/* FIXME: Achieve this partially scrolling layout as below
-                without using absolute positioning and by sharing styles with BatchRoutingPanel. */}
-            <NarrativeItineraries
-              containerStyle={{
-                bottom: '0',
-                display: 'flex',
-                flexDirection: 'column',
-                left: '0',
-                position: 'absolute',
-                right: '0',
-                top: '210px'
-              }}
-            />
           </div>
         </div>
+        {!activeSearch && !showPlanTripButton && showUserSettings && (
+          <UserSettings />
+        )}
+        <div
+          className="desktop-narrative-container"
+          style={{
+            flexGrow: 1,
+            overflowY: 'hidden'
+          }}
+        >
+          {/* FIXME: sharing styles with BatchRoutingPanel. */}
+          <NarrativeItineraries
+            containerStyle={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              marginTop: '0px' // Overrides the margin defined in CSS for `options itinerary`
+            }}
+          />
+        </div>
       </ViewerContainer>
     )
   }
diff --git a/lib/components/viewers/viewer-container.js b/lib/components/viewers/viewer-container.js
index 0f7239aae..def203808 100644
--- a/lib/components/viewers/viewer-container.js
+++ b/lib/components/viewers/viewer-container.js
@@ -1,21 +1,23 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import { MainPanelContent } from '../../actions/ui'
 
+import RouteViewer from './route-viewer'
 import StopViewer from './stop-viewer'
 import TripViewer from './trip-viewer'
-import RouteViewer from './route-viewer'
 
 class ViewerContainer extends Component {
   static propTypes = {
+    children: PropTypes.any,
     className: PropTypes.string,
+    style: PropTypes.object,
     uiState: PropTypes.object
   }
 
-  render () {
-    const { className, uiState } = this.props
+  render() {
+    const { className, style, uiState } = this.props
 
     // check for main panel content
     if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
@@ -35,7 +37,7 @@ class ViewerContainer extends Component {
 
     // otherwise, return default content
     return (
-      <div className={className}>
+      <div className={className} style={style}>
         {this.props.children}
       </div>
     )

From 6df872e51caa9d562533278d8da5122236219c53 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 12 Jan 2022 14:23:15 +0100
Subject: [PATCH 091/270] refactor(stop-viewer): address PR feedback

---
 lib/actions/api.js                    | 12 ++++--------
 lib/components/viewers/stop-viewer.js |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 168a5e749..c5f572f11 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -260,8 +260,7 @@ function getJsonAndCheckResponse(res) {
 function getOtpFetchOptions(state, includeToken = false) {
   let apiBaseUrl, apiKey, token
 
-  // eslint-disable-next-line camelcase
-  const { api: api_v1, api_v2, persistence } = state.otp.config
+  const { api: apiV1, api_v2: apiV2, persistence } = state.otp.config
   if (persistence && persistence.otp_middleware) {
     // Prettier does not understand the syntax on this line
     // eslint-disable-next-line prettier/prettier
@@ -269,8 +268,7 @@ function getOtpFetchOptions(state, includeToken = false) {
   }
 
   // Use only the v2 api if only a v2 api is presented
-  // eslint-disable-next-line camelcase
-  const api = api_v1 || api_v2
+  const api = apiV1 || apiV2
 
   const isOtpServerSameAsMiddleware = apiBaseUrl === api.host
   if (isOtpServerSameAsMiddleware) {
@@ -714,10 +712,8 @@ export function findRoutes(params) {
       },
       rewritePayload: (payload, dispatch, getState) => {
         const { otp } = getState()
-        // eslint-disable-next-line camelcase
-        const { api: api_v1, api_v2 } = otp.config
-        // eslint-disable-next-line camelcase
-        const usingV2Only = !api_v1 && !!api_v2
+        const { api: apiV1, api_v2: apiV2 } = otp.config
+        const usingV2Only = !apiV1 && !!apiV2
         const routes = {}
         payload.forEach((rte) => {
           // If coming from a v2 server,
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 1667a96f8..f23c07a85 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -292,7 +292,7 @@ class StopViewer extends Component {
          not shown while stopData is loading
          */
       if (stopData && stopData.geometries && stopData.geometries.geoJson?.type !== 'Point') {
-        contents = <div><FormattedMessage id="components.StopViewer.flexStop" /></div>
+        contents = <div style={{lineHeight:'normal'}}><FormattedMessage id="components.StopViewer.flexStop" /></div>
       }
     } else if (scheduleView) {
       contents = (

From 1d230898197a4ef5860349c1a9f9efa2094779ab Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 12 Jan 2022 14:23:33 +0100
Subject: [PATCH 092/270] refactor(stop-viewer): extract flex check

---
 lib/components/viewers/stop-viewer.js |   9 +-
 lib/util/viewer.js                    | 177 +++++++++++++++-----------
 2 files changed, 112 insertions(+), 74 deletions(-)

diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index f23c07a85..e018192fe 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -21,6 +21,7 @@ import Strong from '../util/strong-text'
 
 import LiveStopTimes from './live-stop-times'
 import StopScheduleTable from './stop-schedule-table'
+import { stopIsFlex } from '../../util/viewer'
 
 const { getUserTimezone, OTP_API_DATE_FORMAT } = coreUtils.time
 
@@ -184,6 +185,8 @@ class StopViewer extends Component {
         : stopData.id
     }
 
+    const isFlex = stopIsFlex(stopData)
+
     let timezoneWarning
     if (!inHomeTimezone) {
       const timezoneCode = moment().tz(homeTimezone).format('z')
@@ -215,7 +218,7 @@ class StopViewer extends Component {
           >
             <Icon type="search" />
           </button>
-          <button
+          {!isFlex && <button
             className="link-button pull-right"
             onClick={this._toggleScheduleView}
             style={{ fontSize: 'small' }}
@@ -225,7 +228,7 @@ class StopViewer extends Component {
               id="components.StopViewer.viewTypeBtnText"
               values={{ scheduleView }}
             />
-          </button>
+          </button>}
         </div>
         <b>
           <FormattedMessage id="components.StopViewer.planTrip" />
@@ -291,7 +294,7 @@ class StopViewer extends Component {
          The extra checks stopData are needed to ensure that the message is 
          not shown while stopData is loading
          */
-      if (stopData && stopData.geometries && stopData.geometries.geoJson?.type !== 'Point') {
+      if (stopIsFlex(stopData)) {
         contents = <div style={{lineHeight:'normal'}}><FormattedMessage id="components.StopViewer.flexStop" /></div>
       }
     } else if (scheduleView) {
diff --git a/lib/util/viewer.js b/lib/util/viewer.js
index ecea23666..9cd715515 100644
--- a/lib/util/viewer.js
+++ b/lib/util/viewer.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import tinycolor from 'tinycolor2'
 
 import { isBlank } from './ui'
@@ -6,15 +7,15 @@ import { isBlank } from './ui'
  * Computes the seconds until departure for a given stop time,
  * based either on the scheduled or the realtime departure time.
  */
-export function getSecondsUntilDeparture (stopTime, useSchedule) {
+export function getSecondsUntilDeparture(stopTime, useSchedule) {
   const departureTime = useSchedule
     ? stopTime.scheduledDeparture
     : stopTime.realtimeDeparture
 
-  return (departureTime + stopTime.serviceDay) - (Date.now() / 1000)
+  return departureTime + stopTime.serviceDay - Date.now() / 1000
 }
 
-export function getRouteIdForPattern (pattern) {
+export function getRouteIdForPattern(pattern) {
   const patternIdParts = pattern.id.split(':')
   const routeId = patternIdParts[0] + ':' + patternIdParts[1]
   return routeId
@@ -25,7 +26,7 @@ export function getRouteIdForPattern (pattern) {
  * (arrivals at a terminus stop are not shown in the stop viewer).
  * @returns true if the given stopTime does not correspond to the last stop visited by a pattern.
  */
-function excludeLastStop (stopTime) {
+function excludeLastStop(stopTime) {
   return stopTime.stopIndex < stopTime.stopCount - 1
 }
 
@@ -41,7 +42,7 @@ function excludeLastStop (stopTime) {
  * @param {*} routeId The route id to show for the specified route.
  * @returns true if route is not null.
  */
-export function routeIsValid (route, routeId) {
+export function routeIsValid(route, routeId) {
   if (!route) {
     console.warn(`Cannot render stop times for missing route ID: ${routeId}`)
     return false
@@ -49,7 +50,7 @@ export function routeIsValid (route, routeId) {
   return true
 }
 
-export function getStopName (stop) {
+export function getStopName(stop) {
   return `${stop.name} (${getStopCodeToDisplay(stop)})`
 }
 
@@ -58,7 +59,7 @@ export function getStopName (stop) {
  * @param  {Object} stop OTP stop entity
  * @return {string}      stop_code or cleaned stop_id
  */
-export function getStopCodeToDisplay (stop) {
+export function getStopCodeToDisplay(stop) {
   if (!stop) return ''
   return stop.code || stop.id.split(':')[1]
 }
@@ -68,7 +69,7 @@ export function getStopCodeToDisplay (stop) {
  * @param {*} pattern pattern to extract headsign out of
  * @returns           headsign of pattern
  */
-export function extractHeadsignFromPattern (pattern) {
+export function extractHeadsignFromPattern(pattern) {
   let headsign = pattern.headsign
   // In case stop time headsign is blank, extract headsign from the pattern 'desc' attribute
   // (format: '49 to <Destination> (<destid>)[ from <Origin> (<originid)]').
@@ -95,7 +96,7 @@ export function extractHeadsignFromPattern (pattern) {
   return headsign
 }
 
-export function getStopTimesByPattern (stopData) {
+export function getStopTimesByPattern(stopData) {
   const stopTimesByPattern = {}
   if (stopData && stopData.routes && stopData.stopTimes) {
     stopData.stopTimes.forEach(({ pattern, times }) => {
@@ -110,7 +111,7 @@ export function getStopTimesByPattern (stopData) {
 
       const id = `${routeId}-${headsign}`
       if (!(id in stopTimesByPattern)) {
-        const route = stopData.routes.find(r => r.id === routeId)
+        const route = stopData.routes.find((r) => r.id === routeId)
         // in some cases, the TriMet transit index will not return all routes
         // that serve a stop. Perhaps it doesn't return some routes if the
         // route only performs a drop-off at the stop... not quite sure. So a
@@ -129,7 +130,8 @@ export function getStopTimesByPattern (stopData) {
       // Exclude the last stop, as the stop viewer doesn't show arrival times to a terminus stop.
       const filteredTimes = times.filter(excludeLastStop)
 
-      stopTimesByPattern[id].times = stopTimesByPattern[id].times.concat(filteredTimes)
+      stopTimesByPattern[id].times =
+        stopTimesByPattern[id].times.concat(filteredTimes)
     })
   }
   return stopTimesByPattern
@@ -140,21 +142,35 @@ export function getStopTimesByPattern (stopData) {
  * Route model returns the mode as an integer type whereas the RouteShort model
  * returns the mode string.
  */
-export function getModeFromRoute (route) {
+export function getModeFromRoute(route) {
   const modeLookup = {
     0: 'TRAM', // - Tram, Streetcar, Light rail.
-    1: 'SUBWAY', // - Subway, Metro.
-    2: 'RAIL', // - Rail. Used for intercity or long-distance travel.
-    3: 'BUS', // - Bus.
-    4: 'FERRY', // - Ferry.
-    5: 'CABLE_CAR', // - Cable tram.
-    6: 'GONDOLA', // - Gondola, etc.
-    7: 'FUNICULAR', // - Funicular.
+    1: 'SUBWAY',
+    // - Funicular.
     // TODO: 11 and 12 are not a part of OTP as of 2019-02-14, but for now just
     // associate them with bus/rail.
     // eslint-disable-next-line sort-keys
-    11: 'BUS', // - Trolleybus.
-    12: 'RAIL' // - Monorail.
+    11: 'BUS',
+
+    // - Trolleybus.
+    12: 'RAIL',
+
+    // - Subway, Metro.
+    2: 'RAIL',
+
+    // - Rail. Used for intercity or long-distance travel.
+    3: 'BUS',
+
+    // - Bus.
+    4: 'FERRY',
+
+    // - Ferry.
+    5: 'CABLE_CAR',
+
+    // - Cable tram.
+    6: 'GONDOLA',
+    // - Gondola, etc.
+    7: 'FUNICULAR' // - Monorail.
   }
   return route.mode || modeLookup[route.type]
 }
@@ -170,26 +186,28 @@ export const getModeFromStop = (stop) => {
     return modes[0]
   }
   if (modes.length > 1) {
-    const stopModeCounts = modes
-      .reduce((modes, cur) => {
-        if (!cur) {
-          return modes
-        }
+    const stopModeCounts = modes.reduce((modes, cur) => {
+      if (!cur) {
+        return modes
+      }
 
-        if (!modes[cur]) {
-          modes[cur] = 0
-        }
-        modes[cur]++
+      if (!modes[cur]) {
+        modes[cur] = 0
+      }
+      modes[cur]++
 
-        return modes
-      }, {})
+      return modes
+    }, {})
 
     // Get stop mode by getting most common stop mode
-    return stopModeCounts && Object.keys(stopModeCounts)
-      // Sort by mode occurrence
-      .sort((a, b) => {
-        return stopModeCounts[a] - stopModeCounts[b]
-      })[0]
+    return (
+      stopModeCounts &&
+      Object.keys(stopModeCounts)
+        // Sort by mode occurrence
+        .sort((a, b) => {
+          return stopModeCounts[a] - stopModeCounts[b]
+        })[0]
+    )
   }
 }
 
@@ -197,22 +215,22 @@ export const getModeFromStop = (stop) => {
  * Comparator to sort stop times by their departure times
  * (in chronological order - 9:13am, 9:15am, etc.)
  */
-export function stopTimeComparator (a, b) {
+export function stopTimeComparator(a, b) {
   const aTime = a.serviceDay + a.scheduledDeparture
   const bTime = b.serviceDay + b.scheduledDeparture
   return aTime - bTime
 }
 
 /**
-  * Finds the stop time corresponding to the first departure
-  * (the closest departure past the current time).
-  */
-export function getFirstDepartureFromNow (stopTimes) {
+ * Finds the stop time corresponding to the first departure
+ * (the closest departure past the current time).
+ */
+export function getFirstDepartureFromNow(stopTimes) {
   // Search starting from the last stop time (largest seconds until departure).
   const lastStopTime = stopTimes[stopTimes.length - 1]
 
   let firstStopTime = lastStopTime
-  stopTimes.forEach(stopTime => {
+  stopTimes.forEach((stopTime) => {
     const firstStopTimeSeconds = getSecondsUntilDeparture(firstStopTime, true)
     const stopTimeSeconds = getSecondsUntilDeparture(stopTime, true)
 
@@ -226,7 +244,7 @@ export function getFirstDepartureFromNow (stopTimes) {
 /**
  * Merges and sorts the stop time entries from the patterns in the given stopData object.
  */
-export function mergeAndSortStopTimes (stopData) {
+export function mergeAndSortStopTimes(stopData) {
   const stopTimesByPattern = getStopTimesByPattern(stopData)
 
   // Merge stop times, so that we can sort them across all route patterns.
@@ -235,17 +253,17 @@ export function mergeAndSortStopTimes (stopData) {
   Object.values(stopTimesByPattern).forEach(({ pattern, route, times }) => {
     // Only add pattern if route info is returned by OTP.
     if (routeIsValid(route, getRouteIdForPattern(pattern))) {
-      const filteredTimes = times
-        .filter(excludeLastStop)
-        .map(stopTime => {
-          // Add the route attribute and headsign to each stop time for rendering route info.
-          const headsign = isBlank(stopTime.headsign) ? pattern.headsign : stopTime.headsign
-          return {
-            ...stopTime,
-            headsign,
-            route
-          }
-        })
+      const filteredTimes = times.filter(excludeLastStop).map((stopTime) => {
+        // Add the route attribute and headsign to each stop time for rendering route info.
+        const headsign = isBlank(stopTime.headsign)
+          ? pattern.headsign
+          : stopTime.headsign
+        return {
+          ...stopTime,
+          headsign,
+          route
+        }
+      })
       mergedStopTimes = mergedStopTimes.concat(filteredTimes)
     }
   })
@@ -267,7 +285,7 @@ export const REALTIME_STATUS = {
  * Get one of the realtime states (on-time, late...) if a leg/stoptime is
  * registering realtime info and given a delay value in seconds.
  */
-export function getTripStatus (
+export function getTripStatus(
   isRealtime,
   delaySeconds,
   onTimeThresholdSeconds
@@ -296,34 +314,35 @@ export function getTripStatus (
  *
  * TODO: Move to @opentripplanner/core-utils once otp-rr uses otp-ui library.
  */
-function getContrastYIQ (routeColor) {
+function getContrastYIQ(routeColor) {
   const textColorOptions = [
     tinycolor(routeColor).darken(80).toHexString(),
     tinycolor(routeColor).lighten(80).toHexString()
   ]
 
-  return tinycolor
-    .mostReadable(routeColor, textColorOptions, {
-      includeFallbackColors: true,
-      level: 'AAA'
-    })
-    .toHexString()
-    // Have to do this to remain compatible with former version of this function
-    .split('#')[1]
+  return (
+    tinycolor
+      .mostReadable(routeColor, textColorOptions, {
+        includeFallbackColors: true,
+        level: 'AAA'
+      })
+      .toHexString()
+      // Have to do this to remain compatible with former version of this function
+      .split('#')[1]
+  )
 }
 
 /**
  * Uses a long name splitter to prettify a route's long name
  */
-function getCleanRouteLongName ({ longNameSplitter, route }) {
+function getCleanRouteLongName({ longNameSplitter, route }) {
   let longName = ''
   if (route.longName) {
     // Attempt to split route name if splitter is defined for operator (to
     // remove short name value from start of long name value).
     const nameParts = route.longName.split(longNameSplitter)
-    longName = (longNameSplitter && nameParts.length > 1)
-      ? nameParts[1]
-      : route.longName
+    longName =
+      longNameSplitter && nameParts.length > 1 ? nameParts[1] : route.longName
     // If long name and short name are identical, set long name to be an empty
     // string.
     if (longName === route.shortName) longName = ''
@@ -334,8 +353,9 @@ function getCleanRouteLongName ({ longNameSplitter, route }) {
  * Using an operator and route, apply heuristics to determine color and contrast color
  * as well as a full route name
  */
-export function getColorAndNameFromRoute (operator, route) {
-  const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator || {}
+export function getColorAndNameFromRoute(operator, route) {
+  const { defaultRouteColor, defaultRouteTextColor, longNameSplitter } =
+    operator || {}
   const backgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
   // NOTE: text color is not a part of short response route object, so there
   // is no way to determine from OTP what the text color should be if the
@@ -354,3 +374,18 @@ export function getColorAndNameFromRoute (operator, route) {
     longName
   }
 }
+
+/**
+ * Helper method to determine if a stop being viewed is a flex stop. This is not marked by
+ * otp, so we must use the geometry type to determine flex status (flex stops do not use points)
+ *
+ * Extra null checks are needed to avoid mistaking a stop where data has not yet loaded for
+ * a flex stop.
+ */
+export function stopIsFlex(stopData) {
+  return (
+    stopData &&
+    stopData.geometries &&
+    stopData.geometries.geoJson?.type !== 'Point'
+  )
+}

From 0b9b183e563ab5e424b8ddf08d514c7f550f8bac Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 12 Jan 2022 14:44:18 +0100
Subject: [PATCH 093/270] feat(itinerary-body): show itinerary walking leg
 imagery button

---
 example-config.yml                            |  4 +++
 .../line-itin/connected-itinerary-body.js     | 28 ++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 123383bcd..7115a99ae 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -409,3 +409,7 @@ dateTime:
 #   # Whether to render routes within flex zones of a route's patterns. If set to true,
 #   # routes will not be rendered within flex zones.
 #   hideRouteShapesWithinFlexZones: true
+
+# API key to make Mapillary API calls. These are used to show street imagery.
+# mapillary:
+#   key: <Mapillary Key>
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 79b8f167b..3b33267af 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -1,23 +1,29 @@
+/* eslint-disable react/prop-types */
+// TODO: Typescript (otp-rr config object)
+import { connect } from 'react-redux'
+import {
+  PlaceName as PlaceNameWrapper,
+  PlaceRowWrapper
+} from '@opentripplanner/itinerary-body/lib/styled'
 import isEqual from 'lodash.isequal'
-import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 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 { PlaceName as PlaceNameWrapper, PlaceRowWrapper } from '@opentripplanner/itinerary-body/lib/styled'
-import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import styled from 'styled-components'
+import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 
+import { ComponentContext } from '../../../util/contexts'
 import { setLegDiagram } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
-import { ComponentContext } from '../../../util/contexts'
 
 import RealtimeTimeColumn from './realtime-time-column'
 import TransitLegSubheader from './connected-transit-leg-subheader'
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {}
 
 const ItineraryBodyContainer = styled.div`
@@ -37,11 +43,11 @@ class ConnectedItineraryBody extends Component {
   static contextType = ComponentContext
 
   /** avoid rerendering if the itinerary to display hasn't changed */
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return !isEqual(this.props.itinerary, nextProps.itinerary)
   }
 
-  render () {
+  render() {
     const {
       accessibilityScoreGradationMap,
       config,
@@ -63,6 +69,7 @@ class ConnectedItineraryBody extends Component {
           itinerary={itinerary}
           LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
+          mapillaryKey={config?.mapillary?.key}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
           setActiveLeg={setActiveLeg}
@@ -99,6 +106,7 @@ const mapDispatchToProps = {
   setViewedTrip
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ConnectedItineraryBody
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ConnectedItineraryBody)

From a3c0a0af02e89187a9a2965cda4309e74fd0291b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 12 Jan 2022 16:32:09 +0100
Subject: [PATCH 094/270] improvement: show mapillary iframe in elevation popup

---
 lib/actions/map.js                            |   1 +
 lib/components/map/map.css                    |  21 +-
 lib/components/map/map.js                     |  67 +++-
 lib/components/map/mapillary-frame.tsx        |  29 ++
 .../narrative/default/access-leg.js           |  61 ++--
 .../line-itin/connected-itinerary-body.js     |   5 +-
 lib/reducers/create-otp-reducer.js            | 334 +++++++++++-------
 7 files changed, 337 insertions(+), 181 deletions(-)
 create mode 100644 lib/components/map/mapillary-frame.tsx

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 5db88e68f..310d66233 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -131,6 +131,7 @@ export function switchLocations() {
 }
 
 export const setLegDiagram = createAction('SET_LEG_DIAGRAM')
+export const setMapillaryId = createAction('SET_MAPILLARY_ID')
 
 export const setElevationPoint = createAction('SET_ELEVATION_POINT')
 
diff --git a/lib/components/map/map.css b/lib/components/map/map.css
index 77652d126..04dca4aea 100644
--- a/lib/components/map/map.css
+++ b/lib/components/map/map.css
@@ -15,7 +15,7 @@
 }
 
 .otp .link-button:focus {
-  outline:0;
+  outline: 0;
 }
 
 /* leg diagram */
@@ -29,8 +29,8 @@
   z-index: 1000;
   background-color: white;
   background-clip: padding-box;
-  border: 2px solid rgba(127, 127, 127, .5);
-  border-Radius: 4px;
+  border: 2px solid rgba(127, 127, 127, 0.5);
+  border-radius: 4px;
   cursor: crosshair;
 }
 
@@ -64,6 +64,21 @@
   background: none;
 }
 
+.otp .leg-diagram .mapillary-close-button {
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 0 0 1em;
+  display: block;
+  left: 0;
+  padding: 0.5em;
+  position: absolute;
+  top: 0;
+  z-index: 10000;
+}
+.otp .leg-diagram .mapillary-close-button:hover {
+  background: rgba(200, 200, 200, 0.85);
+  color: #333;
+}
+
 /*** Car Rental Map Icons ***/
 
 .otp .car-rental-icon {
diff --git a/lib/components/map/map.js b/lib/components/map/map.js
index 12e01609e..4b8ca41e2 100644
--- a/lib/components/map/map.js
+++ b/lib/components/map/map.js
@@ -1,43 +1,56 @@
-import React, { Component } from 'react'
+/* eslint-disable react/prop-types */
+// TODO: Typescript (config object)
+import { Button, ButtonGroup } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { ButtonGroup, Button } from 'react-bootstrap'
+import React, { Component } from 'react'
+
+import { setMapillaryId } from '../../actions/map'
 
 import DefaultMap from './default-map'
 import LegDiagram from './leg-diagram'
+import MapillaryFrame from './mapillary-frame'
 import StylizedMap from './stylized-map'
 
 class Map extends Component {
-  constructor () {
+  constructor() {
     super()
     this.state = {
       activeViewIndex: 0
     }
   }
 
-  getComponentForView (view) {
+  getComponentForView(view) {
     // TODO: allow a 'CUSTOM' type
     switch (view.type) {
-      case 'DEFAULT': return <DefaultMap />
-      case 'STYLIZED': return <StylizedMap />
+      case 'DEFAULT':
+        return <DefaultMap />
+      case 'STYLIZED':
+        return <StylizedMap />
     }
   }
 
-  render () {
-    const { diagramLeg, mapConfig } = this.props
+  render() {
+    const { activeMapillaryImage, diagramLeg, mapConfig, setMapillaryId } =
+      this.props
 
     const showDiagram = diagramLeg
+    const showMapillary = activeMapillaryImage
 
     // Use the views defined in the config; if none defined, just show the default map
     const views = mapConfig.views || [{ type: 'DEFAULT' }]
 
     return (
-      <div className='map-container'>
+      <div className="map-container">
         {/* The map views -- only one is visible at a time */}
         {views.map((view, i) => {
           return (
-            <div className='map-container'
+            <div
+              className="map-container"
               key={i}
-              style={{ visibility: i === this.state.activeViewIndex ? 'visible' : 'hidden' }}
+              style={{
+                visibility:
+                  i === this.state.activeViewIndex ? 'visible' : 'hidden'
+              }}
             >
               {this.getComponentForView(view)}
             </div>
@@ -46,15 +59,26 @@ class Map extends Component {
 
         {/* The toggle buttons -- only show if multiple views */}
         {views.length > 1 && (
-          <div style={{ bottom: 12 + (showDiagram ? 192 : 0), left: 12, position: 'absolute', zIndex: 100000 }}>
+          <div
+            style={{
+              bottom: 12 + (showDiagram ? 192 : 0),
+              left: 12,
+              position: 'absolute',
+              zIndex: 100000
+            }}
+          >
             <ButtonGroup>
               {views.map((view, i) => {
                 return (
                   <Button
-                    bsSize='xsmall'
-                    bsStyle={i === this.state.activeViewIndex ? 'success' : 'default'}
+                    bsSize="xsmall"
+                    bsStyle={
+                      i === this.state.activeViewIndex ? 'success' : 'default'
+                    }
                     key={i}
-                    onClick={() => { this.setState({ activeViewIndex: i }) }}
+                    onClick={() => {
+                      this.setState({ activeViewIndex: i })
+                    }}
                     style={{ padding: '3px 6px' }}
                   >
                     {view.text || view.type}
@@ -67,6 +91,12 @@ class Map extends Component {
 
         {/* The leg diagram overlay, if active */}
         {showDiagram && <LegDiagram leg={diagramLeg} />}
+        {showMapillary && (
+          <MapillaryFrame
+            id={activeMapillaryImage}
+            onClose={() => setMapillaryId(null)}
+          />
+        )}
       </div>
     )
   }
@@ -76,9 +106,14 @@ class Map extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    activeMapillaryImage: state.otp.ui.mapillaryId,
     diagramLeg: state.otp.ui.diagramLeg,
     mapConfig: state.otp.config.map
   }
 }
 
-export default connect(mapStateToProps)(Map)
+const mapDispatchToProps = {
+  setMapillaryId
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Map)
diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
new file mode 100644
index 000000000..f4225abde
--- /dev/null
+++ b/lib/components/map/mapillary-frame.tsx
@@ -0,0 +1,29 @@
+import { Button } from 'react-bootstrap'
+import React from 'react'
+
+const MapillaryFrame = ({
+  id,
+  onClose
+}: {
+  id: string
+  onClose?: () => void
+}): React.ReactElement => {
+  return (
+    <div className="leg-diagram" style={{ height: '50vh', zIndex: 999 }}>
+      <iframe
+        frameBorder="0"
+        src={`https://www.mapillary.com/embed?image_key=${id}&style=photo`}
+        style={{ height: '100%', width: '100%' }}
+        title="Imagery of the street"
+      />
+      <Button
+        className="mapillary-close-button close-button clear-button-formatting"
+        onClick={onClose}
+      >
+        <i className="fa fa-close" />
+      </Button>
+    </div>
+  )
+}
+
+export default MapillaryFrame
diff --git a/lib/components/narrative/default/access-leg.js b/lib/components/narrative/default/access-leg.js
index 017edd06a..3837510f5 100644
--- a/lib/components/narrative/default/access-leg.js
+++ b/lib/components/narrative/default/access-leg.js
@@ -1,28 +1,30 @@
-import coreUtils from '@opentripplanner/core-utils'
+import { FormattedMessage } from 'react-intl'
 import { humanizeDistanceString } from '@opentripplanner/humanize-distance'
+import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
-import React, {Component} from 'react'
-import { FormattedMessage } from 'react-intl'
+import React, { Component } from 'react'
 
-import Icon from '../../util/icon'
-import Strong from '../../util/strong-text'
-import FormattedMode from '../../util/formatted-mode'
 import FormattedDuration from '../../util/formatted-duration'
+import FormattedMode from '../../util/formatted-mode'
+import Icon from '../../util/icon'
 import LegDiagramPreview from '../leg-diagram-preview'
+import Strong from '../../util/strong-text'
 
 /**
  * Default access leg component for narrative itinerary.
  */
 export default class AccessLeg extends Component {
   static propTypes = {
+    active: PropTypes.bool,
     activeStep: PropTypes.number,
+    index: PropTypes.number,
     leg: PropTypes.object,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
   }
 
   _onLegClick = (e) => {
-    const {active, index, leg, setActiveLeg} = this.props
+    const { active, index, leg, setActiveLeg } = this.props
     if (active) {
       setActiveLeg(null)
     } else {
@@ -30,7 +32,7 @@ export default class AccessLeg extends Component {
     }
   }
 
-  _onStepClick (e, step, index) {
+  _onStepClick(e, step, index) {
     if (index === this.props.activeStep) {
       this.props.setActiveStep(null)
     } else {
@@ -38,46 +40,53 @@ export default class AccessLeg extends Component {
     }
   }
 
-  render () {
+  render() {
     const { active, activeStep, index, leg } = this.props
     return (
-      <div
-        className={`leg${active ? ' active' : ''} access-leg`}
-        key={index}>
-        <button
-          className='header'
-          onClick={this._onLegClick}>
-          <span><Icon type={`caret-${active ? 'down' : 'right'}`} /></span>
+      <div className={`leg${active ? ' active' : ''} access-leg`} key={index}>
+        <button className="header" onClick={this._onLegClick}>
+          <span>
+            <Icon type={`caret-${active ? 'down' : 'right'}`} />
+          </span>
           <FormattedMessage
-            id='components.AccessLeg.summary'
+            id="components.AccessLeg.summary"
             values={{
               distance: humanizeDistanceString(leg.distance),
-              distanceSpan: contents => <span className='leg-distance'>{contents}</span>,
-              durationSpan: contents => <span className='leg-duration'>{contents}</span>,
+              distanceSpan: (contents) => (
+                <span className="leg-distance">{contents}</span>
+              ),
+              durationSpan: (contents) => (
+                <span className="leg-duration">{contents}</span>
+              ),
               formattedDuration: <FormattedDuration duration={leg.duration} />,
               mode: <FormattedMode mode={leg.mode.toLowerCase()} />,
               strong: Strong
             }}
           />
         </button>
-        {active &&
-          <div className='step-by-step'>
-            <div className='access-leg'>
+        {active && (
+          <div className="step-by-step">
+            <div className="access-leg">
               {leg.steps.map((step, stepIndex) => {
                 const stepIsActive = activeStep === stepIndex
                 return (
                   <button
                     className={`step ${stepIsActive ? 'active' : ''}`}
                     key={stepIndex}
-                    onClick={(e) => this._onStepClick(e, step, stepIndex)}>
-                    <span className='step-distance'>{humanizeDistanceString(step.distance)}</span>
-                    <span className='step-text'>{coreUtils.itinerary.getStepInstructions(step)}</span>
+                    onClick={(e) => this._onStepClick(e, step, stepIndex)}
+                  >
+                    <span className="step-distance">
+                      {humanizeDistanceString(step.distance)}
+                    </span>
+                    <span className="step-text">
+                      {coreUtils.itinerary.getStepInstructions(step)}
+                    </span>
                   </button>
                 )
               })}
             </div>
           </div>
-        }
+        )}
         <LegDiagramPreview leg={leg} />
       </div>
     )
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 3b33267af..a935115b0 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -15,7 +15,7 @@ import styled from 'styled-components'
 import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 
 import { ComponentContext } from '../../../util/contexts'
-import { setLegDiagram } from '../../../actions/map'
+import { setLegDiagram, setMapillaryId } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
@@ -55,6 +55,7 @@ class ConnectedItineraryBody extends Component {
       itinerary,
       setActiveLeg,
       setLegDiagram,
+      setMapillaryId,
       setViewedTrip,
       timeOptions
     } = this.props
@@ -69,6 +70,7 @@ class ConnectedItineraryBody extends Component {
           itinerary={itinerary}
           LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
+          mapillaryCallback={setMapillaryId}
           mapillaryKey={config?.mapillary?.key}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
@@ -103,6 +105,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = {
   setLegDiagram,
+  setMapillaryId,
   setViewedTrip
 }
 
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 914a05a2e..6ba9ec15b 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -1,22 +1,20 @@
+/* eslint-disable no-case-declarations */
 import clone from 'clone'
-import update from 'immutability-helper'
+import coreUtils from '@opentripplanner/core-utils'
 import isEqual from 'lodash.isequal'
 import objectPath from 'object-path'
-import coreUtils from '@opentripplanner/core-utils'
+import update from 'immutability-helper'
 
+import { FETCH_STATUS } from '../util/constants'
+import { getTimestamp } from '../util/state'
+import { isBatchRoutingEnabled } from '../util/itinerary'
 import { MainPanelContent, MobileScreens } from '../actions/ui'
-import {FETCH_STATUS} from '../util/constants'
-import {getTimestamp} from '../util/state'
-import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { getTransitModes, isTransit } = coreUtils.itinerary
 const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
-const {
-  ensureSingleAccessMode,
-  getDefaultQuery,
-  getTripOptionsFromQuery
-} = coreUtils.query
+const { ensureSingleAccessMode, getDefaultQuery, getTripOptionsFromQuery } =
+  coreUtils.query
 const { getItem, removeItem, storeItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
@@ -31,8 +29,8 @@ const MAX_RECENT_STORAGE = 5
  * TODO: maybe it's a better idea to move all of this to a script that can do
  *  JSON Schema validation and other stuff.
  */
-function validateInitialState (initialState) {
-  const {config} = initialState
+function validateInitialState(initialState) {
+  const { config } = initialState
 
   const errors = []
 
@@ -45,17 +43,18 @@ function validateInitialState (initialState) {
     objectPath.get(config, 'persistence.strategy') === 'localStorage' &&
     objectPath.get(config, 'geocoder.type') === 'ARCGIS'
   ) {
-    errors.push(new Error('Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'))
+    errors.push(
+      new Error(
+        'Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'
+      )
+    )
   }
 
   if (errors.length > 0) {
     throw new Error(
-      errors.reduce(
-        (message, error) => {
-          return `${message}\n- ${error.message}`
-        },
-        'Encountered the following configuration errors:'
-      )
+      errors.reduce((message, error) => {
+        return `${message}\n- ${error.message}`
+      }, 'Encountered the following configuration errors:')
     )
   }
 }
@@ -64,7 +63,7 @@ function validateInitialState (initialState) {
  * Create the initial state of otp-react-redux using user-provided config, any
  * items in localStorage and a few defaults.
  */
-export function getInitialState (userDefinedConfig) {
+export function getInitialState(userDefinedConfig) {
   const defaultConfig = {
     autoPlan: {
       default: 'ONE_LOCATION_CHANGED',
@@ -131,14 +130,16 @@ export function getInitialState (userDefinedConfig) {
   // Recent trip plan searches (excluding time/date parameters to avoid complexity).
   const recentSearches = getItem('recentSearches', [])
   // Filter valid locations found into locations list.
-  const locations = [home, work].filter(p => p)
+  const locations = [home, work].filter((p) => p)
   // TODO: parse and merge URL query params w/ default query
 
   // populate query by merging any provided query params w/ the default params
   const currentQuery = Object.assign(defaults, userDefinedConfig.initialQuery)
   // Add configurable locations to home and work locations
   if (config.locations) {
-    locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
+    locations.push(
+      ...config.locations.map((l) => ({ ...l, type: 'suggested' }))
+    )
   }
   // Check for alternative routerId in session storage. This is generally used
   // for testing single GTFS feed OTP graphs that are deployed to feed-specific
@@ -159,7 +160,7 @@ export function getInitialState (userDefinedConfig) {
   // If 'TRANSIT' is included in the mode list, replace it with individual modes
   if (queryModes.includes('TRANSIT')) {
     // Isolate the non-transit modes in queryModes
-    queryModes = queryModes.filter(m => !isTransit(m))
+    queryModes = queryModes.filter((m) => !isTransit(m))
     // Add all possible transit modes
     queryModes = queryModes.concat(getTransitModes(config))
     // Stringify and set as OTP 'mode' query param
@@ -256,7 +257,7 @@ export function getInitialState (userDefinedConfig) {
   }
 }
 
-function createOtpReducer (config) {
+function createOtpReducer(config) {
   const initialState = getInitialState(config)
   // validate the initial state
   validateInitialState(initialState)
@@ -268,35 +269,32 @@ function createOtpReducer (config) {
     const activeSearch = state.searches[searchId]
     switch (action.type) {
       case 'ROUTING_REQUEST':
-        const {
-          activeItinerary,
-          pending,
-          updateSearchInReducer
-        } = action.payload
+        const { activeItinerary, pending, updateSearchInReducer } =
+          action.payload
         const searchUpdate = updateSearchInReducer
           ? {
-            activeItinerary: { $set: activeItinerary },
-            activeLeg: { $set: null },
-            activeStep: { $set: null },
-            pending: { $set: pending },
-            // FIXME: get query from action payload?
-            query: { $set: clone(state.currentQuery) },
-            // omit requests reset to make sure requests can be added to this
-            // search
-            timestamp: { $set: getTimestamp() }
-          }
-          : {
-            $set: {
-              activeItinerary,
-              activeLeg: null,
-              activeStep: null,
-              pending,
+              activeItinerary: { $set: activeItinerary },
+              activeLeg: { $set: null },
+              activeStep: { $set: null },
+              pending: { $set: pending },
               // FIXME: get query from action payload?
-              query: clone(state.currentQuery),
-              response: [],
-              timestamp: getTimestamp()
+              query: { $set: clone(state.currentQuery) },
+              // omit requests reset to make sure requests can be added to this
+              // search
+              timestamp: { $set: getTimestamp() }
+            }
+          : {
+              $set: {
+                activeItinerary,
+                activeLeg: null,
+                activeStep: null,
+                pending,
+                // FIXME: get query from action payload?
+                query: clone(state.currentQuery),
+                response: [],
+                timestamp: getTimestamp()
+              }
             }
-          }
         return update(state, {
           activeSearchId: { $set: searchId },
           searches: { [searchId]: searchUpdate }
@@ -307,19 +305,22 @@ function createOtpReducer (config) {
             [searchId]: {
               pending: { $set: activeSearch.pending - 1 },
               response: {
-                $push: [{
-                  error: action.payload.error,
-                  requestId,
-                  url: action.payload.url
-                }]
+                $push: [
+                  {
+                    error: action.payload.error,
+                    requestId,
+                    url: action.payload.url
+                  }
+                ]
               }
             }
           }
         })
       case 'ROUTING_RESPONSE':
-        const response = (state.currentQuery.routingType === 'PROFILE')
-          ? filterProfileOptions(action.payload.response)
-          : action.payload.response
+        const response =
+          state.currentQuery.routingType === 'PROFILE'
+            ? filterProfileOptions(action.payload.response)
+            : action.payload.response
         response.requestId = requestId
         return update(state, {
           searches: {
@@ -350,8 +351,8 @@ function createOtpReducer (config) {
         })
       case 'SET_ACTIVE_ITINERARIES':
         const responseUpdate = {}
-        Object.entries(action.payload.assignedItinerariesByResponse)
-          .forEach(([ responseIdx, responsePlanItineraries ]) => {
+        Object.entries(action.payload.assignedItinerariesByResponse).forEach(
+          ([responseIdx, responsePlanItineraries]) => {
             responseUpdate[responseIdx] = {
               plan: {
                 itineraries: {
@@ -359,7 +360,8 @@ function createOtpReducer (config) {
                 }
               }
             }
-          })
+          }
+        )
         return update(state, {
           searches: {
             [searchId]: {
@@ -532,18 +534,26 @@ function createOtpReducer (config) {
         if (action.payload.indexOf('recent') !== -1) {
           const recentPlaces = clone(state.user.recentPlaces)
           // Remove recent from list of recent places
-          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
+          const removeIndex = recentPlaces.findIndex(
+            (l) => l.id === action.payload
+          )
           recentPlaces.splice(removeIndex, 1)
           storeItem('recent', recentPlaces)
           return removeIndex !== -1
-            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { recentPlaces: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         } else {
           const locations = clone(state.user.locations)
-          const removeIndex = locations.findIndex(l => l.id === action.payload)
+          const removeIndex = locations.findIndex(
+            (l) => l.id === action.payload
+          )
           removeItem(action.payload)
           return removeIndex !== -1
-            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { locations: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         }
       }
@@ -552,23 +562,29 @@ function createOtpReducer (config) {
         switch (type) {
           case 'recent': {
             const recentPlaces = clone(state.user.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            const index = recentPlaces.findIndex((l) =>
+              matchLatLon(l, location)
+            )
             // Replace recent place if duplicate found or add to list.
             if (index !== -1) recentPlaces.splice(index, 1, location)
             else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            const sortedPlaces = recentPlaces.sort(
+              (a, b) => b.timestamp - a.timestamp
+            )
             // Only keep up to 5 recent locations
             // FIXME: Check for duplicates
             if (recentPlaces.length >= MAX_RECENT_STORAGE) {
               sortedPlaces.splice(MAX_RECENT_STORAGE)
             }
             storeItem('recent', recentPlaces)
-            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
+            return update(state, {
+              user: { recentPlaces: { $set: sortedPlaces } }
+            })
           }
           default: {
             const locations = clone(state.user.locations)
             // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
+            const index = locations.findIndex((l) => l.type === type)
             if (index !== -1) locations.splice(index, 1, location)
             else locations.push(location)
             storeItem(type, location)
@@ -580,11 +596,15 @@ function createOtpReducer (config) {
         // Payload is the stop ID.
         const favoriteStops = clone(state.user.favoriteStops)
         // Remove stop from favorites
-        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
+        const removeIndex = favoriteStops.findIndex(
+          (l) => l.id === action.payload
+        )
         favoriteStops.splice(removeIndex, 1)
         storeItem('favoriteStops', favoriteStops)
         return removeIndex !== -1
-          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
+          ? update(state, {
+              user: { favoriteStops: { $splice: [[removeIndex, 1]] } }
+            })
           : state
       }
       case 'REMEMBER_STOP': {
@@ -601,10 +621,12 @@ function createOtpReducer (config) {
         }
         const favoriteStops = clone(state.user.favoriteStops)
         if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          window.alert(
+            `Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`
+          )
           return state
         }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        const index = favoriteStops.findIndex((s) => s.id === stop.id)
         // Do nothing if duplicate stop found.
         if (index !== -1) {
           console.warn(`Stop with id ${stop.id} already exists in favorites.`)
@@ -613,15 +635,19 @@ function createOtpReducer (config) {
           favoriteStops.unshift(stop)
         }
         storeItem('favoriteStops', favoriteStops)
-        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
+        return update(state, {
+          user: { favoriteStops: { $set: favoriteStops } }
+        })
       }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
         if (!action.payload) removeItem('expandAdvanced')
-        return update(state, { user: {
-          expandAdvanced: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            expandAdvanced: { $set: action.payload }
+          }
+        })
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)
         let recentPlaces = clone(state.user.recentPlaces)
@@ -633,19 +659,25 @@ function createOtpReducer (config) {
           removeItem('recent')
           removeItem('recentSearches')
         }
-        return update(state, { user: {
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches },
-          trackRecent: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            recentPlaces: { $set: recentPlaces },
+            recentSearches: { $set: recentSearches },
+            trackRecent: { $set: action.payload }
+          }
+        })
       }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
-        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
+        const duplicateIndex = searches.findIndex((s) =>
+          isEqual(s.query, action.payload.query)
+        )
         // Overwrite duplicate search (so that new timestamp is stored).
         if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
         else searches.unshift(action.payload)
-        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
+        const sortedSearches = searches.sort(
+          (a, b) => b.timestamp - a.timestamp
+        )
         // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
         if (sortedSearches.length >= MAX_RECENT_STORAGE) {
           sortedSearches.splice(MAX_RECENT_STORAGE)
@@ -654,12 +686,14 @@ function createOtpReducer (config) {
         return update(state, { user: { searches: { $set: sortedSearches } } })
       case 'FORGET_SEARCH': {
         const recentSearches = clone(state.user.recentSearches)
-        const index = recentSearches.findIndex(l => l.id === action.payload)
+        const index = recentSearches.findIndex((l) => l.id === action.payload)
         // Remove item from list of recent searches
         recentSearches.splice(index, 1)
         storeItem('recentSearches', recentSearches)
         return index !== -1
-          ? update(state, { user: { recentSearches: { $splice: [[index, 1]] } } })
+          ? update(state, {
+              user: { recentSearches: { $splice: [[index, 1]] } }
+            })
           : state
       }
       case 'SET_AUTOPLAN':
@@ -686,12 +720,13 @@ function createOtpReducer (config) {
       case 'SET_ROUTER_ID':
         const routerId = action.payload
         // Store original path value in originalPath variable.
-        const originalPath = config.api.originalPath || config.api.path || '/otp/routers/default'
+        const originalPath =
+          config.api.originalPath || config.api.path || '/otp/routers/default'
         const path = routerId
           ? `/otp/routers/${routerId}`
-          // If routerId is null, revert to the original config's API path (or
-          // the standard path if that is not found).
-          : originalPath
+          : // If routerId is null, revert to the original config's API path (or
+            // the standard path if that is not found).
+            originalPath
         // Store routerId in session storage (persists through page reloads but
         // not when a new tab/window is opened).
         if (routerId) window.sessionStorage.setItem('routerId', routerId)
@@ -707,7 +742,15 @@ function createOtpReducer (config) {
       case 'SET_LEG_DIAGRAM':
         return update(state, {
           ui: {
-            diagramLeg: { $set: action.payload }
+            diagramLeg: { $set: action.payload },
+            mapillaryId: { $set: false }
+          }
+        })
+      case 'SET_MAPILLARY_ID':
+        return update(state, {
+          ui: {
+            diagramLeg: { $set: false },
+            mapillaryId: { $set: action.payload }
           }
         })
       case 'SET_ELEVATION_POINT':
@@ -742,13 +785,15 @@ function createOtpReducer (config) {
         })
 
       case 'NEARBY_STOPS_RESPONSE':
-        const {focusStopId, stops} = action.payload
+        const { focusStopId, stops } = action.payload
         const stopLookup = {}
-        stops.forEach(s => {
+        stops.forEach((s) => {
           stopLookup[s.id] = s
         })
 
-        const stopIds = stops.map(stop => stop.id).filter(id => focusStopId !== id)
+        const stopIds = stops
+          .map((stop) => stop.id)
+          .filter((id) => focusStopId !== id)
 
         if (!focusStopId) {
           return update(state, {
@@ -762,20 +807,24 @@ function createOtpReducer (config) {
           // losing the child stops field we're adding here.
           delete stopLookup[focusStopId]
           return update(state, {
-            transitIndex: { stops: {
-              // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
-              $merge: stopLookup, // going to include the parentStop
-              // For the parent stop, we want to add the nearby stops as a new child stops field
-              [focusStopId]: {$merge: {nearbyStops: stopIds}}
-            } }
+            transitIndex: {
+              stops: {
+                // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
+                $merge: stopLookup, // going to include the parentStop
+                // For the parent stop, we want to add the nearby stops as a new child stops field
+                [focusStopId]: { $merge: { nearbyStops: stopIds } }
+              }
+            }
           })
         }
       case 'FIND_NEARBY_AMENITIES_RESPONSE':
         const { stopId, ...amenities } = action.payload
         return update(state, {
-          transitIndex: { stops: {
-            [stopId]: {$merge: amenities}
-          } }
+          transitIndex: {
+            stops: {
+              [stopId]: { $merge: amenities }
+            }
+          }
         })
       case 'STOPS_WITHIN_BBOX_RESPONSE':
         return update(state, {
@@ -826,10 +875,12 @@ function createOtpReducer (config) {
       case 'SET_VIEWED_STOP':
         if (action.payload) {
           // If setting to a stop (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
-            viewedStop: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
+              viewedStop: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed stop with null
           return update(state, { ui: { viewedStop: { $set: action.payload } } })
@@ -843,18 +894,24 @@ function createOtpReducer (config) {
         return update(state, { ui: { viewedTrip: { $set: null } } })
 
       case 'SET_HOVERED_STOP':
-        return update(state, { ui: { highlightedStop: { $set: action.payload } } })
+        return update(state, {
+          ui: { highlightedStop: { $set: action.payload } }
+        })
 
       case 'SET_VIEWED_ROUTE':
         if (action.payload) {
           // If setting to a route (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
-            viewedRoute: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
+              viewedRoute: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed route with null
-          return update(state, { ui: { viewedRoute: { $set: action.payload } } })
+          return update(state, {
+            ui: { viewedRoute: { $set: action.payload } }
+          })
         }
       case 'FIND_STOP_RESPONSE':
         return update(state, {
@@ -934,7 +991,9 @@ function createOtpReducer (config) {
         })
       case 'TOGGLE_AUTO_REFRESH':
         storeItem('autoRefreshStopTimes', action.payload)
-        return update(state, { user: { autoRefreshStopTimes: { $set: action.payload } } })
+        return update(state, {
+          user: { autoRefreshStopTimes: { $set: action.payload } }
+        })
 
       case 'FIND_ROUTES_RESPONSE':
         // If routes is undefined, initialize it w/ the full payload
@@ -951,7 +1010,9 @@ function createOtpReducer (config) {
         // If routes is undefined, initialize it w/ this route only
         if (!state.transitIndex.routes) {
           return update(state, {
-            transitIndex: { routes: { $set: { [action.payload.id]: action.payload } } }
+            transitIndex: {
+              routes: { $set: { [action.payload.id]: action.payload } }
+            }
           })
         }
         // Otherwise, overwrite only this route
@@ -1008,19 +1069,20 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             etaEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const estimates = action.payload.estimates || []
-                estimates.forEach(estimate => {
+                estimates.forEach((estimate) => {
                   if (!fromData[estimate.company]) {
                     fromData[estimate.company] = {}
                   }
-                  fromData[estimate.company][estimate.productId] = Object.assign(
-                    {
-                      estimateTimestamp: new Date()
-                    },
-                    estimate
-                  )
+                  fromData[estimate.company][estimate.productId] =
+                    Object.assign(
+                      {
+                        estimateTimestamp: new Date()
+                      },
+                      estimate
+                    )
                 })
                 return fromData
               }
@@ -1031,7 +1093,7 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             rideEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const { company, rideEstimate, to } = action.payload
                 if (!rideEstimate) {
@@ -1078,23 +1140,25 @@ function createOtpReducer (config) {
       case 'UPDATE_OVERLAY_VISIBILITY':
         const mapOverlays = clone(state.config.map.overlays)
         for (const key in action.payload) {
-          const overlay = mapOverlays.find(o => o.name === key)
+          const overlay = mapOverlays.find((o) => o.name === key)
           overlay.visible = action.payload[key]
         }
-        return update(state,
-          { config: { map: { overlays: { $set: mapOverlays } } } }
-        )
+        return update(state, {
+          config: { map: { overlays: { $set: mapOverlays } } }
+        })
       case 'UPDATE_ITINERARY_FILTER':
-        return update(state,
-          { filter: { $set: action.payload } }
-        )
+        return update(state, { filter: { $set: action.payload } })
       case 'SET_PREVIOUS_ITINERARY_VIEW':
-        return update(state, { ui: { previousItineraryView: { $set: action.payload } } })
+        return update(state, {
+          ui: { previousItineraryView: { $set: action.payload } }
+        })
       case 'UPDATE_LOCALE':
-        return update(state, { ui: {
-          locale: { $set: action.payload.locale },
-          localizedMessages: { $set: action.payload.messages }
-        }})
+        return update(state, {
+          ui: {
+            locale: { $set: action.payload.locale },
+            localizedMessages: { $set: action.payload.messages }
+          }
+        })
 
       case 'UPDATE_ROUTE_VIEWER_FILTER':
         return update(state, {

From 3aa1cee089658307d9993dcaccef1ba556fc3c2c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 13 Jan 2022 14:00:58 +0100
Subject: [PATCH 095/270] improvement(mapillary-frame): show fake loading
 screen to provide click feedback

---
 lib/components/map/mapillary-frame.tsx | 29 ++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
index f4225abde..b8e79a262 100644
--- a/lib/components/map/mapillary-frame.tsx
+++ b/lib/components/map/mapillary-frame.tsx
@@ -1,5 +1,8 @@
 import { Button } from 'react-bootstrap'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+
+// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
+import Icon from '../util/icon'
 
 const MapillaryFrame = ({
   id,
@@ -8,12 +11,34 @@ const MapillaryFrame = ({
   id: string
   onClose?: () => void
 }): React.ReactElement => {
+  const [fakeLoad, setFakeLoad] = useState(false)
+  useEffect(() => {
+    // If the ID changed, show a "fake" loading screen to indicate to the user
+    // something is happening
+    setFakeLoad(true)
+    setTimeout(() => setFakeLoad(false), 750)
+  }, [id])
+
   return (
     <div className="leg-diagram" style={{ height: '50vh', zIndex: 999 }}>
+      <div
+        style={{
+          alignItems: 'center',
+          display: fakeLoad ? 'flex' : 'none',
+          height: '100%',
+          justifyContent: 'center'
+        }}
+      >
+        <Icon className="fa-spin" type="spinner" />
+      </div>
       <iframe
         frameBorder="0"
         src={`https://www.mapillary.com/embed?image_key=${id}&style=photo`}
-        style={{ height: '100%', width: '100%' }}
+        style={{
+          display: fakeLoad ? 'none' : 'block',
+          height: '100%',
+          width: '100%'
+        }}
         title="Imagery of the street"
       />
       <Button

From 568ab7a0bd7eaf264b02dc5d2b8317c0c54ac2e3 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 13 Jan 2022 14:12:57 +0100
Subject: [PATCH 096/270] improvement(map/mapillary-frame): improve
 accessibility

---
 lib/components/map/mapillary-frame.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
index b8e79a262..795f8d48a 100644
--- a/lib/components/map/mapillary-frame.tsx
+++ b/lib/components/map/mapillary-frame.tsx
@@ -42,6 +42,7 @@ const MapillaryFrame = ({
         title="Imagery of the street"
       />
       <Button
+        aria-label="Close"
         className="mapillary-close-button close-button clear-button-formatting"
         onClick={onClose}
       >

From 3c878981d3697633653a221f70030de0b3bb6b0c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 14 Jan 2022 16:22:52 -0500
Subject: [PATCH 097/270] chore(deps): Upgrade to @opentripplanner/trip-form
 1.1.0 and core-utils 4.7.0.

---
 __tests__/actions/__snapshots__/api.js.snap |  4 +-
 i18n/en-US.yml                              | 44 ++++++++++++++++++
 i18n/fr-FR.yml                              | 35 +++++++++++++++
 package.json                                |  4 +-
 yarn.lock                                   | 49 +++++++++++++++++----
 5 files changed, 124 insertions(+), 12 deletions(-)

diff --git a/__tests__/actions/__snapshots__/api.js.snap b/__tests__/actions/__snapshots__/api.js.snap
index 226cc8217..b3280c7a3 100644
--- a/__tests__/actions/__snapshots__/api.js.snap
+++ b/__tests__/actions/__snapshots__/api.js.snap
@@ -35,7 +35,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read properties of undefined (reading 'trackRecent')],
+        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
         "requestId": "abcd1239",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234",
@@ -110,7 +110,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read properties of undefined (reading 'trackRecent')],
+        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
         "requestId": "abcd1236",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234",
diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index d68c5ee3c..b60a9276d 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -634,6 +634,50 @@ components:
     prompt: Where do you want to go?
 
 otpUi:
+  DateTimeSelector:
+    arrive: Arrive by
+    depart: Depart at
+    now: Leave now
+  queryParameters:
+    bikeSpeed: Bicycle Speed
+    # 1 mile = 100 "centimiles"
+    # There are exceptions in English for 1/10 mile , 1/4 mile, 1/2 mile etc.
+    distanceInMiles: >
+      {centimiles, select, 
+        10 {1/10 mile}
+        25 {1/4 mile}
+        50 {1/2 mile}
+        75 {3/4 mile}
+        other {{miles, number, :: unit/mile unit-width-full-name}}
+      }
+    maxBikeDistance: Maximum Bike
+    maxBikeTime: Max Bike Time
+    maxEScooterDistance: Maximum E-scooter Distance
+    maxWalkDistance: Maximum Walk
+    maxWalkTime: Max Walk Time
+    optimizeBikeFlat: Flat Trip
+    optimizeBikeFriendly: Bike-Friendly Trip
+    optimizeBikeSpeed: Speed
+    optimizeFor: Optimize for
+    optimizeQuick: Speed
+    optimizeTransfers: Fewest Transfers
+    speedInMilesPerHour: "{mph} MPH" # Original units were all caps.
+    walkSpeed: Walk Speed
+    watts: E-scooter Power
+    watts125kidsHoverboard: Kid's hoverboard (6 mph)
+    watts1500powerfulEscooter: Powerful E-scooter (24 mph)
+    watts250entryLevelEscooter: Entry-level scooter (11 mph)
+    watts500robustEscooter: Robust E-scooter (18 mph)
+    # Note to translator: This text is width-constrained.
+    wheelchair: Prefer Wheelchair Accessible Routes
+  SettingsSelectorPanel:
+    bikeOnly: Bike Only
+    escooterOnly: E-scooter Only
+    takeTransit: Take Transit
+    travelPreferences: Travel Preferences
+    use: Use # as in "Use bus, train, subway".
+    useCompanies: Use companies # as in :"Use companies: Spin, Lime, Bolt"
+    walkOnly: Walk Only
   TripDetails:
     calories: "Calories Burned: <strong>{calories, number, ::.}</strong>"
     caloriesDescription: >
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 06a99cb15..987f44ce0 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -615,6 +615,41 @@ components:
     prompt: Où désirez-vous aller ?
 
 otpUi:
+  DateTimeSelector:
+    arrive: Arrivée
+    depart: Départ
+    now: Tout de suite
+  queryParameters:
+    bikeSpeed: Vitesse à vélo
+    distanceInMiles: "{miles, number, :: unit/mile unit-width-full-name}"
+    maxBikeDistance: Distance max. à vélo
+    maxBikeTime: Durée max. à vélo
+    maxEScooterDistance: Distance max. en trottinette
+    maxWalkDistance: Distance max. à pied
+    maxWalkTime: Durée max. à pied
+    optimizeBikeFlat: avec moins de reliefs
+    optimizeBikeFriendly: plus pratiques à vélo
+    optimizeBikeSpeed: plus rapides
+    optimizeFor: Privilégier les trajets
+    optimizeQuick: plus rapides
+    optimizeTransfers: avec moins de correspondances
+    speedInMilesPerHour: "{mph} mi/h"
+    walkSpeed: Vitesse à pied
+    watts: Puissance de la trottinette électrique
+    watts125kidsHoverboard: Hoverboard pour enfants (10 km/h)
+    watts1500powerfulEscooter: Trottinette puissante (40 km/h)
+    watts250entryLevelEscooter: Trottinette de base (18 km/h)
+    watts500robustEscooter: Trottinette robuste (30 km/h)
+    # Note to translator: This text is width-constrained.
+    wheelchair: Trajets accessibles en fauteuil roulant
+  SettingsSelectorPanel:
+    bikeOnly: Vélo uniquement
+    escooterOnly: Trottinette uniquement
+    takeTransit: En transports
+    travelPreferences: Préférences de trajet
+    use: Utiliser # as in "Use bus, train, subway"
+    useCompanies: Prestataires # as in "Use companies: Spin, Lime, Bolt"
+    walkOnly: À pied uniquement
   TripDetails:
     calories: "Calories dépensées : <strong>{calories, number, ::.}</strong>"
     caloriesDescription: >
diff --git a/package.json b/package.json
index f2e70ecf5..5a8f70e83 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",
     "@opentripplanner/base-map": "^2.0.0",
-    "@opentripplanner/core-utils": "^4.6.0",
+    "@opentripplanner/core-utils": "^4.7.0",
     "@opentripplanner/endpoints-overlay": "^1.3.0",
     "@opentripplanner/from-to-location-picker": "^1.3.0",
     "@opentripplanner/geocoder": "^1.1.1",
@@ -49,7 +49,7 @@
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
     "@opentripplanner/transitive-overlay": "^1.1.2",
     "@opentripplanner/trip-details": "^2.0.0",
-    "@opentripplanner/trip-form": "^1.6.0",
+    "@opentripplanner/trip-form": "^1.10.0",
     "@opentripplanner/trip-viewer-overlay": "^1.1.1",
     "@opentripplanner/vehicle-rental-overlay": "^1.2.1",
     "blob-stream": "^0.1.3",
diff --git a/yarn.lock b/yarn.lock
index 895f7809c..33deb055e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2446,7 +2446,7 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/core-utils@^4.5.0", "@opentripplanner/core-utils@^4.6.0":
+"@opentripplanner/core-utils@^4.5.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.6.0.tgz#f0f9924a2312b89a3f84d0a34c1a2d9f6c1ca615"
   integrity sha512-LQs8BrwqFXKHJOgRduKic9wEGqnNAcyrypTgKmx//Jzz6OmZyXNskrFNJwLR6HIgsps7isN/7hi3NuVFticgIA==
@@ -2464,6 +2464,24 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
+"@opentripplanner/core-utils@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.7.0.tgz#0a59f26344702e6a9b45f977c338c58d1773dc45"
+  integrity sha512-YqGbIG1vnZSaBsZO3ss0IZ16Tdx6Ze29iHOVO+kC3Plqu7HPv7/lhzA/3qCqlTLwNp+rkfsDlv06H/Gqr1mjHg==
+  dependencies:
+    "@mapbox/polyline" "^1.1.0"
+    "@opentripplanner/geocoder" "^1.1.2"
+    "@styled-icons/foundation" "^10.34.0"
+    "@turf/along" "^6.0.1"
+    bowser "^2.7.0"
+    date-fns "^2.23.0"
+    date-fns-tz "^1.1.4"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+    moment "^2.24.0"
+    prop-types "^15.7.2"
+    qs "^6.9.1"
+
 "@opentripplanner/endpoints-overlay@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-1.3.0.tgz#cda25f81963d28a0580d4737f82798de2a143904"
@@ -2631,19 +2649,21 @@
     flat "^5.0.2"
     velocity-react "^1.4.3"
 
-"@opentripplanner/trip-form@^1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-1.6.0.tgz#d681b6dc34a9a682bd20dcc5f8a68a621d62cfb5"
-  integrity sha512-y7jR9HigmS3khepPwSKvJmYdStvBhR9q0QioGY0ErVH+PfW1aIo4V7ClVHo0TGH4vOFSJakRVyrVnOC+ENRQJw==
+"@opentripplanner/trip-form@^1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-1.10.0.tgz#d58b8cf4890c58dcdd1f219cb537dd4333d5cf55"
+  integrity sha512-skk6NLz33RTi8TYlXI1vhWqhDJNUlpFlyzKhqF7VwBShLqw4633DH7CvObv9ho95ULwH2tYX+uuSDxMqV1F0NQ==
   dependencies:
-    "@opentripplanner/core-utils" "^4.1.0"
-    "@opentripplanner/icons" "^1.2.0"
+    "@opentripplanner/core-utils" "^4.5.0"
+    "@opentripplanner/icons" "^1.2.1"
     "@styled-icons/bootstrap" "^10.34.0"
     "@styled-icons/boxicons-regular" "^10.38.0"
     "@styled-icons/fa-regular" "^10.34.0"
     "@styled-icons/fa-solid" "^10.34.0"
+    flat "^5.0.2"
     moment "^2.17.1"
     react-indiana-drag-scroll "^2.0.1"
+    react-inlinesvg "^2.3.0"
 
 "@opentripplanner/trip-viewer-overlay@^1.1.1":
   version "1.1.1"
@@ -8898,7 +8918,7 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-exenv@^1.2.0:
+exenv@^1.2.0, exenv@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
@@ -16439,6 +16459,11 @@ react-fontawesome@^1.5.0:
   dependencies:
     prop-types "^15.5.6"
 
+react-from-dom@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.1.tgz#6740f5a3d79e0c354703e5c096b8fdfe0db71b0f"
+  integrity sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg==
+
 react-ga@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
@@ -16453,6 +16478,14 @@ react-indiana-drag-scroll@^2.0.1:
     debounce "^1.2.0"
     easy-bem "^1.1.1"
 
+react-inlinesvg@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz#62283c0ce7e9d11d8190ec3e89589102288830fd"
+  integrity sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==
+  dependencies:
+    exenv "^1.2.2"
+    react-from-dom "^0.6.0"
+
 react-input-autosize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"

From b70a22d60b1b93547689a6b93766d34e8b694b68 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 14 Jan 2022 16:36:36 -0500
Subject: [PATCH 098/270] test(api.js.snap): Revert a snapshot that was
 otherwise failing on Binh's machine.

---
 __tests__/actions/__snapshots__/api.js.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/actions/__snapshots__/api.js.snap b/__tests__/actions/__snapshots__/api.js.snap
index b3280c7a3..226cc8217 100644
--- a/__tests__/actions/__snapshots__/api.js.snap
+++ b/__tests__/actions/__snapshots__/api.js.snap
@@ -35,7 +35,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
+        "error": [TypeError: Cannot read properties of undefined (reading 'trackRecent')],
         "requestId": "abcd1239",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234",
@@ -110,7 +110,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
+        "error": [TypeError: Cannot read properties of undefined (reading 'trackRecent')],
         "requestId": "abcd1236",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234",

From 8336e60c03eef59d39bf6c63db94edee81acf716 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 14 Jan 2022 17:32:58 -0500
Subject: [PATCH 099/270] improvement(BatchRoutingPanel): Improve CSS layout.

---
 lib/components/app/app.css                |  4 -
 lib/components/app/batch-routing-panel.js | 95 +++++++++++------------
 lib/components/app/call-taker-panel.js    |  3 +-
 3 files changed, 45 insertions(+), 57 deletions(-)

diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index d2f94b2d9..9e9e642a8 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -62,10 +62,6 @@
   box-sizing: border-box;
 }
 
-/* Batch routing panel requires padding removed from sidebar */
-.batch-routing-panel {
-  padding: 10px;
-}
 /* View Switcher Styling */
 .view-switcher {
   align-items: center;
diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 6e6987d12..9f0de9698 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -1,85 +1,77 @@
-import React, { Component } from 'react'
-import { injectIntl } from 'react-intl'
+/* eslint-disable react/prop-types */
 import { connect } from 'react-redux'
-import styled from 'styled-components'
+import { injectIntl } from 'react-intl'
+import React, { Component } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import BatchSettings from '../form/batch-settings'
 import LocationField from '../form/connected-location-field'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
-import { getActiveSearch, getShowUserSettings } from '../../util/state'
-import ViewerContainer from '../viewers/viewer-container'
 import SwitchButton from '../form/switch-button'
-
-// Style for setting the top of the narrative itineraries based on the width of the window.
-// If the window width is less than 1200px (Bootstrap's "large" size), the
-// mode buttons will be shown on their own row, meaning that the
-// top position of this component needs to be lower (higher value
-// equals lower position on the page).
-// TODO: figure out a better way to use flex rendering for accommodating the mode button overflow.
-const NarrativeContainer = styled.div`
-  & .options.itinerary {
-    @media (min-width: 1200px) {
-      top: 160px;
-    }
-    @media (max-width: 1199px) {
-      top: 210px;
-    }
-  }
-`
+import ViewerContainer from '../viewers/viewer-container'
 
 /**
  * Main panel for the batch/trip comparison form.
  */
 class BatchRoutingPanel extends Component {
-  render () {
+  render() {
     const { intl, mobile } = this.props
     return (
-      <ViewerContainer className='batch-routing-panel'>
-        <div className='locations'>
+      <ViewerContainer
+        className="batch-routing-panel"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }}
+      >
+        <div className="form" style={{ padding: '10px' }}>
           <LocationField
-            inputPlaceholder={
-              intl.formatMessage(
-                { id: 'common.searchForms.enterStartLocation' },
-                { mobile }
-              )
-            }
-            locationType='from'
+            inputPlaceholder={intl.formatMessage(
+              { id: 'common.searchForms.enterStartLocation' },
+              { mobile }
+            )}
+            locationType="from"
             showClearButton
           />
           <LocationField
-            inputPlaceholder={
-              intl.formatMessage(
-                { id: 'common.searchForms.enterDestination' },
-                { mobile }
-              )
-            }
-            locationType='to'
+            inputPlaceholder={intl.formatMessage(
+              { id: 'common.searchForms.enterDestination' },
+              { mobile }
+            )}
+            locationType="to"
             showClearButton={!mobile}
           />
-          <div className='switch-button-container'>
-            <SwitchButton content={<i className='fa fa-exchange fa-rotate-90' />} />
+          <div className="switch-button-container">
+            <SwitchButton
+              content={<i className="fa fa-exchange fa-rotate-90" />}
+            />
           </div>
+          <BatchSettings />
         </div>
-        <BatchSettings />
         {/* FIXME: Add back user settings (home, work, etc.) once connected to
             the middleware persistence.
           !activeSearch && showUserSettings &&
           <UserSettings />
         */}
-        <NarrativeContainer className='desktop-narrative-container'>
+        <div
+          className="desktop-narrative-container"
+          style={{
+            flexGrow: 1,
+            overflowY: 'hidden'
+          }}
+        >
+          {/* FIXME: sharing styles with BatchRoutingPanel. */}
           <NarrativeItineraries
             containerStyle={{
-              bottom: '0',
               display: 'flex',
               flexDirection: 'column',
-              left: '0',
-              position: 'absolute',
-              right: '0'
+              height: '100%'
             }}
           />
-        </NarrativeContainer>
+        </div>
       </ViewerContainer>
     )
   }
@@ -103,6 +95,7 @@ const mapDispatchToProps = {
   setQueryParam: formActions.setQueryParam
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  injectIntl(BatchRoutingPanel)
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(BatchRoutingPanel))
diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 76b5b0beb..97670df55 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -292,8 +292,7 @@ class CallTakerPanel extends Component {
             containerStyle={{
               display: 'flex',
               flexDirection: 'column',
-              height: '100%',
-              marginTop: '0px' // Overrides the margin defined in CSS for `options itinerary`
+              height: '100%'
             }}
           />
         </div>

From 30ab8a0246e63d523f5482b12124fa8b528fb608 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 17 Jan 2022 11:23:59 -0500
Subject: [PATCH 100/270] feat(i18n, desktop-nav): Detect user locale, add UI
 override

---
 example-config.yml                      |  35 +++
 i18n/es-ES.yml                          |  25 ++
 i18n/ko-KR.yml                          |  25 ++
 i18n/vi-VN.yml                          |  25 ++
 i18n/zh-CN.yml                          |  25 ++
 lib/actions/ui.js                       | 328 +++++++++++++-----------
 lib/components/app/desktop-nav.js       |  56 ++--
 lib/components/app/locale-selector.tsx  |  82 ++++++
 lib/components/app/responsive-webapp.js |   2 +-
 lib/config.js                           |  15 ++
 lib/util/i18n.js                        | 120 ++++++---
 11 files changed, 525 insertions(+), 213 deletions(-)
 create mode 100644 i18n/es-ES.yml
 create mode 100644 i18n/ko-KR.yml
 create mode 100644 i18n/vi-VN.yml
 create mode 100644 i18n/zh-CN.yml
 create mode 100644 lib/components/app/locale-selector.tsx

diff --git a/example-config.yml b/example-config.yml
index 123383bcd..2d305894e 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -338,12 +338,16 @@ itinerary:
 ### The nested structure should be the same as the language files under the i18n folder.
 ### You can also customize OTP error messages for itinerary searches based on OTP HTTP codes.
 ### A separate message can be set for each language or locale if necessary.
+### All available languages should have an entry with at least a name identifier in this section so that
+### they may be rendered in the locale selector. 
+### Language display icons (flags) should be configured in config.js
 # language:
 #   allLanguages
 #     common:
 #       accessModes:
 #         bikeshare: Relay Bike
 #   en-US:
+#     name: English (US)
 #     common:
 #       accessModes:
 #         bikeshare: Blue Bike
@@ -365,6 +369,37 @@ itinerary:
 #         modes: "CAR_HAIL, CAR_RENT"
 #       480:
 #         msg: No available transit routes or rideshare/carshare service at origin.
+  # fr-FR:
+  #   name: French (France)
+  #   flag: 🇫🇷
+  #   config:
+  #     # App (hamburger) menu items
+  #     menuItems:
+  #       car-pool: Covoiturage
+  #       give-us-feedback: Donnez votre avis
+  #       log-my-commute: Mes trajets verts
+  #       traveler-tools: Outils du voyageur
+
+  # ko-KR:
+  #   name: 한국인
+
+  # vi-VN: 
+  #   name: Tiếng Việt
+
+  # zh-CN:
+  #   name: 中国人
+
+  # es-ES: 
+  #   name: Español
+
+  # ko-KR:
+  #   name: 한국인
+
+  # vi-VN: 
+  #   name: Tiếng Việt
+
+  # zh-CN:
+  #   name: 中国人
 
 ### Localization section to provide language/locale settings
 #localization:
diff --git a/i18n/es-ES.yml b/i18n/es-ES.yml
new file mode 100644
index 000000000..aa1f5b318
--- /dev/null
+++ b/i18n/es-ES.yml
@@ -0,0 +1,25 @@
+_id: es-ES
+_name: Spanish
+
+# This file contains localized strings (a.k.a. messages) for the language indicated above:
+#   - Messages are organized in various categories and sub-categories.
+#   - A component or JS module can use messages from one or more categories.
+#   - In the code, messages are retrieved using an ID that is simply the path to the message.
+#     Use the dot '.' to separate categories and sub-categories in the path.
+#     For instance, for the message defined in YML below:
+#         common
+#           modes
+#             subway: Metro#
+#     then use the snippet below with the corresponding message id:
+#         <FormattedMessage id='common.modes.subway' /> // renders "Metro".
+#
+# It is important that message ids in the code be consistent with
+# the categories in this file. Below are some general guidelines:
+#   - For starters, there are an 'actions', 'components' and 'common'
+#     categories. Additional categories may be added as needed.
+#   - Each sub-category under 'components' denotes a component and
+#     should contain messages that are used only by that component (e.g. button captions).
+#   - In contrast, some strings are common to multiple components,
+#     so it makes sense to group them by theme (e.g. accessModes) under the 'common' category.
+
+# Messages that are generated from actions
\ No newline at end of file
diff --git a/i18n/ko-KR.yml b/i18n/ko-KR.yml
new file mode 100644
index 000000000..4d2a193d5
--- /dev/null
+++ b/i18n/ko-KR.yml
@@ -0,0 +1,25 @@
+_id: ko-KR
+_name: Korean
+
+# This file contains localized strings (a.k.a. messages) for the language indicated above:
+#   - Messages are organized in various categories and sub-categories.
+#   - A component or JS module can use messages from one or more categories.
+#   - In the code, messages are retrieved using an ID that is simply the path to the message.
+#     Use the dot '.' to separate categories and sub-categories in the path.
+#     For instance, for the message defined in YML below:
+#         common
+#           modes
+#             subway: Metro#
+#     then use the snippet below with the corresponding message id:
+#         <FormattedMessage id='common.modes.subway' /> // renders "Metro".
+#
+# It is important that message ids in the code be consistent with
+# the categories in this file. Below are some general guidelines:
+#   - For starters, there are an 'actions', 'components' and 'common'
+#     categories. Additional categories may be added as needed.
+#   - Each sub-category under 'components' denotes a component and
+#     should contain messages that are used only by that component (e.g. button captions).
+#   - In contrast, some strings are common to multiple components,
+#     so it makes sense to group them by theme (e.g. accessModes) under the 'common' category.
+
+# Messages that are generated from actions
\ No newline at end of file
diff --git a/i18n/vi-VN.yml b/i18n/vi-VN.yml
new file mode 100644
index 000000000..ae5072697
--- /dev/null
+++ b/i18n/vi-VN.yml
@@ -0,0 +1,25 @@
+_id: vi-VN
+_name: Vietnamese
+
+# This file contains localized strings (a.k.a. messages) for the language indicated above:
+#   - Messages are organized in various categories and sub-categories.
+#   - A component or JS module can use messages from one or more categories.
+#   - In the code, messages are retrieved using an ID that is simply the path to the message.
+#     Use the dot '.' to separate categories and sub-categories in the path.
+#     For instance, for the message defined in YML below:
+#         common
+#           modes
+#             subway: Metro#
+#     then use the snippet below with the corresponding message id:
+#         <FormattedMessage id='common.modes.subway' /> // renders "Metro".
+#
+# It is important that message ids in the code be consistent with
+# the categories in this file. Below are some general guidelines:
+#   - For starters, there are an 'actions', 'components' and 'common'
+#     categories. Additional categories may be added as needed.
+#   - Each sub-category under 'components' denotes a component and
+#     should contain messages that are used only by that component (e.g. button captions).
+#   - In contrast, some strings are common to multiple components,
+#     so it makes sense to group them by theme (e.g. accessModes) under the 'common' category.
+
+# Messages that are generated from actions
\ No newline at end of file
diff --git a/i18n/zh-CN.yml b/i18n/zh-CN.yml
new file mode 100644
index 000000000..8836f0976
--- /dev/null
+++ b/i18n/zh-CN.yml
@@ -0,0 +1,25 @@
+_id: zh-CN
+_name: Chinese
+
+# This file contains localized strings (a.k.a. messages) for the language indicated above:
+#   - Messages are organized in various categories and sub-categories.
+#   - A component or JS module can use messages from one or more categories.
+#   - In the code, messages are retrieved using an ID that is simply the path to the message.
+#     Use the dot '.' to separate categories and sub-categories in the path.
+#     For instance, for the message defined in YML below:
+#         common
+#           modes
+#             subway: Metro#
+#     then use the snippet below with the corresponding message id:
+#         <FormattedMessage id='common.modes.subway' /> // renders "Metro".
+#
+# It is important that message ids in the code be consistent with
+# the categories in this file. Below are some general guidelines:
+#   - For starters, there are an 'actions', 'components' and 'common'
+#     categories. Additional categories may be added as needed.
+#   - Each sub-category under 'components' denotes a component and
+#     should contain messages that are used only by that component (e.g. button captions).
+#   - In contrast, some strings are common to multiple components,
+#     so it makes sense to group them by theme (e.g. accessModes) under the 'common' category.
+
+# Messages that are generated from actions
\ No newline at end of file
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 659363fa8..747a4f3c3 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -1,24 +1,88 @@
-import { push } from 'connected-react-router'
-import coreUtils from '@opentripplanner/core-utils'
 import { createAction } from 'redux-actions'
 import { matchPath } from 'react-router'
+import { push } from 'connected-react-router'
+import coreUtils from '@opentripplanner/core-utils'
 
-import { getUiUrlParams, getModesForActiveAgencyFilter } from '../util/state'
-import { getDefaultLocale, loadLocaleData } from '../util/i18n'
+import {
+  getConfigLocales,
+  getDefaultLocale,
+  loadLocaleData
+} from '../util/i18n'
+import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
 import { getPathFromParts } from '../util/ui'
 
-import { findRoute, setUrlSearch } from './api'
-import { setMapCenter, setMapZoom, setRouterId } from './config'
-import {
-  clearActiveSearch,
-  parseUrlQueryString,
-  setActiveSearch
-} from './form'
+import { clearActiveSearch, parseUrlQueryString, setActiveSearch } from './form'
 import { clearLocation } from './map'
+import { findRoute, setUrlSearch } from './api'
 import { setActiveItinerary } from './narrative'
+import { setMapCenter, setMapZoom, setRouterId } from './config'
 
 const updateLocale = createAction('UPDATE_LOCALE')
 
+// UI state enums
+
+export const MainPanelContent = {
+  ROUTE_VIEWER: 1,
+  STOP_VIEWER: 2
+}
+
+export const MobileScreens = {
+  // eslint-disable-next-line sort-keys
+  RESULTS_SUMMARY: 8,
+
+  // eslint-disable-next-line sort-keys
+  SEARCH_FORM: 3,
+
+  // eslint-disable-next-line sort-keys
+  SET_DATETIME: 7,
+
+  SET_FROM_LOCATION: 4,
+
+  // eslint-disable-next-line sort-keys
+  SET_INITIAL_LOCATION: 2,
+
+  // eslint-disable-next-line sort-keys
+  SET_OPTIONS: 6,
+
+  SET_TO_LOCATION: 5,
+
+  WELCOME_SCREEN: 1
+}
+
+/**
+ * Enum to describe the layout of the itinerary view
+ * (currently only used in batch results).
+ */
+export const ItineraryView = {
+  /** One itinerary is shown. (In mobile view, the map is hidden.) */
+  FULL: 'full',
+  /** One itinerary is shown, itinerary and map are focused on a leg. (The mobile view is split.) */
+  LEG: 'leg',
+  /** One itinerary leg is hidden. (In mobile view, the map is expanded.) */
+  LEG_HIDDEN: 'leg-hidden',
+  /** The list of itineraries is shown. (The mobile view is split.) */
+  LIST: 'list',
+  /** The list of itineraries is hidden. (In mobile view, the map is expanded.) */
+  LIST_HIDDEN: 'list-hidden'
+}
+
+const setPanel = createAction('SET_MAIN_PANEL_CONTENT')
+export const setMobileScreen = createAction('SET_MOBILE_SCREEN')
+
+export const clearPanel = createAction('CLEAR_MAIN_PANEL')
+
+const viewStop = createAction('SET_VIEWED_STOP')
+
+export const setHoveredStop = createAction('SET_HOVERED_STOP')
+
+export const setViewedTrip = createAction('SET_VIEWED_TRIP')
+
+const viewRoute = createAction('SET_VIEWED_ROUTE')
+
+export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
+
+const setPreviousItineraryView = createAction('SET_PREVIOUS_ITINERARY_VIEW')
+
 /**
  * Wrapper function for history#push (or, if specified, replace, etc.)
  * that preserves the current search or, if
@@ -28,7 +92,7 @@ const updateLocale = createAction('UPDATE_LOCALE')
  * @param  {string} replaceSearch optional search string to replace current one
  * @param  {func}   routingMethod the connected-react-router method to execute (defaults to push).
  */
-export function routeTo (url, replaceSearch, routingMethod = push) {
+export function routeTo(url, replaceSearch, routingMethod = push) {
   return function (dispatch, getState) {
     // Get search to preserve when routing to new path.
     const { router } = getState()
@@ -43,11 +107,79 @@ export function routeTo (url, replaceSearch, routingMethod = push) {
   }
 }
 
+export function setViewedRoute(payload) {
+  return function (dispatch, getState) {
+    dispatch(viewRoute(payload))
+
+    const path = getPathFromParts(
+      'route',
+      payload?.routeId,
+      // If a pattern is supplied, include pattern in path
+      payload?.patternId && 'pattern',
+      payload?.patternId
+    )
+    dispatch(routeTo(path))
+  }
+}
+
+/**
+ * Sets the main panel content according to the payload (one of the enum values
+ * of MainPanelContent) and routes the application to the correct path.
+ * @param {number} payload MainPanelContent value
+ */
+export function setMainPanelContent(payload) {
+  return function (dispatch, getState) {
+    const { otp, router } = getState()
+    if (otp.ui.mainPanelContent === payload) {
+      console.warn(
+        `Attempt to route from ${otp.ui.mainPanelContent} to ${payload}. Doing nothing`
+      )
+      // Do nothing if the panel is already set. This will guard against over
+      // enthusiastic routing and overwriting current/nested states.
+      return
+    }
+    dispatch(setPanel(payload))
+    switch (payload) {
+      case MainPanelContent.ROUTE_VIEWER:
+        dispatch(routeTo('/route'))
+        break
+      case MainPanelContent.STOP_VIEWER:
+        dispatch(routeTo('/stop'))
+        break
+      default:
+        // Clear route, stop, and trip viewer focus and route to root
+        dispatch(viewRoute(null))
+        dispatch(viewStop(null))
+        dispatch(setViewedTrip(null))
+        if (router.location.pathname !== '/') dispatch(routeTo('/'))
+        break
+    }
+  }
+}
+
+// Stop/Route/Trip Viewer actions
+export function setViewedStop(payload) {
+  return function (dispatch, getState) {
+    dispatch(viewStop(payload))
+    // payload.stopId may be undefined, which is ok as will be ignored by getPathFromParts
+    const path = getPathFromParts('stop', payload?.stopId)
+    dispatch(routeTo(path))
+  }
+}
+
+/**
+ * Split the path id into its parts (according to specified delimiter). Parse
+ * numbers if detected.
+ */
+function idToParams(id, delimiter = ',') {
+  return id.split(delimiter).map((s) => (isNaN(s) ? s : +s))
+}
+
 /**
  * Checks URL and redirects app to appropriate content (e.g., viewed
  * route or stop).
  */
-export function matchContentToUrl (location) {
+export function matchContentToUrl(location) {
   // eslint-disable-next-line complexity
   return function (dispatch, getState) {
     // This is a bit of a hack to make up for the fact that react-router does
@@ -87,12 +219,13 @@ export function matchContentToUrl (location) {
         }
         break
       case 'start':
-      case '@':
+      case '@': {
         // Parse comma separated params (ensuring numbers are parsed correctly).
-        let [lat, lon, zoom, routerId] = id ? idToParams(id) : []
+        const [lat, lon, zoom, routerId] = id ? idToParams(id) : []
         if (!lat || !lon) {
           // Attempt to parse path if lat/lon not found. (Legacy UI otp.js used
           // slashes in the pathname to specify lat, lon, etc.)
+          // prettier-ignore
           [,, lat, lon, zoom, routerId] = idToParams(location.pathname, '/')
         }
         console.log(lat, lon, zoom, routerId)
@@ -103,6 +236,7 @@ export function matchContentToUrl (location) {
         if (routerId) dispatch(setRouterId(routerId))
         dispatch(setMainPanelContent(null))
         break
+      }
       // For any other route path, just revert to default panel.
       default:
         dispatch(setMainPanelContent(null))
@@ -111,19 +245,11 @@ export function matchContentToUrl (location) {
   }
 }
 
-/**
- * Split the path id into its parts (according to specified delimiter). Parse
- * numbers if detected.
- */
-function idToParams (id, delimiter = ',') {
-  return id.split(delimiter).map(s => isNaN(s) ? s : +s)
-}
-
 /**
  * Event listener for responsive webapp that handles a back button press and
  * sets the active search and itinerary according to the URL query params.
  */
-export function handleBackButtonPress (e) {
+export function handleBackButtonPress(e) {
   return function (dispatch, getState) {
     const state = getState()
     const { activeSearchId } = state.otp
@@ -152,7 +278,9 @@ export function handleBackButtonPress (e) {
         dispatch(clearLocation({ type: 'from' }))
         dispatch(clearLocation({ type: 'to' }))
       } else if (previousSearchId) {
-        console.warn(`No search found in state history for search ID: ${previousSearchId}. Replanning...`)
+        console.warn(
+          `No search found in state history for search ID: ${previousSearchId}. Replanning...`
+        )
         // Set query to the params found in the URL and perform routing query
         // for search ID.
         // Also, we don't want to update the URL here because that will funk with
@@ -163,127 +291,11 @@ export function handleBackButtonPress (e) {
   }
 }
 
-export const setMobileScreen = createAction('SET_MOBILE_SCREEN')
-
-/**
- * Sets the main panel content according to the payload (one of the enum values
- * of MainPanelContent) and routes the application to the correct path.
- * @param {number} payload MainPanelContent value
- */
-export function setMainPanelContent (payload) {
-  return function (dispatch, getState) {
-    const { otp, router } = getState()
-    if (otp.ui.mainPanelContent === payload) {
-      console.warn(`Attempt to route from ${otp.ui.mainPanelContent} to ${payload}. Doing nothing`)
-      // Do nothing if the panel is already set. This will guard against over
-      // enthusiastic routing and overwriting current/nested states.
-      return
-    }
-    dispatch(setPanel(payload))
-    switch (payload) {
-      case MainPanelContent.ROUTE_VIEWER:
-        dispatch(routeTo('/route'))
-        break
-      case MainPanelContent.STOP_VIEWER:
-        dispatch(routeTo('/stop'))
-        break
-      default:
-        // Clear route, stop, and trip viewer focus and route to root
-        dispatch(viewRoute(null))
-        dispatch(viewStop(null))
-        dispatch(setViewedTrip(null))
-        if (router.location.pathname !== '/') dispatch(routeTo('/'))
-        break
-    }
-  }
-}
-
-const setPanel = createAction('SET_MAIN_PANEL_CONTENT')
-export const clearPanel = createAction('CLEAR_MAIN_PANEL')
-
-// Stop/Route/Trip Viewer actions
-
-export function setViewedStop (payload) {
-  return function (dispatch, getState) {
-    dispatch(viewStop(payload))
-    // payload.stopId may be undefined, which is ok as will be ignored by getPathFromParts
-    const path = getPathFromParts('stop', payload?.stopId)
-    dispatch(routeTo(path))
-  }
-}
-
-const viewStop = createAction('SET_VIEWED_STOP')
-
-export const setHoveredStop = createAction('SET_HOVERED_STOP')
-
-export const setViewedTrip = createAction('SET_VIEWED_TRIP')
-
-export function setViewedRoute (payload) {
-  return function (dispatch, getState) {
-    dispatch(viewRoute(payload))
-
-    const path = getPathFromParts(
-      'route',
-      payload?.routeId,
-      // If a pattern is supplied, include pattern in path
-      payload?.patternId && 'pattern',
-      payload?.patternId
-    )
-    dispatch(routeTo(path))
-  }
-}
-
-const viewRoute = createAction('SET_VIEWED_ROUTE')
-
-export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
-
-// UI state enums
-
-export const MainPanelContent = {
-  ROUTE_VIEWER: 1,
-  STOP_VIEWER: 2
-}
-
-export const MobileScreens = {
-  WELCOME_SCREEN: 1,
-  // eslint-disable-next-line sort-keys
-  SET_INITIAL_LOCATION: 2,
-  // eslint-disable-next-line sort-keys
-  SEARCH_FORM: 3,
-  SET_FROM_LOCATION: 4,
-  SET_TO_LOCATION: 5,
-  // eslint-disable-next-line sort-keys
-  SET_OPTIONS: 6,
-  // eslint-disable-next-line sort-keys
-  SET_DATETIME: 7,
-  // eslint-disable-next-line sort-keys
-  RESULTS_SUMMARY: 8
-}
-
-/**
- * Enum to describe the layout of the itinerary view
- * (currently only used in batch results).
- */
-export const ItineraryView = {
-  /** One itinerary is shown. (In mobile view, the map is hidden.) */
-  FULL: 'full',
-  /** One itinerary is shown, itinerary and map are focused on a leg. (The mobile view is split.) */
-  LEG: 'leg',
-  /** One itinerary leg is hidden. (In mobile view, the map is expanded.) */
-  LEG_HIDDEN: 'leg-hidden',
-  /** The list of itineraries is shown. (The mobile view is split.) */
-  LIST: 'list',
-  /** The list of itineraries is hidden. (In mobile view, the map is expanded.) */
-  LIST_HIDDEN: 'list-hidden'
-}
-
-const setPreviousItineraryView = createAction('SET_PREVIOUS_ITINERARY_VIEW')
-
 /**
  * Sets the itinerary view state (see values above) in the URL params
  * (currently only used in batch results).
  */
-export function setItineraryView (value) {
+export function setItineraryView(value) {
   return function (dispatch, getState) {
     const urlParams = coreUtils.query.getUrlParams()
     const prevItineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
@@ -305,10 +317,10 @@ export function setItineraryView (value) {
 }
 
 /**
-  * Switch the mobile batch results view between full map view and the split state
-  * (itinerary list or itinerary leg view) that was in place prior.
-  */
-export function toggleBatchResultsMap () {
+ * Switch the mobile batch results view between full map view and the split state
+ * (itinerary list or itinerary leg view) that was in place prior.
+ */
+export function toggleBatchResultsMap() {
   return function (dispatch, getState) {
     const urlParams = coreUtils.query.getUrlParams()
     const itineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
@@ -327,7 +339,7 @@ export function toggleBatchResultsMap () {
 /**
  * Takes the user back to the mobile search screen in mobile views.
  */
-export function showMobileSearchScreen () {
+export function showMobileSearchScreen() {
   return function (dispatch, getState) {
     // Reset itinerary view state to show the list of results *before* clearing the search.
     // (Otherwise, if the map is expanded, the search is not cleared.)
@@ -343,12 +355,22 @@ export function showMobileSearchScreen () {
  * set in the configuration.
  * Also update the lang attribute on the root <html> element for accessibility.
  */
-export function setLocale (locale) {
+export function setLocale(locale) {
   return async function (dispatch, getState) {
     const { config } = getState().otp
+    const { loggedInUser } = getState().user
+
     const { language: customMessages } = config
-    const effectiveLocale = locale || getDefaultLocale(config)
-    const messages = await loadLocaleData(effectiveLocale, customMessages)
+    // TODO: Should we get the locales from the config every
+    // time we set the locale or should we destructure once into the
+    // store.
+    const configLocales = getConfigLocales(customMessages)
+    const effectiveLocale = locale || getDefaultLocale(config, loggedInUser)
+    const messages = await loadLocaleData(
+      effectiveLocale,
+      customMessages,
+      configLocales
+    )
 
     // Update the redux state
     dispatch(updateLocale({ locale: effectiveLocale, messages }))
@@ -365,7 +387,7 @@ const updateRouteViewerFilter = createAction('UPDATE_ROUTE_VIEWER_FILTER')
  * Updates the route viewer filter
  * @param {*} filter Object which includes either agency, mode, and/or search
  */
-export function setRouteViewerFilter (filter) {
+export function setRouteViewerFilter(filter) {
   return async function (dispatch, getState) {
     dispatch(updateRouteViewerFilter(filter))
 
@@ -375,7 +397,9 @@ export function setRouteViewerFilter (filter) {
     if (
       filter.agency &&
       activeModeFilter &&
-      !getModesForActiveAgencyFilter(getState()).includes(activeModeFilter.toUpperCase())
+      !getModesForActiveAgencyFilter(getState()).includes(
+        activeModeFilter.toUpperCase()
+      )
     ) {
       // If invalid mode is selected, reset mode
       dispatch(updateRouteViewerFilter({ mode: null }))
diff --git a/lib/components/app/desktop-nav.js b/lib/components/app/desktop-nav.js
index 74e3c587a..54b95efb8 100644
--- a/lib/components/app/desktop-nav.js
+++ b/lib/components/app/desktop-nav.js
@@ -1,14 +1,14 @@
-import React from 'react'
-import { Nav, Navbar } from 'react-bootstrap'
 import { connect } from 'react-redux'
+import { Nav, Navbar } from 'react-bootstrap'
+import React from 'react'
 
-import NavLoginButtonAuth0 from '../user/nav-login-button-auth0.js'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { DEFAULT_APP_TITLE } from '../../util/constants'
+import NavLoginButtonAuth0 from '../user/nav-login-button-auth0.js'
 
 import AppMenu from './app-menu'
+import LocaleSelector from './locale-selector'
 import ViewSwitcher from './view-switcher'
-
 /**
  * The desktop navigation bar, featuring a `branding` logo or a `title` text
  * defined in config.yml, and a sign-in button/menu with account links.
@@ -21,8 +21,16 @@ import ViewSwitcher from './view-switcher'
  *
  * TODO: merge with the mobile navigation bar.
  */
-const DesktopNav = ({ otpConfig }) => {
+export type otpConfigType = {
+  branding: string,
+  language?: Record<string, unknown>,
+  persistence: any,
+  title: string
+}
+
+const DesktopNav = ({ otpConfig }: otpConfigType) => {
   const { branding, persistence, title = DEFAULT_APP_TITLE } = otpConfig
+  const { language: configLanguages } = otpConfig
   const showLogin = Boolean(getAuth0Config(persistence))
 
   // Display branding and title in the order as described in the class summary.
@@ -37,49 +45,55 @@ const DesktopNav = ({ otpConfig }) => {
     )
   } else {
     brandingOrTitle = (
-      <div className='navbar-title' style={{ marginLeft: 50 }}>{title}</div>
+      <div className="navbar-title" style={{ marginLeft: 50 }}>
+        {title}
+      </div>
     )
   }
 
   return (
     <Navbar fluid inverse>
       {/* Required to allow the hamburger button to be clicked */}
-      <Navbar.Header style={{position: 'relative', zIndex: 2}}>
+      <Navbar.Header style={{ position: 'relative', zIndex: 2 }}>
         <Navbar.Brand>
           {/* TODO: Reconcile CSS class and inline style. */}
-          <div className='app-menu-container' style={{ color: 'white', float: 'left', marginTop: '5px' }}>
+          <div
+            className="app-menu-container"
+            style={{ color: 'white', float: 'left', marginTop: '5px' }}
+          >
             <AppMenu />
           </div>
 
           {brandingOrTitle}
-
         </Navbar.Brand>
       </Navbar.Header>
       <ViewSwitcher sticky />
 
-      {showLogin && (
-        <Navbar.Collapse>
-          <Nav pullRight>
-            <NavLoginButtonAuth0
-              id='login-control'
-              links={accountLinks}
+      <Navbar.Collapse>
+        <Nav pullRight>
+          {configLanguages && Object.keys(configLanguages).length > 0 && (
+            <LocaleSelector
+              configLanguages={configLanguages}
+              style={{ maxWidth: 60 }}
             />
-          </Nav>
-        </Navbar.Collapse>
-      )}
+          )}
+          {showLogin && (
+            <NavLoginButtonAuth0 id="login-control" links={accountLinks} />
+          )}
+        </Nav>
+      </Navbar.Collapse>
     </Navbar>
   )
 }
 
 // connect to the redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   return {
     otpConfig: state.otp.config
   }
 }
 
-const mapDispatchToProps = {
-}
+const mapDispatchToProps = {}
 
 export default connect(mapStateToProps, mapDispatchToProps)(DesktopNav)
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
new file mode 100644
index 000000000..1345e03b3
--- /dev/null
+++ b/lib/components/app/locale-selector.tsx
@@ -0,0 +1,82 @@
+import { connect } from 'react-redux'
+import { MenuItem, NavDropdown } from 'react-bootstrap'
+import { useIntl } from 'react-intl'
+import React from 'react'
+import styled from 'styled-components'
+
+import * as uiActions from '../../actions/ui'
+import * as userActions from '../../actions/user'
+import { FLAG_ICON_MAPPING } from '../../config'
+
+const FlagContainer = styled.span`
+  &::after {
+    margin: 0 0.125em;
+  }
+`
+
+export type LocaleSelectorProps = {
+  // TODO configLanguageType
+  configLanguages: Record<string, unknown>
+  createOrUpdateUser: typeof userActions.createOrUpdateUser
+  currentLocale: string
+  locale: string
+  // TODO: add loggedInUserType
+  loggedInUser?: Record<string, unknown>
+  setLocale: typeof uiActions.setLocale
+}
+
+const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
+  const {
+    configLanguages,
+    createOrUpdateUser,
+    locale: currentLocale,
+    loggedInUser,
+    setLocale
+  } = props
+  const intl = useIntl()
+
+  const handleLocaleSelection = (e, locale) => {
+    e.stopPropagation()
+
+    window.localStorage.setItem('lang', locale)
+
+    if (loggedInUser) {
+      loggedInUser.preferredLanguage = locale
+      createOrUpdateUser(loggedInUser, false, intl)
+    }
+    setLocale(locale)
+
+    // Hack: Reload the page (IntlProvider is at too high a level to listen to the redux store)
+    // TODO: move IntlProvider to Responsive Webapp for reload.
+    document.location.reload()
+  }
+
+  return (
+    <NavDropdown title={FLAG_ICON_MAPPING[currentLocale]}>
+      {Object.keys(configLanguages).map(
+        (key) =>
+          /* Key is locale code, e.g. 'en-US' */
+          key !== currentLocale && (
+            <MenuItem onClick={(e) => handleLocaleSelection(e, key)}>
+              <FlagContainer>{FLAG_ICON_MAPPING[key]}</FlagContainer>
+              {configLanguages[key].name}
+            </MenuItem>
+          )
+      )}
+    </NavDropdown>
+  )
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    locale: state.otp.ui.locale,
+    loggedInUser: state.user.loggedInUser
+  }
+}
+
+const mapDispatchToProps = {
+  createOrUpdateUser: userActions.createOrUpdateUser,
+  setLocale: uiActions.setLocale
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LocaleSelector)
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index f374558ff..d0150dbfd 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -390,7 +390,7 @@ const mapStateToWrapperProps = (state) => {
   const { persistence, reactRouter } = state.otp.config
   return {
     auth0Config: getAuth0Config(persistence),
-    defaultLocale: getDefaultLocale(state.otp.config),
+    defaultLocale: getDefaultLocale(state.otp.config, state.user.loggedInUser),
     locale: state.otp.ui.locale,
     localizedMessages: state.otp.ui.localizedMessages,
     routerConfig: reactRouter
diff --git a/lib/config.js b/lib/config.js
index f0f9f5c58..0d6e95829 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -8,6 +8,7 @@
  * - modules not installed in the node_modules of this project.
  */
 import { ClassicLegIcon, ClassicModeIcon } from '@opentripplanner/icons'
+import { CN, ES, FR, KR, US, VN } from 'country-flag-icons/react/3x2'
 import React from 'react'
 
 import {
@@ -17,6 +18,12 @@ import {
   MobileSearchScreen
 } from './index'
 
+/**
+ * Renders flag icons for supported languages
+ */
+// import appropriate flags from flag icon library
+// using emojis would be a simpler solution, but they are not available on Windows
+
 const ItineraryBody = LineItinerary
 const LegIcon = ClassicLegIcon
 const ModeIcon = ClassicModeIcon
@@ -24,6 +31,14 @@ const ModeIcon = ClassicModeIcon
  * Renders additional information below itinerary details.
  */
 const ItineraryFooter = () => <div />
+export const FLAG_ICON_MAPPING = {
+  'en-US': <US style={{ width: 15 }} />,
+  'es-ES': <ES style={{ width: 15 }} />,
+  'fr-FR': <FR style={{ width: 15 }} />,
+  'ko-KR': <KR style={{ width: 15 }} />,
+  'vi-VN': <VN style={{ width: 15 }} />,
+  'zh-CN': <CN style={{ width: 15 }} />
+}
 
 /**
  * @param  {Object} otpConfig The contents of the yml config file as json.
diff --git a/lib/util/i18n.js b/lib/util/i18n.js
index f70bbac6b..b642139f2 100644
--- a/lib/util/i18n.js
+++ b/lib/util/i18n.js
@@ -5,22 +5,18 @@ import flatten from 'flat'
  * FIXME: generate this list from available yml files in the i18n folder instead
  * (even if we end up loading locale data using fetch).
  */
-const locales = {
-  en: {
-    us: 'en-US'
-  },
-  fr: {
-    fr: 'fr-FR'
-  }
-}
 
 /**
  * Match the provided locale (language and region) to the list of supported locales.
  * Default to english if unsupported.
  */
-function getMatchingLocaleString (locale = '', defaultLocale = 'en-US') {
+function getMatchingLocaleString(
+  locale = '',
+  defaultLocale = 'en-US',
+  configLocales = {}
+) {
   const [lang, region] = locale.toLowerCase().split('-')
-  const language = locales[lang]
+  const language = configLocales[lang]
   if (!language) return defaultLocale
   const defaultRegion = Object.keys(language)[0]
   return language[region] || language[defaultRegion]
@@ -34,13 +30,25 @@ function getMatchingLocaleString (locale = '', defaultLocale = 'en-US') {
  *   id => string.
  * FIXME: Load languages on demand using fetch.
  */
-export async function loadLocaleData (locale, customMessages) {
-  const matchedLocale = getMatchingLocaleString(locale)
+export async function loadLocaleData(locale, customMessages, configLocales) {
+  const matchedLocale = getMatchingLocaleString(locale, 'en-US', configLocales)
   let messages
   switch (matchedLocale) {
+    case 'es-ES':
+      messages = await import('../../i18n/es-ES.yml')
+      break
     case 'fr-FR':
       messages = await import('../../i18n/fr-FR.yml')
       break
+    case 'ko-KR':
+      messages = await import('../../i18n/ko-KR.yml')
+      break
+    case 'vi-VN':
+      messages = await import('../../i18n/vi-VN.yml')
+      break
+    case 'zh-CN':
+      messages = await import('../../i18n/zh-CN.yml')
+      break
     default:
       messages = await import('../../i18n/en-US.yml')
       break
@@ -50,26 +58,60 @@ export async function loadLocaleData (locale, customMessages) {
   const mergedMessages = {
     ...flatten(messages),
     // Override the predefined strings with the custom ones, if any provided.
-    ...flatten(customMessages['allLanguages'] || {}),
+    ...flatten(customMessages.allLanguages || {}),
     ...flatten(customMessages[locale] || {})
   }
 
   return mergedMessages
 }
 
+/**
+ * Gets the language and region codes used within the configuration file
+ * @param {Object} configLanguages The configured languages for the implementation.
+ * @returns {Object} configLanguages destructured into language and region.
+ */
+export function getConfigLocales(configLanguages) {
+  const locales = {}
+
+  // We need to loop through the config language section and detect all the regions
+  Object.keys(configLanguages).forEach((key) => {
+    const [lang, region] = key.split('-')
+    if (!locales[lang]) locales[lang] = {}
+    locales[lang][region] = key
+  })
+  return locales
+}
+
 /**
  * Gets the localization > defaultLocale configuration setting, or 'en-US' if not set.
  */
-export function getDefaultLocale (config) {
+export function getDefaultLocale(config, loggedInUser) {
+  /*
+    Fall backs in order are: 
+      [1] User's language in settings,
+      [2] window.localstorage language,
+      [3] navigator.language,
+      [4] config.localization.defaultLocale,
+      [5] 'en-US'
+  */
+
   const { localization = {} } = config
-  return localization.defaultLocale || 'en-US'
+  const browserLocale =
+    window.localStorage.getItem('lang') || navigator.language
+
+  return (
+    loggedInUser?.preferredLanguage ||
+    browserLocale ||
+    localization.defaultLocale ||
+    'en-US'
+  )
 }
 
 /**
  * Obtains the time format (12 or 24 hr) based on the redux user state.
  * FIXME: Remove after OTP-UI components can determine the time format on their own.
  */
-export function getTimeFormat (state) {
+export function getTimeFormat(state) {
   const use24HourFormat = state.user.loggedInUser?.use24HourFormat ?? false
   return use24HourFormat ? 'H:mm' : 'h:mm a'
 }
@@ -79,42 +121,42 @@ export function getTimeFormat (state) {
  * such that i18n IDs are hardcoded and can be kept track of by format.js CLI tools
  */
 // eslint-disable-next-line complexity
-export function getFormattedMode (mode, intl) {
+export function getFormattedMode(mode, intl) {
   switch (mode) {
     case 'bicycle':
-      return intl.formatMessage({id: 'common.modes.bike'})
+      return intl.formatMessage({ id: 'common.modes.bike' })
     case 'bicycle_rent':
-      return intl.formatMessage({id: 'common.modes.bicycle_rent'})
+      return intl.formatMessage({ id: 'common.modes.bicycle_rent' })
     case 'bus':
-      return intl.formatMessage({id: 'common.modes.bus'})
+      return intl.formatMessage({ id: 'common.modes.bus' })
     case 'cable_car':
-      return intl.formatMessage({id: 'common.modes.cable_car'})
+      return intl.formatMessage({ id: 'common.modes.cable_car' })
     case 'car':
-      return intl.formatMessage({id: 'common.modes.car'})
+      return intl.formatMessage({ id: 'common.modes.car' })
     case 'car_park':
-      return intl.formatMessage({id: 'common.modes.car_park'})
+      return intl.formatMessage({ id: 'common.modes.car_park' })
     case 'drive':
-      return intl.formatMessage({id: 'common.modes.drive'})
+      return intl.formatMessage({ id: 'common.modes.drive' })
     case 'ferry':
-      return intl.formatMessage({id: 'common.modes.ferry'})
+      return intl.formatMessage({ id: 'common.modes.ferry' })
     case 'funicular':
-      return intl.formatMessage({id: 'common.modes.funicular'})
+      return intl.formatMessage({ id: 'common.modes.funicular' })
     case 'gondola':
-      return intl.formatMessage({id: 'common.modes.gondola'})
+      return intl.formatMessage({ id: 'common.modes.gondola' })
     case 'micromobility':
-      return intl.formatMessage({id: 'common.modes.micromobility'})
+      return intl.formatMessage({ id: 'common.modes.micromobility' })
     case 'micromobility_rent':
-      return intl.formatMessage({id: 'common.modes.micromobility_rent'})
+      return intl.formatMessage({ id: 'common.modes.micromobility_rent' })
     case 'rail':
-      return intl.formatMessage({id: 'common.modes.rail'})
+      return intl.formatMessage({ id: 'common.modes.rail' })
     case 'subway':
-      return intl.formatMessage({id: 'common.modes.subway'})
+      return intl.formatMessage({ id: 'common.modes.subway' })
     case 'tram':
-      return intl.formatMessage({id: 'common.modes.tram'})
+      return intl.formatMessage({ id: 'common.modes.tram' })
     case 'transit':
-      return intl.formatMessage({id: 'common.modes.transit'})
+      return intl.formatMessage({ id: 'common.modes.transit' })
     case 'walk':
-      return intl.formatMessage({id: 'common.modes.walk'})
+      return intl.formatMessage({ id: 'common.modes.walk' })
     default:
       return null
   }
@@ -125,15 +167,15 @@ export function getFormattedMode (mode, intl) {
  * such that i18n IDs are hardcoded and can be kept track of by format.js CLI tools
  */
 // eslint-disable-next-line complexity
-export function getFormattedPlaces (place, intl) {
+export function getFormattedPlaces(place, intl) {
   switch (place) {
     case 'custom':
-      return intl.formatMessage({id: 'common.places.custom'})
+      return intl.formatMessage({ id: 'common.places.custom' })
     case 'dining':
-      return intl.formatMessage({id: 'common.places.dining'})
+      return intl.formatMessage({ id: 'common.places.dining' })
     case 'home':
-      return intl.formatMessage({id: 'common.places.home'})
+      return intl.formatMessage({ id: 'common.places.home' })
     case 'work':
-      return intl.formatMessage({id: 'common.places.work'})
+      return intl.formatMessage({ id: 'common.places.work' })
   }
 }

From b233f0ddbc03a3380e67bd2d5863e84dae3d2ce0 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 17 Jan 2022 12:07:25 -0500
Subject: [PATCH 101/270] refactor(desktop-nav, config.js): Rename files
 switched to typscript, refactor

---
 .../app/{desktop-nav.js => desktop-nav.tsx}           |  8 ++++----
 lib/config.js                                         | 11 +++++------
 2 files changed, 9 insertions(+), 10 deletions(-)
 rename lib/components/app/{desktop-nav.js => desktop-nav.tsx} (95%)

diff --git a/lib/components/app/desktop-nav.js b/lib/components/app/desktop-nav.tsx
similarity index 95%
rename from lib/components/app/desktop-nav.js
rename to lib/components/app/desktop-nav.tsx
index 54b95efb8..e00cef3b1 100644
--- a/lib/components/app/desktop-nav.js
+++ b/lib/components/app/desktop-nav.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { DEFAULT_APP_TITLE } from '../../util/constants'
-import NavLoginButtonAuth0 from '../user/nav-login-button-auth0.js'
+import NavLoginButtonAuth0 from '../user/nav-login-button-auth0'
 
 import AppMenu from './app-menu'
 import LocaleSelector from './locale-selector'
@@ -22,9 +22,9 @@ import ViewSwitcher from './view-switcher'
  * TODO: merge with the mobile navigation bar.
  */
 export type otpConfigType = {
-  branding: string,
-  language?: Record<string, unknown>,
-  persistence: any,
+  branding: string
+  language?: Record<string, unknown>
+  persistence: any
   title: string
 }
 
diff --git a/lib/config.js b/lib/config.js
index 0d6e95829..74715a2d7 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -18,12 +18,6 @@ import {
   MobileSearchScreen
 } from './index'
 
-/**
- * Renders flag icons for supported languages
- */
-// import appropriate flags from flag icon library
-// using emojis would be a simpler solution, but they are not available on Windows
-
 const ItineraryBody = LineItinerary
 const LegIcon = ClassicLegIcon
 const ModeIcon = ClassicModeIcon
@@ -31,6 +25,11 @@ const ModeIcon = ClassicModeIcon
  * Renders additional information below itinerary details.
  */
 const ItineraryFooter = () => <div />
+
+/**
+ * Renders flag icons for supported languages
+ * using emojis would be a simpler solution, but they are not available on Windows
+ */
 export const FLAG_ICON_MAPPING = {
   'en-US': <US style={{ width: 15 }} />,
   'es-ES': <ES style={{ width: 15 }} />,

From 477ebbb97dee84861e0a11a33bf647b98aa907eb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 18 Jan 2022 14:20:21 -0500
Subject: [PATCH 102/270] fix(flex-indicator): adjust size to match other
 layout changes

---
 lib/components/narrative/default/flex-indicator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/narrative/default/flex-indicator.tsx b/lib/components/narrative/default/flex-indicator.tsx
index 678495990..9980199d2 100644
--- a/lib/components/narrative/default/flex-indicator.tsx
+++ b/lib/components/narrative/default/flex-indicator.tsx
@@ -37,9 +37,9 @@ const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
   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')};
+  height: ${(props) => (props.shrink ? '40px' : '90px')};
   margin-right: 1em;
-  max-width: ${(props) => (props.shrink ? '60px' : '190px')};
+  max-width: ${(props) => (props.shrink ? '60px' : '160px')};
   padding-right: 0.25em;
   padding-top: 0.25em;
 

From 7c07401b114a143717beb0443b86d5df18d4a9e3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 18 Jan 2022 17:57:31 -0500
Subject: [PATCH 103/270] refactor(batch NarrativeItineraries): Refactor common
 container styles.

---
 lib/components/app/batch-routing-panel.js     |  11 +-
 lib/components/app/call-taker-panel.js        |   9 +-
 lib/components/mobile/batch-results-screen.js |  86 ++++++------
 .../narrative/narrative-itineraries.js        | 127 +++++++++---------
 lib/components/narrative/styled.js            |   8 +-
 5 files changed, 116 insertions(+), 125 deletions(-)

diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 9f0de9698..607bde464 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -63,14 +63,7 @@ class BatchRoutingPanel extends Component {
             overflowY: 'hidden'
           }}
         >
-          {/* FIXME: sharing styles with BatchRoutingPanel. */}
-          <NarrativeItineraries
-            containerStyle={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%'
-            }}
-          />
+          <NarrativeItineraries />
         </div>
       </ViewerContainer>
     )
@@ -78,7 +71,7 @@ class BatchRoutingPanel extends Component {
 }
 
 // connect to the redux store
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const showUserSettings = getShowUserSettings(state)
   return {
     activeSearch: getActiveSearch(state),
diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 97670df55..caabef5d4 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -287,14 +287,7 @@ class CallTakerPanel extends Component {
             overflowY: 'hidden'
           }}
         >
-          {/* FIXME: sharing styles with BatchRoutingPanel. */}
-          <NarrativeItineraries
-            containerStyle={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%'
-            }}
-          />
+          <NarrativeItineraries />
         </div>
       </ViewerContainer>
     )
diff --git a/lib/components/mobile/batch-results-screen.js b/lib/components/mobile/batch-results-screen.js
index 5827abe06..eca7eb599 100644
--- a/lib/components/mobile/batch-results-screen.js
+++ b/lib/components/mobile/batch-results-screen.js
@@ -1,19 +1,20 @@
-import coreUtils from '@opentripplanner/core-utils'
-import React from 'react'
+/* eslint-disable react/prop-types */
 import { Button } from 'react-bootstrap'
-import { FormattedMessage } from 'react-intl'
 import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+import coreUtils from '@opentripplanner/core-utils'
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
-import Map from '../map/map'
-import NarrativeItineraries from '../narrative/narrative-itineraries'
-import Icon from '../util/icon'
 import {
   getActiveItineraries,
   getActiveSearch,
   getResponsesWithErrors
 } from '../../util/state'
+import Icon from '../util/icon'
+import Map from '../map/map'
+import NarrativeItineraries from '../narrative/narrative-itineraries'
 
 import MobileContainer from './container'
 import ResultsError from './results-error'
@@ -45,8 +46,9 @@ const NARRATIVE_SPLIT_TOP_PERCENT = 45
 
 // Styles for the results map also include prop-independent styles copied from mobile.css.
 const ResultsMap = styled.div`
-  bottom: ${props => props.expanded ? '0' : `${100 - NARRATIVE_SPLIT_TOP_PERCENT}%`};
-  display: ${props => props.visible ? 'inherit' : 'none'};
+  bottom: ${(props) =>
+    props.expanded ? '0' : `${100 - NARRATIVE_SPLIT_TOP_PERCENT}%`};
+  display: ${(props) => (props.visible ? 'inherit' : 'none')};
   left: 0;
   position: fixed;
   right: 0;
@@ -54,12 +56,17 @@ const ResultsMap = styled.div`
 `
 
 const narrativeCss = css`
-  top: ${props => props.visible ? (props.expanded ? '100px' : `${NARRATIVE_SPLIT_TOP_PERCENT}%`) : '100%'};
+  top: ${(props) =>
+    props.visible
+      ? props.expanded
+        ? '100px'
+        : `${NARRATIVE_SPLIT_TOP_PERCENT}%`
+      : '100%'};
   transition: top 300ms;
 `
 
 const StyledResultsError = styled(ResultsError)`
-  display: ${props => props.visible ? 'inherit' : 'none'};
+  display: ${(props) => (props.visible ? 'inherit' : 'none')};
   ${narrativeCss}
 `
 
@@ -80,52 +87,40 @@ const BatchMobileResultsScreen = ({
   toggleBatchResultsMap
 }) => {
   const hasErrorsAndNoResult = itineraries.length === 0 && errors.length > 0
-  const mapExpanded = itineraryView === ItineraryView.LEG_HIDDEN || itineraryView === ItineraryView.LIST_HIDDEN
+  const mapExpanded =
+    itineraryView === ItineraryView.LEG_HIDDEN ||
+    itineraryView === ItineraryView.LIST_HIDDEN
   const itineraryExpanded = itineraryView === ItineraryView.FULL
 
   return (
     <StyledMobileContainer>
       <ResultsHeader />
-      <ResultsMap
-        expanded={mapExpanded}
-        visible={!itineraryExpanded}
-      >
+      <ResultsMap expanded={mapExpanded} visible={!itineraryExpanded}>
         <Map />
-        <ExpandMapButton
-          bsSize='small'
-          onClick={toggleBatchResultsMap}
-        >
+        <ExpandMapButton bsSize="small" onClick={toggleBatchResultsMap}>
           <Icon name={mapExpanded ? 'list-ul' : 'arrows-alt'} withSpace />
-          {mapExpanded
-            ? <FormattedMessage id='components.BatchResultsScreen.showResults' />
-            : <FormattedMessage id='components.BatchResultsScreen.expandMap' />
-          }
+          {mapExpanded ? (
+            <FormattedMessage id="components.BatchResultsScreen.showResults" />
+          ) : (
+            <FormattedMessage id="components.BatchResultsScreen.expandMap" />
+          )}
         </ExpandMapButton>
       </ResultsMap>
-      {hasErrorsAndNoResult
-        ? <StyledResultsError
+      {hasErrorsAndNoResult ? (
+        <StyledResultsError
           error={errors[0]}
           expanded={itineraryExpanded}
           visible={!mapExpanded}
         />
-        : (
-          <NarrativeContainer
-            className='mobile-narrative-container'
-            expanded={itineraryExpanded}
-            visible={!mapExpanded}
-          >
-            <NarrativeItineraries
-              containerStyle={{
-                background: '#fff',
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100%',
-                width: '100%'
-              }}
-            />
-          </NarrativeContainer>
-        )
-      }
+      ) : (
+        <NarrativeContainer
+          className="mobile-narrative-container"
+          expanded={itineraryExpanded}
+          visible={!mapExpanded}
+        >
+          <NarrativeItineraries />
+        </NarrativeContainer>
+      )}
     </StyledMobileContainer>
   )
 }
@@ -147,4 +142,7 @@ const mapDispatchToProps = {
   toggleBatchResultsMap: uiActions.toggleBatchResultsMap
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(BatchMobileResultsScreen)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BatchMobileResultsScreen)
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 2f9c41ee9..6d06a05af 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -1,17 +1,10 @@
+/* eslint-disable react/prop-types */
+import { connect } from 'react-redux'
 import coreUtils from '@opentripplanner/core-utils'
-import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import { connect } from 'react-redux'
 
-import {
-  setActiveItinerary,
-  setActiveLeg,
-  setActiveStep,
-  setUseRealtimeResponse,
-  setVisibleItinerary,
-  updateItineraryFilter
-} from '../../actions/narrative'
 import * as uiActions from '../../actions/ui'
 import { ComponentContext } from '../../util/contexts'
 import {
@@ -21,7 +14,16 @@ import {
   getResponsesWithErrors,
   getVisibleItineraryIndex
 } from '../../util/state'
+import {
+  setActiveItinerary,
+  setActiveLeg,
+  setActiveStep,
+  setUseRealtimeResponse,
+  setVisibleItinerary,
+  updateItineraryFilter
+} from '../../actions/narrative'
 
+import * as S from './styled'
 import NarrativeItinerariesErrors from './narrative-itineraries-errors'
 import NarrativeItinerariesHeader from './narrative-itineraries-header'
 
@@ -68,16 +70,16 @@ class NarrativeItineraries extends Component {
     setActiveLeg(null, null)
   }
 
-  _onSortChange = evt => {
-    const {value: type} = evt.target
-    const {sort, updateItineraryFilter} = this.props
-    updateItineraryFilter({sort: {...sort, type}})
+  _onSortChange = (evt) => {
+    const { value: type } = evt.target
+    const { sort, updateItineraryFilter } = this.props
+    updateItineraryFilter({ sort: { ...sort, type } })
   }
 
   _onSortDirChange = () => {
-    const {sort, updateItineraryFilter} = this.props
+    const { sort, updateItineraryFilter } = this.props
     const direction = sort.direction === 'ASC' ? 'DESC' : 'ASC'
-    updateItineraryFilter({sort: {...sort, direction}})
+    updateItineraryFilter({ sort: { ...sort, direction } })
   }
 
   _onViewAllOptions = () => {
@@ -93,31 +95,28 @@ class NarrativeItineraries extends Component {
   }
 
   _renderLoadingDivs = () => {
-    const {itineraries, modes, pending} = this.props
-    const {showingErrors} = this.state
+    const { itineraries, modes, pending } = this.props
+    const { showingErrors } = this.state
     if (!pending || showingErrors) return null
     // Construct loading divs as placeholders while all itineraries load.
     const count = modes.combinations
       ? modes.combinations.length - itineraries.length
       : 0
-    return Array.from(
-      {length: count},
-      (v, i) =>
-        <div className='option default-itin' key={i}>
-          <SkeletonTheme color='#ddd' highlightColor='#eee'>
-            <Skeleton count={3} />
-          </SkeletonTheme>
-        </div>
-    )
+    return Array.from({ length: count }, (v, i) => (
+      <div className="option default-itin" key={i}>
+        <SkeletonTheme color="#ddd" highlightColor="#eee">
+          <Skeleton count={3} />
+        </SkeletonTheme>
+      </div>
+    ))
   }
 
-  render () {
+  render() {
     const {
       activeItinerary,
       activeLeg,
       activeSearch,
       activeStep,
-      containerStyle,
       errorMessages,
       errors,
       itineraries,
@@ -138,14 +137,14 @@ class NarrativeItineraries extends Component {
 
     if (!activeSearch) return null
 
-    const showRealtimeAnnotation = realtimeEffects.isAffectedByRealtimeData && (
-      realtimeEffects.exceedsThreshold ||
-      realtimeEffects.routesDiffer ||
-      !useRealtime
-    )
+    const showRealtimeAnnotation =
+      realtimeEffects.isAffectedByRealtimeData &&
+      (realtimeEffects.exceedsThreshold ||
+        realtimeEffects.routesDiffer ||
+        !useRealtime)
 
     return (
-      <div className='options itinerary' style={containerStyle}>
+      <S.NarrativeItinerariesContainer className="options itinerary">
         <NarrativeItinerariesHeader
           errors={errors}
           itineraries={itineraries}
@@ -160,20 +159,19 @@ class NarrativeItineraries extends Component {
         />
         <div
           // FIXME: Change to a ul with li children?
-          className='list'
+          className="list"
           style={{
             flexGrow: '1',
             overflowY: 'auto'
           }}
         >
-          {showingErrors || itineraries.length === 0
-            ? (
-              <NarrativeItinerariesErrors
-                errorMessages={errorMessages}
-                errors={errors}
-              />
-            )
-            : <>
+          {showingErrors || itineraries.length === 0 ? (
+            <NarrativeItinerariesErrors
+              errorMessages={errorMessages}
+              errors={errors}
+            />
+          ) : (
+            <>
               {itineraries.map((itinerary, index) => {
                 const active = index === activeItinerary
                 // Hide non-active itineraries.
@@ -189,7 +187,7 @@ class NarrativeItineraries extends Component {
                     key={index}
                     LegIcon={LegIcon}
                     onClick={active ? this._toggleDetailedItinerary : undefined}
-                    routingType='ITINERARY'
+                    routingType="ITINERARY"
                     setActiveItinerary={setActiveItinerary}
                     setActiveLeg={this._setActiveLeg}
                     setActiveStep={setActiveStep}
@@ -203,9 +201,9 @@ class NarrativeItineraries extends Component {
               })}
               {this._renderLoadingDivs()}
             </>
-          }
+          )}
         </div>
-      </div>
+      </S.NarrativeItinerariesContainer>
     )
   }
 }
@@ -223,12 +221,12 @@ const mapStateToProps = (state, ownProps) => {
   const useRealtime = state.otp.useRealtime
   const urlParams = coreUtils.query.getUrlParams()
   const itineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
-  const showDetails = itineraryView === ItineraryView.FULL ||
-          itineraryView === ItineraryView.LEG ||
-          itineraryView === ItineraryView.LEG_HIDDEN
-  const itineraryIsExpanded = activeItinerary !== undefined &&
-    activeItinerary !== null &&
-    showDetails
+  const showDetails =
+    itineraryView === ItineraryView.FULL ||
+    itineraryView === ItineraryView.LEG ||
+    itineraryView === ItineraryView.LEG_HIDDEN
+  const itineraryIsExpanded =
+    activeItinerary !== undefined && activeItinerary !== null && showDetails
 
   return {
     // swap out realtime itineraries with non-realtime depending on boolean
@@ -260,22 +258,25 @@ const mapDispatchToProps = (dispatch, ownProps) => {
   // so that only one argument is passed,
   // e.g. setActiveLeg({ index, leg })
   return {
-    setActiveItinerary: payload => dispatch(setActiveItinerary(payload)),
+    setActiveItinerary: (payload) => dispatch(setActiveItinerary(payload)),
     // FIXME
     setActiveLeg: (index, leg) => {
-      dispatch(setActiveLeg({index, leg}))
+      dispatch(setActiveLeg({ index, leg }))
     },
     // FIXME
     setActiveStep: (index, step) => {
-      dispatch(setActiveStep({index, step}))
+      dispatch(setActiveStep({ index, step }))
     },
-    setItineraryView: payload => dispatch(uiActions.setItineraryView(payload)),
-    setUseRealtimeResponse: payload => dispatch(setUseRealtimeResponse(payload)),
-    setVisibleItinerary: payload => dispatch(setVisibleItinerary(payload)),
-    updateItineraryFilter: payload => dispatch(updateItineraryFilter(payload))
+    setItineraryView: (payload) =>
+      dispatch(uiActions.setItineraryView(payload)),
+    setUseRealtimeResponse: (payload) =>
+      dispatch(setUseRealtimeResponse(payload)),
+    setVisibleItinerary: (payload) => dispatch(setVisibleItinerary(payload)),
+    updateItineraryFilter: (payload) => dispatch(updateItineraryFilter(payload))
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  NarrativeItineraries
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NarrativeItineraries)
diff --git a/lib/components/narrative/styled.js b/lib/components/narrative/styled.js
index 4f2a2844c..d4a7b82c3 100644
--- a/lib/components/narrative/styled.js
+++ b/lib/components/narrative/styled.js
@@ -1,4 +1,4 @@
-import {ButtonGroup} from 'react-bootstrap'
+import { ButtonGroup } from 'react-bootstrap'
 import styled from 'styled-components'
 
 export const FlexButtonGroup = styled(ButtonGroup)`
@@ -9,3 +9,9 @@ export const FlexButtonGroup = styled(ButtonGroup)`
     flex: 1;
   }
 `
+
+export const NarrativeItinerariesContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`

From 2670533526c8c21436900296e2d778f59448a02b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 19 Jan 2022 08:53:13 -0500
Subject: [PATCH 104/270] refactor(map.css): ensure close button doesn't
 consume panel

---
 lib/components/map/map.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/map/map.css b/lib/components/map/map.css
index 04dca4aea..2cb3349b7 100644
--- a/lib/components/map/map.css
+++ b/lib/components/map/map.css
@@ -69,6 +69,7 @@
   border-radius: 0 0 1em;
   display: block;
   left: 0;
+  max-width: 40px;
   padding: 0.5em;
   position: absolute;
   top: 0;

From a6de95114aed8b19ec7c8910f2e5e500a88a524d Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 19 Jan 2022 15:18:57 -0500
Subject: [PATCH 105/270] refactor(Locale selector): Address PR comments, fix
 typescripting

---
 example-config.yml                            |  1 -
 lib/actions/ui.js                             |  2 +-
 lib/components/app/desktop-nav.tsx            | 10 ++--
 lib/components/app/locale-selector.tsx        | 50 ++++++++++++-------
 ...on-auth0.js => nav-login-button-auth0.tsx} | 33 ++++++++----
 lib/config.js                                 | 14 ------
 6 files changed, 62 insertions(+), 48 deletions(-)
 rename lib/components/user/{nav-login-button-auth0.js => nav-login-button-auth0.tsx} (67%)

diff --git a/example-config.yml b/example-config.yml
index 2d305894e..67e8c97f7 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -371,7 +371,6 @@ itinerary:
 #         msg: No available transit routes or rideshare/carshare service at origin.
   # fr-FR:
   #   name: French (France)
-  #   flag: 🇫🇷
   #   config:
   #     # App (hamburger) menu items
   #     menuItems:
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 747a4f3c3..6ecf6c8d3 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -221,7 +221,7 @@ export function matchContentToUrl(location) {
       case 'start':
       case '@': {
         // Parse comma separated params (ensuring numbers are parsed correctly).
-        const [lat, lon, zoom, routerId] = id ? idToParams(id) : []
+        let [lat, lon, zoom, routerId] = id ? idToParams(id) : []
         if (!lat || !lon) {
           // Attempt to parse path if lat/lon not found. (Legacy UI otp.js used
           // slashes in the pathname to specify lat, lon, etc.)
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index e00cef3b1..f81825435 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -21,11 +21,9 @@ import ViewSwitcher from './view-switcher'
  *
  * TODO: merge with the mobile navigation bar.
  */
+// Typscript TODO: otpConfig type
 export type otpConfigType = {
-  branding: string
-  language?: Record<string, unknown>
-  persistence: any
-  title: string
+  otpConfig: any
 }
 
 const DesktopNav = ({ otpConfig }: otpConfigType) => {
@@ -87,8 +85,8 @@ const DesktopNav = ({ otpConfig }: otpConfigType) => {
 }
 
 // connect to the redux store
-
-const mapStateToProps = (state) => {
+// Typescript TODO: state type
+const mapStateToProps = (state: any) => {
   return {
     otpConfig: state.otp.config
   }
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index 1345e03b3..babeb1306 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -1,12 +1,27 @@
-import { connect } from 'react-redux'
+import { CN, ES, FR, KR, US, VN } from 'country-flag-icons/react/3x2'
+import { connect, ConnectedProps } from 'react-redux'
 import { MenuItem, NavDropdown } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
-import React from 'react'
+import React, { MouseEvent } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
-import { FLAG_ICON_MAPPING } from '../../config'
+
+/**
+ * Renders flag icons for supported languages
+ * using emojis would be a simpler solution, but they are not available on Windows
+ * Exporting this in the config.js causes the a11y tests to fail. A better solution
+ * will need to be found if further customization is required.
+ */
+const FLAG_ICON_MAPPING: Record<string, React.ReactElement> = {
+  'en-US': <US style={{ width: 15 }} />,
+  'es-ES': <ES style={{ width: 15 }} />,
+  'fr-FR': <FR style={{ width: 15 }} />,
+  'ko-KR': <KR style={{ width: 15 }} />,
+  'vi-VN': <VN style={{ width: 15 }} />,
+  'zh-CN': <CN style={{ width: 15 }} />
+}
 
 const FlagContainer = styled.span`
   &::after {
@@ -14,15 +29,12 @@ const FlagContainer = styled.span`
   }
 `
 
-export type LocaleSelectorProps = {
-  // TODO configLanguageType
-  configLanguages: Record<string, unknown>
-  createOrUpdateUser: typeof userActions.createOrUpdateUser
-  currentLocale: string
-  locale: string
-  // TODO: add loggedInUserType
-  loggedInUser?: Record<string, unknown>
-  setLocale: typeof uiActions.setLocale
+type PropsFromRedux = ConnectedProps<typeof connector>
+
+interface LocaleSelectorProps extends PropsFromRedux {
+  // Typescript TODO configLanguageType
+  configLanguages: Record<string, any>
+  style?: any
 }
 
 const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
@@ -35,7 +47,7 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
   } = props
   const intl = useIntl()
 
-  const handleLocaleSelection = (e, locale) => {
+  const handleLocaleSelection = (e: MouseEvent<Element>, locale: string) => {
     e.stopPropagation()
 
     window.localStorage.setItem('lang', locale)
@@ -52,12 +64,14 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
   }
 
   return (
-    <NavDropdown title={FLAG_ICON_MAPPING[currentLocale]}>
+    <NavDropdown id="locale-selector" title={FLAG_ICON_MAPPING[currentLocale]}>
       {Object.keys(configLanguages).map(
         (key) =>
           /* Key is locale code, e.g. 'en-US' */
           key !== currentLocale && (
-            <MenuItem onClick={(e) => handleLocaleSelection(e, key)}>
+            <MenuItem
+              onClick={(e: MouseEvent) => handleLocaleSelection(e, key)}
+            >
               <FlagContainer>{FLAG_ICON_MAPPING[key]}</FlagContainer>
               {configLanguages[key].name}
             </MenuItem>
@@ -67,7 +81,8 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
   )
 }
 
-const mapStateToProps = (state, ownProps) => {
+// Typescript TODO: create state types and type state, ownProps properly
+const mapStateToProps = (state: any, ownProps: Record<string, any>) => {
   return {
     locale: state.otp.ui.locale,
     loggedInUser: state.user.loggedInUser
@@ -79,4 +94,5 @@ const mapDispatchToProps = {
   setLocale: uiActions.setLocale
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(LocaleSelector)
+const connector = connect(mapStateToProps, mapDispatchToProps)
+export default connector(LocaleSelector)
diff --git a/lib/components/user/nav-login-button-auth0.js b/lib/components/user/nav-login-button-auth0.tsx
similarity index 67%
rename from lib/components/user/nav-login-button-auth0.js
rename to lib/components/user/nav-login-button-auth0.tsx
index 9687bd37d..01ff9183c 100644
--- a/lib/components/user/nav-login-button-auth0.js
+++ b/lib/components/user/nav-login-button-auth0.tsx
@@ -1,10 +1,23 @@
 import { useAuth0 } from '@auth0/auth0-react'
 import React from 'react'
 
-import { URL_ROOT } from '../../util/constants'
 import { getCurrentRoute } from '../../util/ui'
+import { URL_ROOT } from '../../util/constants'
+
 import NavLoginButton from './nav-login-button'
 
+type AccountLink = {
+  messageId: string
+  url: string
+}
+
+interface NavLoginButtonAuth0Props {
+  className?: string
+  id: string
+  links: Array<AccountLink>
+  style?: string
+}
+
 /**
  * This component wraps NavLoginButton with Auth0 information.
  */
@@ -13,17 +26,19 @@ const NavLoginButtonAuth0 = ({
   id,
   links,
   style
-}) => {
+}: NavLoginButtonAuth0Props) => {
   const { isAuthenticated, loginWithRedirect, logout, user } = useAuth0()
 
   // On login, preserve the current trip query if any.
-  const handleLogin = () => loginWithRedirect({
-    appState: { returnTo: getCurrentRoute() }
-  })
-  const handleLogout = () => logout({
-    // Logout to the map with no search.
-    returnTo: URL_ROOT
-  })
+  const handleLogin = () =>
+    loginWithRedirect({
+      appState: { returnTo: getCurrentRoute() }
+    })
+  const handleLogout = () =>
+    logout({
+      // Logout to the map with no search.
+      returnTo: URL_ROOT
+    })
 
   // On logout, it is better to "clear" the screen, so
   // return to redirectUri set in <Auth0Provider> (no specific event handler).
diff --git a/lib/config.js b/lib/config.js
index 74715a2d7..f0f9f5c58 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -8,7 +8,6 @@
  * - modules not installed in the node_modules of this project.
  */
 import { ClassicLegIcon, ClassicModeIcon } from '@opentripplanner/icons'
-import { CN, ES, FR, KR, US, VN } from 'country-flag-icons/react/3x2'
 import React from 'react'
 
 import {
@@ -26,19 +25,6 @@ const ModeIcon = ClassicModeIcon
  */
 const ItineraryFooter = () => <div />
 
-/**
- * Renders flag icons for supported languages
- * using emojis would be a simpler solution, but they are not available on Windows
- */
-export const FLAG_ICON_MAPPING = {
-  'en-US': <US style={{ width: 15 }} />,
-  'es-ES': <ES style={{ width: 15 }} />,
-  'fr-FR': <FR style={{ width: 15 }} />,
-  'ko-KR': <KR style={{ width: 15 }} />,
-  'vi-VN': <VN style={{ width: 15 }} />,
-  'zh-CN': <CN style={{ width: 15 }} />
-}
-
 /**
  * @param  {Object} otpConfig The contents of the yml config file as json.
  * @return  This function must return an object with the following attributes.

From d90905aa2fed368e7f561446a349ebbba6f064ef Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 19 Jan 2022 22:03:53 -0500
Subject: [PATCH 106/270] refactor(desktop-nav): Add config flag to toggle
 localization features

---
 example-config.yml                 |  5 +++++
 lib/components/app/desktop-nav.tsx | 16 ++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 67e8c97f7..a3b76674a 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -341,6 +341,11 @@ itinerary:
 ### All available languages should have an entry with at least a name identifier in this section so that
 ### they may be rendered in the locale selector. 
 ### Language display icons (flags) should be configured in config.js
+# LocalizationEnabled also provides a method to toggle the new localization functionality, which requires 
+# a config file of the format below. The previous language format (w/ strings defined in the first layer)
+# is not compatible with localization
+
+# localizationEnabled: true
 # language:
 #   allLanguages
 #     common:
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index f81825435..2c0f65928 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -28,6 +28,7 @@ export type otpConfigType = {
 
 const DesktopNav = ({ otpConfig }: otpConfigType) => {
   const { branding, persistence, title = DEFAULT_APP_TITLE } = otpConfig
+  const { localizationEnabled } = otpConfig
   const { language: configLanguages } = otpConfig
   const showLogin = Boolean(getAuth0Config(persistence))
 
@@ -69,12 +70,15 @@ const DesktopNav = ({ otpConfig }: otpConfigType) => {
 
       <Navbar.Collapse>
         <Nav pullRight>
-          {configLanguages && Object.keys(configLanguages).length > 0 && (
-            <LocaleSelector
-              configLanguages={configLanguages}
-              style={{ maxWidth: 60 }}
-            />
-          )}
+          {/* Don't render locale selector if we have only one language defined */}
+          {localizationEnabled &&
+            configLanguages &&
+            Object.keys(configLanguages).length > 1 && (
+              <LocaleSelector
+                configLanguages={configLanguages}
+                style={{ maxWidth: 60 }}
+              />
+            )}
           {showLogin && (
             <NavLoginButtonAuth0 id="login-control" links={accountLinks} />
           )}

From dd7fceb575ee19246b8136ff08f0d0c0b317edb9 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 20 Jan 2022 07:50:38 -0500
Subject: [PATCH 107/270] fix(actions/api): don't duplicate query looking for
 nonRealtime query

---
 lib/actions/api.js | 55 +++++++++-------------------------------------
 1 file changed, 10 insertions(+), 45 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index d076d5a9b..7fa08e3bb 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -140,7 +140,15 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
           batchId: searchId,
           ...injectedParams
         })
-        const realTimeFetch = fetch(url, getOtpFetchOptions(state))
+
+        const { user } = state
+        const storeTripHistory =
+          user && user.loggedInUser && user.loggedInUser.storeTripHistory
+
+        const realTimeFetch = fetch(
+          url,
+          getOtpFetchOptions(state, storeTripHistory)
+        )
           .then(getJsonAndCheckResponse)
           .then((json) => {
             const dispatchedRoutingResponse = dispatch(
@@ -188,50 +196,7 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
           dispatch(updateOtpUrlParams(state, searchId))
         }
 
-        // Also fetch a non-realtime route.
-        //
-        // FIXME: The statement below may no longer apply with future work
-        // involving realtime info embedded in the OTP response.
-        // (That action records an entry again in the middleware.)
-        // For users who opted in to store trip request history,
-        // to avoid recording the same trip request twice in the middleware,
-        // only add the user Authorization token to the request
-        // when querying the non-realtime route.
-        //
-        // The advantage of using non-realtime route is that the middleware will be able to
-        // record and provide the theoretical itinerary summary without having to query OTP again.
-        // FIXME: Interestingly, and this could be from a side effect elsewhere,
-        // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
-        // (state.user stays unpopulated until after this function is called).
-        //
-        const { user } = state
-        const storeTripHistory =
-          user && user.loggedInUser && user.loggedInUser.storeTripHistory
-
-        const nonRealtimeFetch = fetch(
-          constructRoutingQuery(state, true, {
-            batchId: searchId,
-            ...injectedParams
-          }),
-          getOtpFetchOptions(state, storeTripHistory)
-        )
-          .then(getJsonAndCheckResponse)
-          .then((json) => {
-            // FIXME: This is only performed when ignoring realtimeupdates currently, just
-            // to ensure it is not repeated twice.
-            // FIXME: We should check that the mode combination actually has
-            // realtime (or maybe this is set in the config file) to determine
-            // whether this extra query to OTP is needed.
-            return dispatch(
-              nonRealtimeRoutingResponse({ response: json, searchId })
-            )
-          })
-          .catch((error) => {
-            console.error(error)
-            // do nothing
-          })
-
-        return Promise.all([realTimeFetch, nonRealtimeFetch])
+        return Promise.all([realTimeFetch])
       })
     )
   }

From def17f6bf20c485405259e2dc209cbac8713a0d2 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 20 Jan 2022 08:19:32 -0500
Subject: [PATCH 108/270] fix(actions/api): ignore non-accessible modes when
 routing accessible trip

---
 lib/actions/api.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 7fa08e3bb..7f968ae03 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -117,11 +117,21 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
     // For multiple mode combinations, gather injected params from config/query.
     // Otherwise, inject nothing (rely on what's in current query) and perform
     // one iteration.
+    const { wheelchair: accessibleRoutingEnabled } = state.otp.currentQuery
     const iterations = state.otp.currentQuery.combinations
-      ? state.otp.currentQuery.combinations.map(({ mode, params }) => ({
-          mode,
-          ...params
-        }))
+      ? state.otp.currentQuery.combinations
+          .map(({ mode, params }) => ({
+            mode,
+            ...params
+          }))
+          // Remove non-accessible combinations when accessible routing is enabled
+          .filter((combination) => {
+            if (!accessibleRoutingEnabled) return true
+
+            // Explicit check for false is needed to avoid matching
+            // combinations without the pparameter set (undefined)
+            return combination.accessible !== false
+          })
       : [{}]
     dispatch(
       routingRequest({

From e5c2b0c5a25e62c5a60d258003497611ef91f9bc Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 20 Jan 2022 09:28:15 -0500
Subject: [PATCH 109/270] refactor(desktop-nav): Change flag to
 localeSelectorEnabled

---
 example-config.yml                 | 2 +-
 lib/components/app/desktop-nav.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index a3b76674a..d8c28574d 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -345,7 +345,7 @@ itinerary:
 # a config file of the format below. The previous language format (w/ strings defined in the first layer)
 # is not compatible with localization
 
-# localizationEnabled: true
+# localizationOverrideEnabled: true
 # language:
 #   allLanguages
 #     common:
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index 2c0f65928..144630529 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -28,7 +28,7 @@ export type otpConfigType = {
 
 const DesktopNav = ({ otpConfig }: otpConfigType) => {
   const { branding, persistence, title = DEFAULT_APP_TITLE } = otpConfig
-  const { localizationEnabled } = otpConfig
+  const { localeSelectorEnabled } = otpConfig
   const { language: configLanguages } = otpConfig
   const showLogin = Boolean(getAuth0Config(persistence))
 
@@ -71,7 +71,7 @@ const DesktopNav = ({ otpConfig }: otpConfigType) => {
       <Navbar.Collapse>
         <Nav pullRight>
           {/* Don't render locale selector if we have only one language defined */}
-          {localizationEnabled &&
+          {localeSelectorEnabled &&
             configLanguages &&
             Object.keys(configLanguages).length > 1 && (
               <LocaleSelector

From b0cdfdce148c78640331ce7db74ad2a95580f642 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 20 Jan 2022 09:39:32 -0500
Subject: [PATCH 110/270] refactor(example-config): update flag name

---
 example-config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example-config.yml b/example-config.yml
index d8c28574d..aff3e5692 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -345,7 +345,7 @@ itinerary:
 # a config file of the format below. The previous language format (w/ strings defined in the first layer)
 # is not compatible with localization
 
-# localizationOverrideEnabled: true
+# localeSelectorEnabled: true
 # language:
 #   allLanguages
 #     common:

From 50614e16b8a4687cb376cdba79923c00c2e76071 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 20 Jan 2022 12:51:51 -0500
Subject: [PATCH 111/270] refactor(desktop-nav, locale-selector): Remove
 localeSelectorEnabled flag and address PR feedback

---
 example-config.yml                     | 58 ++++++++++++--------------
 lib/components/app/desktop-nav.tsx     | 14 ++++---
 lib/components/app/locale-selector.tsx | 16 +++----
 3 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index aff3e5692..388b8e97c 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -338,14 +338,10 @@ itinerary:
 ### The nested structure should be the same as the language files under the i18n folder.
 ### You can also customize OTP error messages for itinerary searches based on OTP HTTP codes.
 ### A separate message can be set for each language or locale if necessary.
-### All available languages should have an entry with at least a name identifier in this section so that
-### they may be rendered in the locale selector. 
-### Language display icons (flags) should be configured in config.js
-# LocalizationEnabled also provides a method to toggle the new localization functionality, which requires 
-# a config file of the format below. The previous language format (w/ strings defined in the first layer)
-# is not compatible with localization
-
-# localeSelectorEnabled: true
+### The LocaleSelector component, which provides a dropdown for the user to change their locale, will
+### only be rendered if more than one valid language (all languages must have "name" defined) is included
+### in the language config. Locale icons (flags) are currently defined in locale-selector.tsx file. 
+
 # language:
 #   allLanguages
 #     common:
@@ -374,36 +370,36 @@ itinerary:
 #         modes: "CAR_HAIL, CAR_RENT"
 #       480:
 #         msg: No available transit routes or rideshare/carshare service at origin.
-  # fr-FR:
-  #   name: French (France)
-  #   config:
-  #     # App (hamburger) menu items
-  #     menuItems:
-  #       car-pool: Covoiturage
-  #       give-us-feedback: Donnez votre avis
-  #       log-my-commute: Mes trajets verts
-  #       traveler-tools: Outils du voyageur
+#   fr-FR:
+#     name: French (France)
+#     config:
+#       # App (hamburger) menu items
+#       menuItems:
+#         car-pool: Covoiturage
+#         give-us-feedback: Donnez votre avis
+#         log-my-commute: Mes trajets verts
+#         traveler-tools: Outils du voyageur
 
-  # ko-KR:
-  #   name: 한국인
+#   ko-KR:
+#     name: 한국인
 
-  # vi-VN: 
-  #   name: Tiếng Việt
+#   vi-VN:
+#     name: Tiếng Việt
 
-  # zh-CN:
-  #   name: 中国人
+#   zh-CN:
+#     name: 中国人
 
-  # es-ES: 
-  #   name: Español
+#   es-ES: 
+#     name: Español
 
-  # ko-KR:
-  #   name: 한국인
+#   ko-KR:
+#     name: 한국인
 
-  # vi-VN: 
-  #   name: Tiếng Việt
+#   vi-VN: 
+#     name: Tiếng Việt
 
-  # zh-CN:
-  #   name: 中国人
+#   zh-CN:
+#     name: 中国人
 
 ### Localization section to provide language/locale settings
 #localization:
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index 144630529..59f942141 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -28,7 +28,6 @@ export type otpConfigType = {
 
 const DesktopNav = ({ otpConfig }: otpConfigType) => {
   const { branding, persistence, title = DEFAULT_APP_TITLE } = otpConfig
-  const { localeSelectorEnabled } = otpConfig
   const { language: configLanguages } = otpConfig
   const showLogin = Boolean(getAuth0Config(persistence))
 
@@ -70,10 +69,15 @@ const DesktopNav = ({ otpConfig }: otpConfigType) => {
 
       <Navbar.Collapse>
         <Nav pullRight>
-          {/* Don't render locale selector if we have only one language defined */}
-          {localeSelectorEnabled &&
-            configLanguages &&
-            Object.keys(configLanguages).length > 1 && (
+          {configLanguages &&
+            // Avoid rendering the LocaleSelector for configs without languages
+            !Object.keys(configLanguages).find(
+              (key) => key !== 'allLanguages' && !configLanguages[key].name
+            ) &&
+            // Ensure that > 1 valid language is defined
+            Object.keys(configLanguages).filter(
+              (key) => key !== 'allLanguages' && configLanguages[key].name
+            ).length > 1 && (
               <LocaleSelector
                 configLanguages={configLanguages}
                 style={{ maxWidth: 60 }}
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index babeb1306..cb993c196 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -66,14 +66,14 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
   return (
     <NavDropdown id="locale-selector" title={FLAG_ICON_MAPPING[currentLocale]}>
       {Object.keys(configLanguages).map(
-        (key) =>
-          /* Key is locale code, e.g. 'en-US' */
-          key !== currentLocale && (
+        (locale) =>
+          locale !== 'allLanguages' &&
+          locale !== currentLocale && (
             <MenuItem
-              onClick={(e: MouseEvent) => handleLocaleSelection(e, key)}
+              onClick={(e: MouseEvent) => handleLocaleSelection(e, locale)}
             >
-              <FlagContainer>{FLAG_ICON_MAPPING[key]}</FlagContainer>
-              {configLanguages[key].name}
+              <FlagContainer>{FLAG_ICON_MAPPING[locale]}</FlagContainer>
+              {configLanguages[locale].name}
             </MenuItem>
           )
       )}
@@ -81,8 +81,8 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
   )
 }
 
-// Typescript TODO: create state types and type state, ownProps properly
-const mapStateToProps = (state: any, ownProps: Record<string, any>) => {
+// Typescript TODO: type state properly
+const mapStateToProps = (state: any) => {
   return {
     locale: state.otp.ui.locale,
     loggedInUser: state.user.loggedInUser

From faedec9854f3cb3fe7e301127eaec58e6e3cef11 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 20 Jan 2022 14:16:07 -0500
Subject: [PATCH 112/270] chore: run autoformatter

---
 lib/components/form/batch-preferences.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/lib/components/form/batch-preferences.js b/lib/components/form/batch-preferences.js
index f6e37501b..882c7c030 100644
--- a/lib/components/form/batch-preferences.js
+++ b/lib/components/form/batch-preferences.js
@@ -1,10 +1,10 @@
 // import {DropdownSelector} from '@opentripplanner/trip-form'
-import React, { Component } from 'react'
 import { connect } from 'react-redux'
+import React, { Component } from 'react'
 
-import { setQueryParam } from '../../actions/form'
 import { ComponentContext } from '../../util/contexts'
 import { getShowUserSettings } from '../../util/state'
+import { setQueryParam } from '../../actions/form'
 
 import { StyledBatchPreferences } from './batch-styled'
 import UserTripSettings from './user-trip-settings'
@@ -12,18 +12,13 @@ import UserTripSettings from './user-trip-settings'
 class BatchPreferences extends Component {
   static contextType = ComponentContext
 
-  render () {
-    const {
-      config,
-      query,
-      setQueryParam,
-      showUserSettings
-    } = this.props
+  render() {
+    const { config, query, setQueryParam, showUserSettings } = this.props
     const { ModeIcon } = this.context
 
     return (
-      <div className='settings-selector-panel'>
-        <div className='modes-panel'>
+      <div className="settings-selector-panel">
+        <div className="modes-panel">
           {showUserSettings && <UserTripSettings />}
 
           <StyledBatchPreferences

From f89087e6eb7b76565b85b52d7b60d438c7289489 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 20 Jan 2022 14:17:41 -0500
Subject: [PATCH 113/270] chore: add typescript

---
 .../{batch-preferences.js => batch-preferences.tsx} | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)
 rename lib/components/form/{batch-preferences.js => batch-preferences.tsx} (87%)

diff --git a/lib/components/form/batch-preferences.js b/lib/components/form/batch-preferences.tsx
similarity index 87%
rename from lib/components/form/batch-preferences.js
rename to lib/components/form/batch-preferences.tsx
index 882c7c030..5e1e8d489 100644
--- a/lib/components/form/batch-preferences.js
+++ b/lib/components/form/batch-preferences.tsx
@@ -1,3 +1,5 @@
+// Typescript TODO: these types are a bit useless without types for config, query, and queryparam
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // import {DropdownSelector} from '@opentripplanner/trip-form'
 import { connect } from 'react-redux'
 import React, { Component } from 'react'
@@ -9,7 +11,12 @@ import { setQueryParam } from '../../actions/form'
 import { StyledBatchPreferences } from './batch-styled'
 import UserTripSettings from './user-trip-settings'
 
-class BatchPreferences extends Component {
+class BatchPreferences extends Component<{
+  config: any
+  query: any
+  setQueryParam: (newQueryParam: any) => void
+  showUserSettings: boolean
+}> {
   static contextType = ComponentContext
 
   render() {
@@ -90,7 +97,9 @@ class BatchPreferences extends Component {
 
 // connect to redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state: {
+  otp: { config: any; currentQuery: any }
+}) => {
   const { config, currentQuery } = state.otp
   return {
     config,

From c91911cd95ef703542a757af37d97de6a9ee32e4 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 21 Jan 2022 07:47:45 -0500
Subject: [PATCH 114/270] refactor(components/form/batch-preferences): update
 combinations on queryParam update

---
 lib/components/form/batch-preferences.tsx | 28 +++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/lib/components/form/batch-preferences.tsx b/lib/components/form/batch-preferences.tsx
index 5e1e8d489..98ded2fb3 100644
--- a/lib/components/form/batch-preferences.tsx
+++ b/lib/components/form/batch-preferences.tsx
@@ -19,8 +19,32 @@ class BatchPreferences extends Component<{
 }> {
   static contextType = ComponentContext
 
+  /**
+   * When the queryParam changes, the mode is correctly updated but the
+   * active combinations are not. This method updates the currentQuery combinations
+   * and ensures that they all contain the correct modes
+   *
+   * Typescript TODO: combinations and queryParams need types
+   */
+  onQueryParamChange = (newQueryParams: any) => {
+    const { config, setQueryParam } = this.props
+    const combinations = config.modes.combinations.map(
+      (combination: {
+        mode: string
+        params?: { [key: string]: number | string }
+      }) => {
+        // Split out walk so it's not duplicated
+        const newMode = newQueryParams.mode.split('WALK,')[1]
+        // Replace TRANSIT with the newly selected parameters
+        const mode = combination.mode.replace('TRANSIT', newMode)
+        return { ...combination, mode }
+      }
+    )
+    setQueryParam({ ...newQueryParams, combinations })
+  }
+
   render() {
-    const { config, query, setQueryParam, showUserSettings } = this.props
+    const { config, query, showUserSettings } = this.props
     const { ModeIcon } = this.context
 
     return (
@@ -30,7 +54,7 @@ class BatchPreferences extends Component<{
 
           <StyledBatchPreferences
             ModeIcon={ModeIcon}
-            onQueryParamChange={setQueryParam}
+            onQueryParamChange={this.onQueryParamChange}
             queryParams={query}
             supportedCompanies={config.companies}
             supportedModes={config.modes}

From 7d42dce7b492b25999b61fe859c273122654bf27 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 21 Jan 2022 08:07:04 -0500
Subject: [PATCH 115/270] chore: run autoformatter

---
 lib/components/form/batch-settings.js | 111 +++++++++++++++-----------
 1 file changed, 63 insertions(+), 48 deletions(-)

diff --git a/lib/components/form/batch-settings.js b/lib/components/form/batch-settings.js
index b3087b173..a8b791a5c 100644
--- a/lib/components/form/batch-settings.js
+++ b/lib/components/form/batch-settings.js
@@ -1,17 +1,18 @@
+import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
-import { injectIntl } from 'react-intl'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
+import {
+  getActiveSearch,
+  getShowUserSettings,
+  hasValidLocation
+} from '../../util/state'
 import Icon from '../util/icon'
-import { hasValidLocation, getActiveSearch, getShowUserSettings } from '../../util/state'
 
-import BatchPreferences from './batch-preferences'
-import DateTimeModal from './date-time-modal'
-import ModeButtons, {getModeOptions, StyledModeButton} from './mode-buttons'
 import {
   BatchPreferencesContainer,
   DateTimeModalContainer,
@@ -21,6 +22,9 @@ import {
   StyledDateTimePreview
 } from './batch-styled'
 import { Dot } from './styled'
+import BatchPreferences from './batch-preferences'
+import DateTimeModal from './date-time-modal'
+import ModeButtons, { getModeOptions, StyledModeButton } from './mode-buttons'
 
 /**
  * Simple utility to check whether a list of mode strings contains the provided
@@ -31,12 +35,12 @@ import { Dot } from './styled'
  * the 'contains' check. E.g., we might not want to remove WALK,TRANSIT if walk
  * is turned off, but we DO want to remove it if TRANSIT is turned off.
  */
-function listHasMode (modes, mode) {
-  return modes.some(m => mode.indexOf(m) !== -1)
+function listHasMode(modes, mode) {
+  return modes.some((m) => mode.indexOf(m) !== -1)
 }
 
-function combinationHasAnyOfModes (combination, modes) {
-  return combination.mode.split(',').some(m => listHasMode(modes, m))
+function combinationHasAnyOfModes(combination, modes) {
+  return combination.mode.split(',').some((m) => listHasMode(modes, m))
 }
 
 const ModeButtonsFullWidthContainer = styled.div`
@@ -78,68 +82,75 @@ const ModeButtonsCompressed = styled(ModeButtons)`
 class BatchSettings extends Component {
   state = {
     expanded: null,
-    selectedModes: getModeOptions(this.props.intl).map(m => m.mode)
+    selectedModes: getModeOptions(this.props.intl).map((m) => m.mode)
   }
 
   _onClickMode = (mode) => {
-    const {possibleCombinations, setQueryParam} = this.props
-    const {selectedModes} = this.state
+    const { possibleCombinations, setQueryParam } = this.props
+    const { selectedModes } = this.state
     const index = selectedModes.indexOf(mode)
     const enableMode = index === -1
     const newModes = [...selectedModes]
     if (enableMode) newModes.push(mode)
     else newModes.splice(index, 1)
     // Update selected modes for mode buttons.
-    this.setState({selectedModes: newModes})
+    this.setState({ selectedModes: newModes })
     // Update the available mode combinations based on the new modes selection.
-    const possibleModes = getModeOptions(this.props.intl).map(m => m.mode)
-    const disabledModes = possibleModes.filter(m => !newModes.includes(m))
+    const possibleModes = getModeOptions(this.props.intl).map((m) => m.mode)
+    const disabledModes = possibleModes.filter((m) => !newModes.includes(m))
     // Do not include combination if any of its modes are found in disabled
     // modes list.
-    const newCombinations = possibleCombinations
-      .filter(c => !combinationHasAnyOfModes(c, disabledModes))
-    setQueryParam({combinations: newCombinations})
+    const newCombinations = possibleCombinations.filter(
+      (c) => !combinationHasAnyOfModes(c, disabledModes)
+    )
+    setQueryParam({ combinations: newCombinations })
   }
 
   _planTrip = () => {
-    const {currentQuery, intl, routingQuery} = this.props
+    const { currentQuery, intl, routingQuery } = this.props
     // Check for any validation issues in query.
     const issues = []
     if (!hasValidLocation(currentQuery, 'from')) {
-      issues.push(intl.formatMessage({id: 'components.BatchSettings.origin'}))
+      issues.push(intl.formatMessage({ id: 'components.BatchSettings.origin' }))
     }
     if (!hasValidLocation(currentQuery, 'to')) {
-      issues.push(intl.formatMessage({id: 'components.BatchSettings.destination'}))
+      issues.push(
+        intl.formatMessage({ id: 'components.BatchSettings.destination' })
+      )
     }
     if (issues.length > 0) {
       // TODO: replace with less obtrusive validation.
-      window.alert(intl.formatMessage(
-        {id: 'components.BatchSettings.validationMessage'},
-        {issues: intl.formatList(issues, {type: 'conjunction'})}
-      ))
+      window.alert(
+        intl.formatMessage(
+          { id: 'components.BatchSettings.validationMessage' },
+          { issues: intl.formatList(issues, { type: 'conjunction' }) }
+        )
+      )
       return
     }
     // Close any expanded panels.
-    this.setState({expanded: null})
+    this.setState({ expanded: null })
 
     // Plan trip.
     routingQuery()
   }
 
-  _updateExpanded = (type) => ({expanded: this.state.expanded === type ? null : type})
+  _updateExpanded = (type) => ({
+    expanded: this.state.expanded === type ? null : type
+  })
 
   _toggleDateTime = () => this.setState(this._updateExpanded('DATE_TIME'))
 
   _toggleSettings = () => this.setState(this._updateExpanded('SETTINGS'))
 
-  render () {
-    const {config, currentQuery, intl} = this.props
-    const {expanded, selectedModes} = this.state
+  render() {
+    const { config, currentQuery, intl } = this.props
+    const { expanded, selectedModes } = this.state
     return (
       <>
-        <ModeButtonsFullWidthContainer className='hidden-lg'>
+        <ModeButtonsFullWidthContainer className="hidden-lg">
           <ModeButtonsFullWidth
-            className='flex'
+            className="flex"
             onClick={this._onClickMode}
             selectedModes={selectedModes}
           />
@@ -149,40 +160,43 @@ class BatchSettings extends Component {
             expanded={expanded === 'SETTINGS'}
             onClick={this._toggleSettings}
           >
-            {coreUtils.query.isNotDefaultQuery(currentQuery, config) &&
-              <Dot className='dot' />
-            }
-            <Icon className='fa-2x' type='cog' />
+            {coreUtils.query.isNotDefaultQuery(currentQuery, config) && (
+              <Dot className="dot" />
+            )}
+            <Icon className="fa-2x" type="cog" />
           </SettingsPreview>
           <StyledDateTimePreview
             // as='button'
             expanded={expanded === 'DATE_TIME'}
             hideButton
-            onClick={this._toggleDateTime} />
+            onClick={this._toggleDateTime}
+          />
           <ModeButtonsContainerCompressed>
             <ModeButtonsCompressed
-              className='visible-lg straight-corners'
+              className="visible-lg straight-corners"
               onClick={this._onClickMode}
               selectedModes={selectedModes}
             />
           </ModeButtonsContainerCompressed>
           <PlanTripButton
             onClick={this._planTrip}
-            title={intl.formatMessage({id: 'components.BatchSettings.planTripTooltip'})}
+            title={intl.formatMessage({
+              id: 'components.BatchSettings.planTripTooltip'
+            })}
           >
-            <Icon className='fa-2x' type='search' />
+            <Icon className="fa-2x" type="search" />
           </PlanTripButton>
         </MainSettingsRow>
-        {expanded === 'DATE_TIME' &&
+        {expanded === 'DATE_TIME' && (
           <DateTimeModalContainer>
             <DateTimeModal />
           </DateTimeModalContainer>
-        }
-        {expanded === 'SETTINGS' &&
+        )}
+        {expanded === 'SETTINGS' && (
           <BatchPreferencesContainer>
             <BatchPreferences />
           </BatchPreferencesContainer>
-        }
+        )}
       </>
     )
   }
@@ -206,6 +220,7 @@ const mapDispatchToProps = {
   setQueryParam: formActions.setQueryParam
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  injectIntl(BatchSettings)
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(BatchSettings))

From 887c1c9f28b34f7c1061ece2df4eb775591c8264 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 21 Jan 2022 08:33:31 -0500
Subject: [PATCH 116/270] refactor(comonents/form): more resilient mode and
 combination updating

---
 lib/components/form/batch-preferences.tsx | 37 +++++++++++++++--------
 lib/components/form/batch-settings.js     | 12 ++++----
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/lib/components/form/batch-preferences.tsx b/lib/components/form/batch-preferences.tsx
index 98ded2fb3..491128cc2 100644
--- a/lib/components/form/batch-preferences.tsx
+++ b/lib/components/form/batch-preferences.tsx
@@ -11,6 +11,22 @@ import { setQueryParam } from '../../actions/form'
 import { StyledBatchPreferences } from './batch-styled'
 import UserTripSettings from './user-trip-settings'
 
+// TODO: Central type source
+type Combination = {
+  mode: string
+  params?: { [key: string]: number | string }
+}
+
+export const replaceTransitMode =
+  (newQueryParamsMode: string) =>
+  (combination: Combination): Combination => {
+    // Split out walk so it's not duplicated
+    const newMode = (newQueryParamsMode || 'WALK,TRANSIT').split('WALK,')?.[1]
+    // Replace TRANSIT with the newly selected parameters
+    const mode = combination.mode.replace('TRANSIT', newMode)
+    return { ...combination, mode }
+  }
+
 class BatchPreferences extends Component<{
   config: any
   query: any
@@ -27,19 +43,14 @@ class BatchPreferences extends Component<{
    * Typescript TODO: combinations and queryParams need types
    */
   onQueryParamChange = (newQueryParams: any) => {
-    const { config, setQueryParam } = this.props
-    const combinations = config.modes.combinations.map(
-      (combination: {
-        mode: string
-        params?: { [key: string]: number | string }
-      }) => {
-        // Split out walk so it's not duplicated
-        const newMode = newQueryParams.mode.split('WALK,')[1]
-        // Replace TRANSIT with the newly selected parameters
-        const mode = combination.mode.replace('TRANSIT', newMode)
-        return { ...combination, mode }
-      }
-    )
+    const { config, query, setQueryParam } = this.props
+    const disabledModes = query.disabledModes || []
+    const combinations = config.modes.combinations
+      .filter((combination: Combination) => {
+        const modesInCombination = combination.mode.split(',')
+        return !modesInCombination.find((m) => disabledModes.includes(m))
+      })
+      .map(replaceTransitMode(newQueryParams.mode))
     setQueryParam({ ...newQueryParams, combinations })
   }
 
diff --git a/lib/components/form/batch-settings.js b/lib/components/form/batch-settings.js
index a8b791a5c..4f165bc8a 100644
--- a/lib/components/form/batch-settings.js
+++ b/lib/components/form/batch-settings.js
@@ -22,7 +22,7 @@ import {
   StyledDateTimePreview
 } from './batch-styled'
 import { Dot } from './styled'
-import BatchPreferences from './batch-preferences'
+import BatchPreferences, { replaceTransitMode } from './batch-preferences'
 import DateTimeModal from './date-time-modal'
 import ModeButtons, { getModeOptions, StyledModeButton } from './mode-buttons'
 
@@ -86,7 +86,7 @@ class BatchSettings extends Component {
   }
 
   _onClickMode = (mode) => {
-    const { possibleCombinations, setQueryParam } = this.props
+    const { currentQuery, possibleCombinations, setQueryParam } = this.props
     const { selectedModes } = this.state
     const index = selectedModes.indexOf(mode)
     const enableMode = index === -1
@@ -100,10 +100,10 @@ class BatchSettings extends Component {
     const disabledModes = possibleModes.filter((m) => !newModes.includes(m))
     // Do not include combination if any of its modes are found in disabled
     // modes list.
-    const newCombinations = possibleCombinations.filter(
-      (c) => !combinationHasAnyOfModes(c, disabledModes)
-    )
-    setQueryParam({ combinations: newCombinations })
+    const newCombinations = possibleCombinations
+      .filter((c) => !combinationHasAnyOfModes(c, disabledModes))
+      .map(replaceTransitMode(currentQuery.mode))
+    setQueryParam({ combinations: newCombinations, disabledModes })
   }
 
   _planTrip = () => {

From d841c620747a530faf33d419a48591c270d8b886 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 21 Jan 2022 10:59:25 -0500
Subject: [PATCH 117/270] refactor(components/form): add typescript types

---
 lib/components/form/batch-preferences.tsx     |   2 +-
 .../{batch-settings.js => batch-settings.tsx} |  31 +++--
 .../form/{batch-styled.js => batch-styled.ts} |  25 ++--
 lib/components/form/mode-buttons.js           |  98 --------------
 lib/components/form/mode-buttons.tsx          | 123 ++++++++++++++++++
 5 files changed, 159 insertions(+), 120 deletions(-)
 rename lib/components/form/{batch-settings.js => batch-settings.tsx} (88%)
 rename lib/components/form/{batch-styled.js => batch-styled.ts} (89%)
 delete mode 100644 lib/components/form/mode-buttons.js
 create mode 100644 lib/components/form/mode-buttons.tsx

diff --git a/lib/components/form/batch-preferences.tsx b/lib/components/form/batch-preferences.tsx
index 491128cc2..1aa4697bc 100644
--- a/lib/components/form/batch-preferences.tsx
+++ b/lib/components/form/batch-preferences.tsx
@@ -12,7 +12,7 @@ import { StyledBatchPreferences } from './batch-styled'
 import UserTripSettings from './user-trip-settings'
 
 // TODO: Central type source
-type Combination = {
+export type Combination = {
   mode: string
   params?: { [key: string]: number | string }
 }
diff --git a/lib/components/form/batch-settings.js b/lib/components/form/batch-settings.tsx
similarity index 88%
rename from lib/components/form/batch-settings.js
rename to lib/components/form/batch-settings.tsx
index 4f165bc8a..aa9ab885b 100644
--- a/lib/components/form/batch-settings.js
+++ b/lib/components/form/batch-settings.tsx
@@ -1,5 +1,8 @@
 import { connect } from 'react-redux'
-import { injectIntl } from 'react-intl'
+import { injectIntl, IntlShape } from 'react-intl'
+// FIXME: type OTP-UI
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
 import styled from 'styled-components'
@@ -25,6 +28,7 @@ import { Dot } from './styled'
 import BatchPreferences, { replaceTransitMode } from './batch-preferences'
 import DateTimeModal from './date-time-modal'
 import ModeButtons, { getModeOptions, StyledModeButton } from './mode-buttons'
+import type { Combination } from './batch-preferences'
 
 /**
  * Simple utility to check whether a list of mode strings contains the provided
@@ -35,12 +39,12 @@ import ModeButtons, { getModeOptions, StyledModeButton } from './mode-buttons'
  * the 'contains' check. E.g., we might not want to remove WALK,TRANSIT if walk
  * is turned off, but we DO want to remove it if TRANSIT is turned off.
  */
-function listHasMode(modes, mode) {
-  return modes.some((m) => mode.indexOf(m) !== -1)
+function listHasMode(modes: string[], mode: string) {
+  return modes.some((m: string) => mode.indexOf(m) !== -1)
 }
 
-function combinationHasAnyOfModes(combination, modes) {
-  return combination.mode.split(',').some((m) => listHasMode(modes, m))
+function combinationHasAnyOfModes(combination: Combination, modes: string[]) {
+  return combination.mode.split(',').some((m: string) => listHasMode(modes, m))
 }
 
 const ModeButtonsFullWidthContainer = styled.div`
@@ -79,13 +83,21 @@ const ModeButtonsCompressed = styled(ModeButtons)`
 /**
  * Main panel for the batch/trip comparison form.
  */
-class BatchSettings extends Component {
+// TYPESCRIPT TODO: better types
+class BatchSettings extends Component<{
+  config: any
+  currentQuery: any
+  intl: IntlShape
+  possibleCombinations: Combination[]
+  routingQuery: any
+  setQueryParam: (queryParam: any) => void
+}> {
   state = {
     expanded: null,
     selectedModes: getModeOptions(this.props.intl).map((m) => m.mode)
   }
 
-  _onClickMode = (mode) => {
+  _onClickMode = (mode: string) => {
     const { currentQuery, possibleCombinations, setQueryParam } = this.props
     const { selectedModes } = this.state
     const index = selectedModes.indexOf(mode)
@@ -135,7 +147,7 @@ class BatchSettings extends Component {
     routingQuery()
   }
 
-  _updateExpanded = (type) => ({
+  _updateExpanded = (type: string) => ({
     expanded: this.state.expanded === type ? null : type
   })
 
@@ -203,7 +215,8 @@ class BatchSettings extends Component {
 }
 
 // connect to the redux store
-const mapStateToProps = (state, ownProps) => {
+// TODO: Typescript
+const mapStateToProps = (state: any) => {
   const showUserSettings = getShowUserSettings(state)
   return {
     activeSearch: getActiveSearch(state),
diff --git a/lib/components/form/batch-styled.js b/lib/components/form/batch-styled.ts
similarity index 89%
rename from lib/components/form/batch-styled.js
rename to lib/components/form/batch-styled.ts
index 7b4bdda86..70dfaa24e 100644
--- a/lib/components/form/batch-styled.js
+++ b/lib/components/form/batch-styled.ts
@@ -1,18 +1,18 @@
 import * as TripFormClasses from '@opentripplanner/trip-form/lib/styled'
 import { SettingsSelectorPanel } from '@opentripplanner/trip-form'
-import styled, {css} from 'styled-components'
+import styled, { css } from 'styled-components'
 
+import { commonInputCss, modeButtonButtonCss } from './styled'
 import DateTimePreview from './date-time-preview'
-import {commonInputCss, modeButtonButtonCss} from './styled'
 
 const SHADOW = 'inset 0px 0px 5px #c1c1c1'
 
 const activeCss = css`
   background: #e5e5e5;
   -webkit-box-shadow: ${SHADOW};
-     -moz-box-shadow: ${SHADOW};
-          box-shadow: ${SHADOW};
-   outline: none;
+  -moz-box-shadow: ${SHADOW};
+  box-shadow: ${SHADOW};
+  outline: none;
 `
 
 export const buttonCss = css`
@@ -40,18 +40,18 @@ export const StyledDateTimePreview = styled(DateTimePreview)`
   text-align: left;
   white-space: nowrap;
   width: 120px;
-  ${props => props.expanded ? activeCss : null}
+  ${(props) => (props.expanded ? activeCss : null)}
 `
-export const SettingsPreview = styled(Button)`
+export const SettingsPreview = styled(Button)<{ expanded?: boolean }>`
   line-height: 22px;
   margin-right: 5px;
   padding: 10px 0px;
   position: relative;
-  ${props => props.expanded ? activeCss : null}
+  ${(props) => (props.expanded ? activeCss : null)}
 `
 
 export const PlanTripButton = styled(Button)`
-  background-color: #F5F5A7;
+  background-color: #f5f5a7;
   margin-left: auto;
   padding: 5px;
   &:active {
@@ -122,14 +122,15 @@ export const StyledBatchPreferences = styled(SettingsSelectorPanel)`
 
       &:focus {
         border-color: #66afe9;
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          0 0 8px rgba(102, 175, 233, 0.6);
         outline: 0;
       }
     }
     > div:last-child::after {
       box-sizing: border-box;
       color: #000;
-      content: "▼";
+      content: '▼';
       font-size: 67%;
       pointer-events: none;
       position: absolute;
@@ -176,7 +177,7 @@ export const StyledBatchPreferences = styled(SettingsSelectorPanel)`
       font-weight: 800;
       height: 46px;
       > svg {
-        margin: 0 0.20em;
+        margin: 0 0.2em;
       }
     }
   }
diff --git a/lib/components/form/mode-buttons.js b/lib/components/form/mode-buttons.js
deleted file mode 100644
index a807f5a59..000000000
--- a/lib/components/form/mode-buttons.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useContext } from 'react'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { useIntl } from 'react-intl'
-import styled from 'styled-components'
-
-import { ComponentContext } from '../../util/contexts'
-import Icon from '../util/icon'
-
-import {buttonCss} from './batch-styled'
-
-export function getModeOptions (intl) {
-  // intl.formatMessage is used here instead of <FormattedMessage> because the text is
-  // rendered inside <OverlayTrigger>, which renders outside of the <IntlProvider> context.
-  return [
-    {
-      label: intl.formatMessage({id: 'common.modes.transit'}),
-      mode: 'TRANSIT'
-    },
-    {
-      label: intl.formatMessage({id: 'common.modes.walking'}),
-      mode: 'WALK'
-    },
-    {
-      label: intl.formatMessage({id: 'common.modes.drive'}),
-      mode: 'CAR'
-    },
-    {
-      label: intl.formatMessage({id: 'common.modes.bicycle'}),
-      mode: 'BICYCLE'
-    },
-    {
-      icon: 'mobile',
-      label: intl.formatMessage({id: 'common.modes.rent'}),
-      mode: 'RENT' // TODO: include HAIL?
-    }
-  ]
-}
-
-const ModeButtons = ({
-  className,
-  onClick,
-  selectedModes = []
-}) => {
-  const intl = useIntl()
-  return getModeOptions(intl).map((item, index) => (
-    <StyledModeButton
-      className={className}
-      item={item}
-      key={item.mode}
-      onClick={onClick}
-      selected={selectedModes.indexOf(item.mode) !== -1}
-    />
-  ))
-}
-
-const CheckMarkIcon = styled(Icon)`
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  color: green;
-`
-
-const ModeButton = ({className, item, onClick, selected}) => {
-  const {ModeIcon} = useContext(ComponentContext)
-  const {icon, label, mode} = item
-  return (
-    <OverlayTrigger
-      overlay={<Tooltip id={mode}>{label}</Tooltip>}
-      placement='bottom'
-    >
-      <button
-        className={className}
-        onClick={() => onClick(mode)}
-      >
-        {icon
-          ? <Icon className='fa-2x' type={icon} />
-          : <ModeIcon height={25} mode={mode} />
-        }
-        {selected && <CheckMarkIcon type='check' />}
-      </button>
-    </OverlayTrigger>
-  )
-}
-
-export const StyledModeButton = styled(ModeButton)`
-  ${buttonCss}
-  &.flex {
-    flex-grow: 1;
-    margin-right: 5px;
-  }
-  &.straight-corners {
-    border-radius: 0px;
-  }
-  border: 0px;
-  position: relative;
-`
-
-export default ModeButtons
diff --git a/lib/components/form/mode-buttons.tsx b/lib/components/form/mode-buttons.tsx
new file mode 100644
index 000000000..13ec4cab4
--- /dev/null
+++ b/lib/components/form/mode-buttons.tsx
@@ -0,0 +1,123 @@
+import { IntlShape, useIntl } from 'react-intl'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import React, { useContext } from 'react'
+import styled from 'styled-components'
+
+import { ComponentContext } from '../../util/contexts'
+import Icon from '../util/icon'
+
+import { buttonCss } from './batch-styled'
+
+type Mode = {
+  icon?: string
+  label: string
+  mode: string
+}
+
+export function getModeOptions(intl: IntlShape): Mode[] {
+  // intl.formatMessage is used here instead of <FormattedMessage> because the text is
+  // rendered inside <OverlayTrigger>, which renders outside of the <IntlProvider> context.
+  return [
+    {
+      label: intl.formatMessage({ id: 'common.modes.transit' }),
+      mode: 'TRANSIT'
+    },
+    {
+      label: intl.formatMessage({ id: 'common.modes.walking' }),
+      mode: 'WALK'
+    },
+    {
+      label: intl.formatMessage({ id: 'common.modes.drive' }),
+      mode: 'CAR'
+    },
+    {
+      label: intl.formatMessage({ id: 'common.modes.bicycle' }),
+      mode: 'BICYCLE'
+    },
+    {
+      icon: 'mobile',
+      label: intl.formatMessage({ id: 'common.modes.rent' }),
+      mode: 'RENT' // TODO: include HAIL?
+    }
+  ]
+}
+
+const CheckMarkIcon = styled(Icon)`
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  color: green;
+`
+
+const ModeButton = ({
+  className,
+  item,
+  onClick,
+  selected
+}: {
+  className: string
+  item: Mode
+  onClick: (mode: string) => void
+  selected: boolean
+}): JSX.Element => {
+  // FIXME: type context
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const { ModeIcon } = useContext(ComponentContext)
+  const { icon, label, mode } = item
+  return (
+    <OverlayTrigger
+      overlay={<Tooltip id={mode}>{label}</Tooltip>}
+      placement="bottom"
+    >
+      <button className={className} onClick={() => onClick(mode)}>
+        {icon ? (
+          <Icon className="fa-2x" type={icon} />
+        ) : (
+          <ModeIcon height={25} mode={mode} />
+        )}
+        {selected && <CheckMarkIcon type="check" />}
+      </button>
+    </OverlayTrigger>
+  )
+}
+
+export const StyledModeButton = styled(ModeButton)`
+  ${buttonCss}
+  &.flex {
+    flex-grow: 1;
+    margin-right: 5px;
+  }
+  &.straight-corners {
+    border-radius: 0px;
+  }
+  border: 0px;
+  position: relative;
+`
+
+const ModeButtons = ({
+  className,
+  onClick,
+  selectedModes = []
+}: {
+  className: string
+  onClick: (mode: string) => void
+  selectedModes: string[]
+}): JSX.Element => {
+  const intl = useIntl()
+  return (
+    <>
+      {getModeOptions(intl).map((item, index) => (
+        <StyledModeButton
+          className={className}
+          item={item}
+          key={item.mode}
+          onClick={onClick}
+          selected={selectedModes.indexOf(item.mode) !== -1}
+        />
+      ))}
+    </>
+  )
+}
+
+export default ModeButtons

From ca08debd338383fb327a3543108c92b3e269a740 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 21 Jan 2022 12:37:15 -0500
Subject: [PATCH 118/270] refactor: address pr feedback

---
 lib/actions/api.js                    | 13 ++++++++-----
 lib/components/viewers/trip-viewer.js | 20 +++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index fef609d61..6827b1634 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -560,12 +560,15 @@ export function findTrip(params) {
     }
   )
 }
-export function findGraphQLTrip(params) {
-  // Attempt an otp-2 graphQL request for the same trip before failing
-  // since the otp-2 rest api doesn't return the needed fields
 
-  // TODO: for now, this matches the OTP-1 output. In the future this should be
-  // reduced to only include what is needed
+/**
+ * Attempt an OTP-2 GraphQL request for the same trip before failing, since
+ * the OTP-2 rest api doesn't return the needed fields.
+ *
+ * TODO: for now, this matches the OTP-1 output. In the future this should be
+ * reduced to only include what is needed, and fields not renamed.
+ */
+export function findGraphQLTrip(params) {
   return createGraphQLQueryAction(
     `{
         trip(id: "${params.tripId}") {
diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index ed09410a8..f64912aed 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -8,9 +8,9 @@ import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
+import * as mapActions from '../../actions/map'
+import * as uiActions from '../../actions/ui'
 import { findGraphQLTrip, findTrip } from '../../actions/api'
-import { setLocation } from '../../actions/map'
-import { setViewedTrip } from '../../actions/ui'
 import Icon from '../util/icon'
 import SpanWithSpace from '../util/span-with-space'
 import Strong from '../util/strong-text'
@@ -24,7 +24,7 @@ class TripViewer extends Component {
     findGraphQLTrip: findGraphQLTrip.type,
     findTrip: findTrip.type,
     hideBackButton: PropTypes.bool,
-    setViewedTrip: setViewedTrip.type,
+    setViewedTrip: uiActions.setViewedTrip.type,
     tripData: PropTypes.object,
     viewedTrip: PropTypes.object
   }
@@ -116,17 +116,19 @@ class TripViewer extends Component {
               // determine whether to use special styling for first/last stop
               let stripMapLineClass = 'strip-map-line'
               if (i === 0) stripMapLineClass = 'strip-map-line-first'
-              else if (i === tripData.stops.length - 1)
+              else if (i === tripData.stops.length - 1) {
                 stripMapLineClass = 'strip-map-line-last'
+              }
 
               // determine whether to show highlight in strip map
               let highlightClass
-              if (i === viewedTrip.fromIndex)
+              if (i === viewedTrip.fromIndex) {
                 highlightClass = 'strip-map-highlight-first'
-              else if (i > viewedTrip.fromIndex && i < viewedTrip.toIndex)
+              } else if (i > viewedTrip.fromIndex && i < viewedTrip.toIndex) {
                 highlightClass = 'strip-map-highlight'
-              else if (i === viewedTrip.toIndex)
+              } else if (i === viewedTrip.toIndex) {
                 highlightClass = 'strip-map-highlight-last'
+              }
 
               // Convert to unix (millisceonds) for FormattedTime
               // Use timezone to avoid spying on startOf in future tests
@@ -188,8 +190,8 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = {
   findGraphQLTrip,
   findTrip,
-  setLocation,
-  setViewedTrip
+  setLocation: mapActions.setLocation,
+  setViewedTrip: uiActions.setViewedTrip
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(TripViewer)

From 24d33b2cc7bc6c907163261e887bc141de279f1d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 24 Jan 2022 07:26:34 -0500
Subject: [PATCH 119/270] refactor(trip-viewer): extract out api actions

---
 lib/components/viewers/trip-viewer.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index f64912aed..429846ff5 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -8,9 +8,9 @@ import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
+import * as apiActions from '../../actions/api'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
-import { findGraphQLTrip, findTrip } from '../../actions/api'
 import Icon from '../util/icon'
 import SpanWithSpace from '../util/span-with-space'
 import Strong from '../util/strong-text'
@@ -21,8 +21,8 @@ const { getUserTimezone } = coreUtils.time
 
 class TripViewer extends Component {
   static propTypes = {
-    findGraphQLTrip: findGraphQLTrip.type,
-    findTrip: findTrip.type,
+    findGraphQLTrip: apiActions.findGraphQLTrip.type,
+    findTrip: apiActions.findTrip.type,
     hideBackButton: PropTypes.bool,
     setViewedTrip: uiActions.setViewedTrip.type,
     tripData: PropTypes.object,
@@ -188,8 +188,8 @@ const mapStateToProps = (state) => {
 }
 
 const mapDispatchToProps = {
-  findGraphQLTrip,
-  findTrip,
+  findGraphQLTrip: apiActions.findGraphQLTrip,
+  findTrip: apiActions.findTripActions,
   setLocation: mapActions.setLocation,
   setViewedTrip: uiActions.setViewedTrip
 }

From fbe18c66ed13b04f6f24c3b54e190ccee4e76b96 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 24 Jan 2022 07:51:36 -0500
Subject: [PATCH 120/270] refactor(trip-viewer): correct typo

---
 lib/components/viewers/trip-viewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index 429846ff5..5c5ba82e9 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -189,7 +189,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
   findGraphQLTrip: apiActions.findGraphQLTrip,
-  findTrip: apiActions.findTripActions,
+  findTrip: apiActions.findTrip,
   setLocation: mapActions.setLocation,
   setViewedTrip: uiActions.setViewedTrip
 }

From 76d1b3384a0ad8f6e1da9b84afab3e3961eac3c6 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 24 Jan 2022 07:57:31 -0500
Subject: [PATCH 121/270] ci: only run a11y tests once

---
 .github/workflows/node-ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
index ed1b484eb..830172aab 100644
--- a/.github/workflows/node-ci.yml
+++ b/.github/workflows/node-ci.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Lint all code (ignoring errors)
         run: yarn lint-all || true
       - name: Run tests
-        run: yarn jest
+        run: yarn test
       - name: Build example project
         run: yarn build
       - name: Run a11y tests

From c91f11d09d74bdcf62c029cc4923e67bedc9d707 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 24 Jan 2022 11:20:49 -0500
Subject: [PATCH 122/270] fix: add tsc to tests

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f9cba43af..28d62b2d6 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable",
     "prestart": "yarn",
-    "test": "yarn run lint && yarn run unit",
+    "test": "yarn run lint && yarn run typecheck && yarn run unit",
+    "typecheck": "yarn tsc",
     "semantic-release": "semantic-release",
     "start": "craco start"
   },

From 27e08a4d0c8d9d2531b8b3ae991021b54c339a3d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 24 Jan 2022 12:16:34 -0500
Subject: [PATCH 123/270] chore(deps): upgrade otp-ui

---
 package.json |  2 +-
 yarn.lock    | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5a8f70e83..42beb6e41 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
     "@opentripplanner/itinerary-body": "^2.7.0",
-    "@opentripplanner/location-field": "^1.8.0",
+    "@opentripplanner/location-field": "^1.11.1",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
diff --git a/yarn.lock b/yarn.lock
index 33deb055e..81c0d5d71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2428,7 +2428,7 @@
     "@opentripplanner/core-utils" "^4.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/core-utils@^4.1.0", "@opentripplanner/core-utils@^4.2.0":
+"@opentripplanner/core-utils@^4.1.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.4.0.tgz#3eb8f9718d32ce50e3b79d975d682559c5a7b0bf"
   integrity sha512-qCd+NXa0PxwcN2DFR0HX1u/76RzQwHe2r0VGcaOS4GxvQ5HEL4zPyaT+lkxAyE6AFQAvNynyofhxlnMwbxtqEA==
@@ -2549,14 +2549,14 @@
     react-resize-detector "^4.2.1"
     velocity-react "^1.4.3"
 
-"@opentripplanner/location-field@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.8.0.tgz#a210c9b7fbddd7a503b1077bdfbcfdd3c1dca579"
-  integrity sha512-0CKWy9kV/odd0mpSSCPm+F/XinYkus5xUHXsBjKcN4Fc5y+uA9mR9pfXaL7ztNARbdQMWwtPhenzsO+qae8D/Q==
+"@opentripplanner/location-field@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.11.1.tgz#78ed05d1191f2aed3a7253841627ed39c2425575"
+  integrity sha512-zVBSp9K693UJZrU0yLUqGsZHIBGQv0Y9VTKPYzHtBOrLjV6rnbAClRFWzl75eVXL/OIP0uf79SagAinePRwfWA==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@opentripplanner/core-utils" "^4.2.0"
-    "@opentripplanner/geocoder" "^1.1.1"
+    "@opentripplanner/core-utils" "^4.5.0"
+    "@opentripplanner/geocoder" "^1.1.2"
     "@opentripplanner/humanize-distance" "^1.1.0"
     "@opentripplanner/location-icon" "^1.4.0"
     "@styled-icons/fa-solid" "^10.34.0"

From c3d9ec62a6e1263960bbd6600ddb3fff94cee2bc Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 24 Jan 2022 13:31:39 -0500
Subject: [PATCH 124/270] style: Fix linting errors

---
 lib/actions/user.js                           | 138 +++++----
 lib/components/app/batch-routing-panel.js     |  64 ++---
 lib/components/form/batch-settings.js         | 112 ++++----
 lib/components/form/connect-location-field.js |   2 +
 lib/components/form/user-settings.js          | 263 +++++++++++-------
 lib/components/form/user-trip-settings.js     |  52 ++--
 lib/components/user/account-page.js           |  22 +-
 lib/components/user/new-account-wizard.js     |  60 ++--
 .../user/places/favorite-place-list.js        |  57 ++--
 lib/components/user/places/place-shortcut.js  |  23 +-
 lib/components/user/places/place.js           |  29 +-
 lib/components/user/places/styled.js          |   8 +-
 12 files changed, 481 insertions(+), 349 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 06896fea5..4f2b3cf0c 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -1,9 +1,17 @@
-import coreUtils from '@opentripplanner/core-utils'
+import { createAction } from 'redux-actions'
 import clone from 'clone'
+import coreUtils from '@opentripplanner/core-utils'
 import moment from 'moment'
 import qs from 'qs'
-import { createAction } from 'redux-actions'
 
+import {
+  convertToPlace,
+  getPersistenceStrategy,
+  isHomeOrWork,
+  isNewUser,
+  positionHomeAndWorkFirst
+} from '../util/user'
+import { isBlank } from '../util/ui'
 import {
   PERSIST_TO_LOCAL_STORAGE,
   PERSIST_TO_OTP_MIDDLEWARE,
@@ -11,12 +19,10 @@ import {
   URL_ROOT
 } from '../util/constants'
 import { secureFetch } from '../util/middleware'
-import { isBlank } from '../util/ui'
-import { convertToPlace, getPersistenceStrategy, isHomeOrWork, isNewUser, positionHomeAndWorkFirst } from '../util/user'
 
+import { routeTo } from './ui'
 import { routingQuery } from './api'
 import { setQueryParam } from './form'
-import { routeTo } from './ui'
 
 const { planParamsToQuery } = coreUtils.query
 const { OTP_API_DATE_FORMAT } = coreUtils.time
@@ -30,15 +36,21 @@ const API_OTPUSER_VERIFY_SMS_SUBPATH = '/verify_sms'
 // Middleware user actions
 const setAccessToken = createAction('SET_ACCESS_TOKEN')
 const setCurrentUser = createAction('SET_CURRENT_USER')
-const setCurrentUserMonitoredTrips = createAction('SET_CURRENT_USER_MONITORED_TRIPS')
-const setCurrentUserTripRequests = createAction('SET_CURRENT_USER_TRIP_REQUESTS')
+const setCurrentUserMonitoredTrips = createAction(
+  'SET_CURRENT_USER_MONITORED_TRIPS'
+)
+const setCurrentUserTripRequests = createAction(
+  'SET_CURRENT_USER_TRIP_REQUESTS'
+)
 const setLastPhoneSmsRequest = createAction('SET_LAST_PHONE_SMS_REQUEST')
 export const setPathBeforeSignIn = createAction('SET_PATH_BEFORE_SIGNIN')
 export const clearItineraryExistence = createAction('CLEAR_ITINERARY_EXISTENCE')
 const setitineraryExistence = createAction('SET_ITINERARY_EXISTENCE')
 
 // localStorage user actions
-export const deleteLocalUserRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
+export const deleteLocalUserRecentPlace = createAction(
+  'DELETE_LOCAL_USER_RECENT_PLACE'
+)
 const deleteLocalUserSavedPlace = createAction('DELETE_LOCAL_USER_SAVED_PLACE')
 export const forgetStop = createAction('FORGET_STOP')
 export const rememberStop = createAction('REMEMBER_STOP')
@@ -124,6 +136,58 @@ export function fetchAuth0Token(auth0, intl) {
   }
 }
 
+/**
+ * Converts a middleware trip request to the search format.
+ */
+function convertRequestToSearch(config) {
+  return function (tripRequest) {
+    const { dateCreated, id, queryParams } = tripRequest
+    const { host, path } = config.api
+    return {
+      canDelete: false,
+      id,
+      query: planParamsToQuery(qs.parse(queryParams)),
+      timestamp: dateCreated,
+      url: `${host}${path}/plan?${queryParams}`
+    }
+  }
+}
+
+/**
+ * Fetches the most recent (default 10) trip history for a user.
+ */
+export function fetchTripRequests() {
+  return async function (dispatch, getState) {
+    const { accessToken, apiBaseUrl, apiKey, loggedInUser } =
+      getMiddlewareVariables(getState())
+    const requestUrl = `${apiBaseUrl}${API_TRIP_HISTORY_PATH}?userId=${loggedInUser.id}`
+
+    const { data: requests, status: emptyStatus } = await secureFetch(
+      `${requestUrl}&limit=0`,
+      accessToken,
+      apiKey,
+      'GET'
+    )
+    const DEFAULT_LIMIT = 10
+
+    if (emptyStatus === 'success') {
+      const { data: trips, status } = await secureFetch(
+        `${requestUrl}&offset=${requests.total - DEFAULT_LIMIT}`,
+        accessToken,
+        apiKey,
+        'GET'
+      )
+      if (status === 'success') {
+        // Convert tripRequests to search format.
+        const convertedTrips = trips.data.map(
+          convertRequestToSearch(getState().otp.config)
+        )
+        dispatch(setCurrentUserTripRequests(convertedTrips))
+      }
+    }
+  }
+}
+
 /**
  * Updates the redux state with the provided user data, including
  * placing the Home and Work locations at the beginning of the list
@@ -326,45 +390,6 @@ export function resendVerificationEmail(intl) {
   }
 }
 
-/**
- * Converts a middleware trip request to the search format.
- */
-function convertRequestToSearch (config) {
-  return function (tripRequest) {
-    const { dateCreated, id, queryParams } = tripRequest
-    const { host, path } = config.api
-    return {
-      canDelete: false,
-      id,
-      query: planParamsToQuery(qs.parse(queryParams)),
-      timestamp: dateCreated,
-      url: `${host}${path}/plan?${queryParams}`
-    }
-  }
-}
-
-/**
- * Fetches the most recent (default 10) trip history for a user.
- */
-export function fetchTripRequests () {
-  return async function (dispatch, getState) {
-    const { accessToken, apiBaseUrl, apiKey, loggedInUser } = getMiddlewareVariables(getState())
-    const requestUrl = `${apiBaseUrl}${API_TRIP_HISTORY_PATH}?userId=${loggedInUser.id}`
-
-    const { data: requests, status: emptyStatus } = await secureFetch(`${requestUrl}&limit=0`, accessToken, apiKey, 'GET')
-    const DEFAULT_LIMIT = 10
-
-    if (emptyStatus === 'success') {
-      const { data: trips, status } = await secureFetch(`${requestUrl}&offset=${requests.total - DEFAULT_LIMIT}`, accessToken, apiKey, 'GET')
-      if (status === 'success') {
-        // Convert tripRequests to search format.
-        const convertedTrips = trips.data.map(convertRequestToSearch(getState().otp.config))
-        dispatch(setCurrentUserTripRequests(convertedTrips))
-      }
-    }
-  }
-}
-
 /**
  * Updates a logged-in user's monitored trip,
  * then, if that was successful, alerts (optional)
@@ -646,8 +671,8 @@ export function saveUserPlace(placeToSave, placeIndex, intl) {
   return function (dispatch, getState) {
     const { loggedInUser } = getState().user
 
-    // Remove "blank" attribute, it is not recognized by the middleware.
-    const { blank, ...placeToSave } = place
+    // FIXME_QBD Remove "blank" attribute, it is not recognized by the middleware.
+    // const { blank, ...placeToSave } = place
 
     if (placeIndex === 'new') {
       loggedInUser.savedLocations.push(placeToSave)
@@ -681,7 +706,7 @@ export function deleteLoggedInUserPlace(placeIndex, intl) {
 /**
  * Delete a place for the logged-in or local user according to the persistence strategy.
  */
-export function deleteUserPlace (place) {
+export function deleteUserPlace(place) {
   return function (dispatch, getState) {
     const { otp, user } = getState()
     const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
@@ -692,9 +717,10 @@ export function deleteUserPlace (place) {
 
       // If 'Forget home' or 'Forget work' links from OTP UI's EndPointOverlay/EndPoint
       // are clicked, then place will set to 'home' or 'work'.
-      const placeIndex = place === 'home' || place === 'work'
-        ? loggedInUser.savedLocations.findIndex(loc => loc.type === place)
-        : loggedInUser.savedLocations.indexOf(place)
+      const placeIndex =
+        place === 'home' || place === 'work'
+          ? loggedInUser.savedLocations.findIndex((loc) => loc.type === place)
+          : loggedInUser.savedLocations.indexOf(place)
 
       if (placeIndex > -1) {
         dispatch(deleteLoggedInUserPlace(placeIndex))
@@ -709,7 +735,7 @@ export function deleteUserPlace (place) {
  * Remembers a place for the logged-in or local user
  * according to the persistence strategy.
  */
-export function rememberPlace (placeTypeLocation) {
+export function rememberPlace(placeTypeLocation) {
   return function (dispatch, getState) {
     const { otp, user } = getState()
     const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
@@ -721,7 +747,9 @@ export function rememberPlace (placeTypeLocation) {
       const { location } = placeTypeLocation
       if (isHomeOrWork(location)) {
         // Find the index of the place in the loggedInUser.savedLocations
-        const placeIndex = loggedInUser.savedLocations.findIndex(loc => loc.type === location.type)
+        const placeIndex = loggedInUser.savedLocations.findIndex(
+          (loc) => loc.type === location.type
+        )
         if (placeIndex > -1) {
           // Convert to loggedInUser saved place
           dispatch(saveUserPlace(convertToPlace(location), placeIndex))
diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index dcf9c6594..26a9ba5fe 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -1,17 +1,18 @@
-import React, { Component } from 'react'
-import { injectIntl } from 'react-intl'
+/* eslint-disable react/prop-types */
 import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
+import React, { Component } from 'react'
 import styled from 'styled-components'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
+import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import BatchSettings from '../form/batch-settings'
 import LocationField from '../form/connected-location-field'
-import UserSettings from '../form/user-settings'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
-import { getActiveSearch, getShowUserSettings } from '../../util/state'
-import ViewerContainer from '../viewers/viewer-container'
 import SwitchButton from '../form/switch-button'
+import UserSettings from '../form/user-settings'
+import ViewerContainer from '../viewers/viewer-container'
 
 // Style for setting the top of the narrative itineraries based on the width of the window.
 // If the window width is less than 1200px (Bootstrap's "large" size), the
@@ -34,41 +35,39 @@ const NarrativeContainer = styled.div`
  * Main panel for the batch/trip comparison form.
  */
 class BatchRoutingPanel extends Component {
-  render () {
-    const { activeSearch, intl, mobile, showUserSettings} = this.props
-    const actionText = mobile ? 'tap' : 'click' // FIXME: QBDM: add intl
+  render() {
+    const { activeSearch, intl, mobile, showUserSettings } = this.props
+    const actionText = mobile ? 'tap' : 'click' // FIXME_QBD: add intl
     return (
-      <ViewerContainer className='batch-routing-panel'>
-        <div className='locations'>
+      <ViewerContainer className="batch-routing-panel">
+        <div className="locations">
           <LocationField
-            inputPlaceholder={
-              intl.formatMessage(
-                { id: 'common.searchForms.enterStartLocation' },
-                { mobile }
-              )
-            }
-            locationType='from'
+            inputPlaceholder={intl.formatMessage(
+              { id: 'common.searchForms.enterStartLocation' },
+              { mobile }
+            )}
+            locationType="from"
             showClearButton
           />
           <LocationField
-            inputPlaceholder={
-              intl.formatMessage(
-                { id: 'common.searchForms.enterDestination' },
-                { mobile }
-              )
-            }
-            locationType='to'
+            inputPlaceholder={intl.formatMessage(
+              { id: 'common.searchForms.enterDestination' },
+              { mobile }
+            )}
+            locationType="to"
             showClearButton={!mobile}
           />
-          <div className='switch-button-container'>
-            <SwitchButton content={<i className='fa fa-exchange fa-rotate-90' />} />
+          <div className="switch-button-container">
+            <SwitchButton
+              content={<i className="fa fa-exchange fa-rotate-90" />}
+            />
           </div>
         </div>
         <BatchSettings />
-        {!activeSearch && showUserSettings &&
+        {!activeSearch && showUserSettings && (
           <UserSettings style={{ margin: '10px 0 0' }} />
-        }
-        <NarrativeContainer className='desktop-narrative-container'>
+        )}
+        <NarrativeContainer className="desktop-narrative-container">
           <NarrativeItineraries
             containerStyle={{
               bottom: '0',
@@ -103,6 +102,7 @@ const mapDispatchToProps = {
   setQueryParam: formActions.setQueryParam
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  injectIntl(BatchRoutingPanel)
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(BatchRoutingPanel))
diff --git a/lib/components/form/batch-settings.js b/lib/components/form/batch-settings.js
index ca2897004..4bf76996b 100644
--- a/lib/components/form/batch-settings.js
+++ b/lib/components/form/batch-settings.js
@@ -1,17 +1,19 @@
+/* eslint-disable react/prop-types */
+import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
-import { injectIntl } from 'react-intl'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
+import {
+  getActiveSearch,
+  getShowUserSettings,
+  hasValidLocation
+} from '../../util/state'
 import Icon from '../util/icon'
-import { hasValidLocation, getActiveSearch, getShowUserSettings } from '../../util/state'
 
-import BatchPreferences from './batch-preferences'
-import DateTimeModal from './date-time-modal'
-import ModeButtons, {getModeOptions, StyledModeButton} from './mode-buttons'
 import {
   BatchPreferencesContainer,
   DateTimeModalContainer,
@@ -21,6 +23,9 @@ import {
   StyledDateTimePreview
 } from './batch-styled'
 import { Dot } from './styled'
+import BatchPreferences from './batch-preferences'
+import DateTimeModal from './date-time-modal'
+import ModeButtons, { getModeOptions, StyledModeButton } from './mode-buttons'
 
 /**
  * Simple utility to check whether a list of mode strings contains the provided
@@ -31,12 +36,12 @@ import { Dot } from './styled'
  * the 'contains' check. E.g., we might not want to remove WALK,TRANSIT if walk
  * is turned off, but we DO want to remove it if TRANSIT is turned off.
  */
-function listHasMode (modes, mode) {
-  return modes.some(m => mode.indexOf(m) !== -1)
+function listHasMode(modes, mode) {
+  return modes.some((m) => mode.indexOf(m) !== -1)
 }
 
-function combinationHasAnyOfModes (combination, modes) {
-  return combination.mode.split(',').some(m => listHasMode(modes, m))
+function combinationHasAnyOfModes(combination, modes) {
+  return combination.mode.split(',').some((m) => listHasMode(modes, m))
 }
 
 const ModeButtonsFullWidthContainer = styled.div`
@@ -78,68 +83,75 @@ const ModeButtonsCompressed = styled(ModeButtons)`
 class BatchSettings extends Component {
   state = {
     expanded: null,
-    selectedModes: getModeOptions(this.props.intl).map(m => m.mode)
+    selectedModes: getModeOptions(this.props.intl).map((m) => m.mode)
   }
 
   _onClickMode = (mode) => {
-    const {possibleCombinations, setQueryParam} = this.props
-    const {selectedModes} = this.state
+    const { possibleCombinations, setQueryParam } = this.props
+    const { selectedModes } = this.state
     const index = selectedModes.indexOf(mode)
     const enableMode = index === -1
     const newModes = [...selectedModes]
     if (enableMode) newModes.push(mode)
     else newModes.splice(index, 1)
     // Update selected modes for mode buttons.
-    this.setState({selectedModes: newModes})
+    this.setState({ selectedModes: newModes })
     // Update the available mode combinations based on the new modes selection.
-    const possibleModes = getModeOptions(this.props.intl).map(m => m.mode)
-    const disabledModes = possibleModes.filter(m => !newModes.includes(m))
+    const possibleModes = getModeOptions(this.props.intl).map((m) => m.mode)
+    const disabledModes = possibleModes.filter((m) => !newModes.includes(m))
     // Do not include combination if any of its modes are found in disabled
     // modes list.
-    const newCombinations = possibleCombinations
-      .filter(c => !combinationHasAnyOfModes(c, disabledModes))
-    setQueryParam({combinations: newCombinations})
+    const newCombinations = possibleCombinations.filter(
+      (c) => !combinationHasAnyOfModes(c, disabledModes)
+    )
+    setQueryParam({ combinations: newCombinations })
   }
 
   _planTrip = () => {
-    const {currentQuery, intl, routingQuery} = this.props
+    const { currentQuery, intl, routingQuery } = this.props
     // Check for any validation issues in query.
     const issues = []
     if (!hasValidLocation(currentQuery, 'from')) {
-      issues.push(intl.formatMessage({id: 'components.BatchSettings.origin'}))
+      issues.push(intl.formatMessage({ id: 'components.BatchSettings.origin' }))
     }
     if (!hasValidLocation(currentQuery, 'to')) {
-      issues.push(intl.formatMessage({id: 'components.BatchSettings.destination'}))
+      issues.push(
+        intl.formatMessage({ id: 'components.BatchSettings.destination' })
+      )
     }
     if (issues.length > 0) {
       // TODO: replace with less obtrusive validation.
-      window.alert(intl.formatMessage(
-        {id: 'components.BatchSettings.validationMessage'},
-        {issues: intl.formatList(issues, {type: 'conjunction'})}
-      ))
+      window.alert(
+        intl.formatMessage(
+          { id: 'components.BatchSettings.validationMessage' },
+          { issues: intl.formatList(issues, { type: 'conjunction' }) }
+        )
+      )
       return
     }
     // Close any expanded panels.
-    this.setState({expanded: null})
+    this.setState({ expanded: null })
 
     // Plan trip.
     routingQuery()
   }
 
-  _updateExpanded = (type) => ({expanded: this.state.expanded === type ? null : type})
+  _updateExpanded = (type) => ({
+    expanded: this.state.expanded === type ? null : type
+  })
 
   _toggleDateTime = () => this.setState(this._updateExpanded('DATE_TIME'))
 
   _toggleSettings = () => this.setState(this._updateExpanded('SETTINGS'))
 
-  render () {
-    const {config, currentQuery, intl} = this.props
-    const {expanded, selectedModes} = this.state
+  render() {
+    const { config, currentQuery, intl } = this.props
+    const { expanded, selectedModes } = this.state
     return (
       <>
-        <ModeButtonsFullWidthContainer className='hidden-lg'>
+        <ModeButtonsFullWidthContainer className="hidden-lg">
           <ModeButtonsFullWidth
-            className='flex'
+            className="flex"
             onClick={this._onClickMode}
             selectedModes={selectedModes}
           />
@@ -149,40 +161,43 @@ class BatchSettings extends Component {
             expanded={expanded === 'SETTINGS'}
             onClick={this._toggleSettings}
           >
-            {coreUtils.query.isNotDefaultQuery(currentQuery, config) &&
-              <Dot className='dot' />
-            }
-            <Icon className='fa-2x' type='cog' />
+            {coreUtils.query.isNotDefaultQuery(currentQuery, config) && (
+              <Dot className="dot" />
+            )}
+            <Icon className="fa-2x" type="cog" />
           </SettingsPreview>
           <StyledDateTimePreview
             // as='button'
             expanded={expanded === 'DATE_TIME'}
             hideButton
-            onClick={this._toggleDateTime} />
+            onClick={this._toggleDateTime}
+          />
           <ModeButtonsContainerCompressed>
             <ModeButtonsCompressed
-              className='visible-lg straight-corners'
+              className="visible-lg straight-corners"
               onClick={this._onClickMode}
               selectedModes={selectedModes}
             />
           </ModeButtonsContainerCompressed>
           <PlanTripButton
             onClick={this._planTrip}
-            title={intl.formatMessage({id: 'components.BatchSettings.planTripTooltip'})}
+            title={intl.formatMessage({
+              id: 'components.BatchSettings.planTripTooltip'
+            })}
           >
-            <Icon className='fa-2x' type='search' />
+            <Icon className="fa-2x" type="search" />
           </PlanTripButton>
         </MainSettingsRow>
-        {expanded === 'DATE_TIME' &&
+        {expanded === 'DATE_TIME' && (
           <DateTimeModalContainer>
             <DateTimeModal />
           </DateTimeModalContainer>
-        }
-        {expanded === 'SETTINGS' &&
+        )}
+        {expanded === 'SETTINGS' && (
           <BatchPreferencesContainer>
             <BatchPreferences />
           </BatchPreferencesContainer>
-        }
+        )}
       </>
     )
   }
@@ -205,6 +220,7 @@ const mapDispatchToProps = {
   setQueryParam: formActions.setQueryParam
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  injectIntl(BatchSettings)
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(BatchSettings))
diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index c8b316edd..19f749ba1 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -1,5 +1,7 @@
+/* eslint-disable react/prop-types */
 import { connect } from 'react-redux'
 import { injectIntl } from 'react-intl'
+import React from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as locationActions from '../../actions/location'
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 1c601852a..19fc1e0e3 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -1,20 +1,27 @@
-import moment from 'moment'
-import coreUtils from '@opentripplanner/core-utils'
-import React, { Component } from 'react'
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable react/prop-types */
 import { Button } from 'react-bootstrap'
-import { FormattedMessage, injectIntl } from 'react-intl'
 import { connect } from 'react-redux'
+import { FormattedMessage, injectIntl } from 'react-intl'
+import coreUtils from '@opentripplanner/core-utils'
+import moment from 'moment'
+import React, { Component } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
+import {
+  getPersistenceStrategy,
+  isHome,
+  isHomeOrWork,
+  isWork
+} from '../../util/user'
 import { LinkWithQuery } from '../form/connected-links'
-import PlaceShortcut from '../user/places/place-shortcut'
-import { StyledMainPanelPlace } from '../user/places/styled'
 import { PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
-import { getPersistenceStrategy, isHome, isHomeOrWork, isWork } from '../../util/user'
+import { StyledMainPanelPlace } from '../user/places/styled'
+import PlaceShortcut from '../user/places/place-shortcut'
 
 import { UnpaddedList } from './styled'
 
@@ -23,22 +30,29 @@ const { summarizeQuery } = coreUtils.query
 
 class UserSettings extends Component {
   _disableTracking = () => {
-    const { localUser, toggleTracking } = this.props
+    const { intl, localUser, toggleTracking } = this.props
     const { recentPlaces, recentSearches, storeTripHistory } = localUser
     if (!storeTripHistory) return
-    const hasRecents = (recentPlaces && recentPlaces.length > 0) ||
+    const hasRecents =
+      (recentPlaces && recentPlaces.length > 0) ||
       (recentSearches && recentSearches.length > 0)
 
     // If user has recents and does not confirm deletion, return without doing
     // anything.
-    if (hasRecents && !window.confirm(intl.formatMessage({id: 'components.UserSettings.confirmDeletion'}))) {
+    if (
+      hasRecents &&
+      !window.confirm(
+        intl.formatMessage({ id: 'components.UserSettings.confirmDeletion' })
+      )
+    ) {
       return
     }
     // Disable tracking if we reach this statement.
     toggleTracking(false)
   }
 
-  _enableTracking = () => !this.props.localUser.storeTripHistory && this.props.toggleTracking(true)
+  _enableTracking = () =>
+    !this.props.localUser.storeTripHistory && this.props.toggleTracking(true)
 
   _getLocalStorageOnlyContent = () => {
     const {
@@ -51,59 +65,80 @@ class UserSettings extends Component {
       storageDisclaimer
     } = this.props
 
-    const { favoriteStops, recentPlaces, recentSearches, storeTripHistory } = localUser
+    const { favoriteStops, recentPlaces, recentSearches, storeTripHistory } =
+      localUser
     return (
       <>
         {/* Favorite stops are shown regardless of tracking. */}
         <Places
-          getDetailText={location => `Stop ID: ${location.id}`}
-          getMainText={location => location.address || location.name}
-          header={<FormattedMessage id='components.UserSettings.favoriteStops' />}
+          getDetailText={(location) => `Stop ID: ${location.id}`}
+          getMainText={(location) => location.address || location.name}
+          header={
+            <FormattedMessage id="components.UserSettings.favoriteStops" />
+          }
           onDelete={forgetStop}
           onView={setViewedStop}
           places={favoriteStops}
-          textIfEmpty={<FormattedMessage id='components.UserSettings.noFavoriteStops' />}
+          textIfEmpty={
+            <FormattedMessage id="components.UserSettings.noFavoriteStops" />
+          }
         />
 
-        {storeTripHistory && <Places
-          getDetailText={location => moment(location.timestamp).fromNow()}
-          getMainText={location => location.address || location.name}
-          header={<FormattedMessage id='components.UserSettings.recentPlaces' />}
-          onDelete={deleteLocalUserRecentPlace}
-          places={recentPlaces}
-        />}
-        {storeTripHistory && <RecentTrips
-          forgetSearch={forgetSearch}
-          setQueryParam={setQueryParam}
-          tripRequests={recentSearches}
-          user={localUser}
-        />}
+        {storeTripHistory && (
+          <Places
+            getDetailText={(location) => moment(location.timestamp).fromNow()}
+            getMainText={(location) => location.address || location.name}
+            header={
+              <FormattedMessage id="components.UserSettings.recentPlaces" />
+            }
+            onDelete={deleteLocalUserRecentPlace}
+            places={recentPlaces}
+          />
+        )}
+        {storeTripHistory && (
+          <RecentTrips
+            forgetSearch={forgetSearch}
+            setQueryParam={setQueryParam}
+            tripRequests={recentSearches}
+            user={localUser}
+          />
+        )}
         <hr />
-        <div className='remember-settings'>
-          <div className='section-header'><FormattedMessage id='components.UserSettings.myPreferences' /></div>
-          <small><FormattedMessage id='components.UserSettings.rememberSearches' /> </small>
+        <div className="remember-settings">
+          <div className="section-header">
+            <FormattedMessage id="components.UserSettings.myPreferences" />
+          </div>
+          <small>
+            <FormattedMessage id="components.UserSettings.rememberSearches" />{' '}
+          </small>
           <Button
-            bsSize='xsmall'
-            bsStyle='link'
+            bsSize="xsmall"
+            bsStyle="link"
             className={storeTripHistory ? 'active' : ''}
-            onClick={this._enableTracking}><FormattedMessage id='common.forms.yes' /></Button>
+            onClick={this._enableTracking}
+          >
+            <FormattedMessage id="common.forms.yes" />
+          </Button>
           <Button
-            bsSize='xsmall'
-            bsStyle='link'
+            bsSize="xsmall"
+            bsStyle="link"
             className={!storeTripHistory ? 'active' : ''}
-            onClick={this._disableTracking}><FormattedMessage id='common.forms.no' /></Button>
+            onClick={this._disableTracking}
+          >
+            <FormattedMessage id="common.forms.no" />
+          </Button>
         </div>
         <div>
           <hr />
-          <div className='disclaimer'>
-            <FormattedMessage id='components.UserSettings.storageDisclaimer' />
+          <div className="disclaimer">
+            <FormattedMessage id="components.UserSettings.storageDisclaimer" />
           </div>
         </div>
       </>
     )
   }
 
-  _getLocations = user => {
+  _getLocations = (user) => {
     const locations = [...user.savedLocations]
     if (!locations.find(isWork)) {
       locations.push({
@@ -124,7 +159,7 @@ class UserSettings extends Component {
     return locations
   }
 
-  render () {
+  render() {
     const {
       className,
       deleteUserPlace,
@@ -137,13 +172,16 @@ class UserSettings extends Component {
       setQueryParam,
       style
     } = this.props
-    const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
+    const isUsingOtpMiddleware =
+      persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
     const userNotLoggedIn = isUsingOtpMiddleware && !loggedInUser
     if (userNotLoggedIn) return null
 
     // Clone locations in order to prevent blank locations from seeping into the
     // app state/store.
-    const locations = this._getLocations(isUsingOtpMiddleware ? loggedInUser : localUser)
+    const locations = this._getLocations(
+      isUsingOtpMiddleware ? loggedInUser : localUser
+    )
     const order = ['home', 'work', 'suggested', 'stop', 'recent']
     const sortedLocations = isUsingOtpMiddleware
       ? locations
@@ -152,31 +190,40 @@ class UserSettings extends Component {
       <div className={`user-settings ${className}`} style={style}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
-          getDetailText={location =>
+          getDetailText={(location) => {
             // FIXME_QBD: unify the two location models.
-            (isUsingOtpMiddleware ? location.address : location.name) || `Set your ${location.type} address`}
-          getMainText={location => isHomeOrWork(location) ? toSentenceCase(location.type) : location.name}
-          header={isUsingOtpMiddleware &&
-            <>
-              My saved places (
-              <LinkWithQuery to='/account/settings'>manage</LinkWithQuery>
-              )
-            </>
+            return (
+              (isUsingOtpMiddleware ? location.address : location.name) ||
+              `Set your ${location.type} address`
+            )
+          }}
+          getMainText={(location) => {
+            return isHomeOrWork(location)
+              ? toSentenceCase(location.type)
+              : location.name
+          }}
+          header={
+            isUsingOtpMiddleware && (
+              <>
+                My saved places (
+                <LinkWithQuery to="/account/settings">manage</LinkWithQuery>)
+              </>
+            )
           }
           onDelete={deleteUserPlace}
           places={sortedLocations}
           separator={false}
         />
-        {isUsingOtpMiddleware
-          ? (
-            <RecentTrips
-              forgetSearch={forgetSearch}
-              setQueryParam={setQueryParam}
-              tripRequests={loggedInUserTripRequests}
-              user={localUser}
-            />
-          )
-          : this._getLocalStorageOnlyContent()}
+        {isUsingOtpMiddleware ? (
+          <RecentTrips
+            forgetSearch={forgetSearch}
+            setQueryParam={setQueryParam}
+            tripRequests={loggedInUserTripRequests}
+            user={localUser}
+          />
+        ) : (
+          this._getLocalStorageOnlyContent()
+        )}
       </div>
     )
   }
@@ -196,30 +243,34 @@ const Places = ({
   textIfEmpty
 }) => {
   const shouldRender = textIfEmpty || (places && places.length > 0)
-  return shouldRender && (
-    <>
-      {separator && <hr />}
-      {header && <div className='section-header'>{header}</div>}
-      <UnpaddedList>
-        {places.length > 0
-          ? places.map((location, index) => {
-            return (
-              <PlaceShortcut
-                detailText={getDetailText(location)}
-                icon={location.icon}
-                index={index}
-                key={location.id || index}
-                mainText={getMainText(location)}
-                onDelete={onDelete}
-                onView={onView}
-                place={location}
-              />
-            )
-          })
-          : (textIfEmpty && <small>{textIfEmpty}</small>)
-        }
-      </UnpaddedList>
-    </>
+  return (
+    shouldRender && (
+      <>
+        {separator && <hr />}
+        {header && <div className="section-header">{header}</div>}
+        <UnpaddedList>
+          {places.length > 0
+            ? places.map((location, index) => {
+                // FIXME_QBD Unify location models.
+                // using the `return` syntax instead of `=>` to please both
+                // prettier and react/jsx rules, otherwise they conflict.
+                return (
+                  <PlaceShortcut
+                    detailText={getDetailText(location)}
+                    icon={location.icon}
+                    index={index}
+                    key={location.id || index}
+                    mainText={getMainText(location)}
+                    onDelete={onDelete}
+                    onView={onView}
+                    place={location}
+                  />
+                )
+              })
+            : textIfEmpty && <small>{textIfEmpty}</small>}
+        </UnpaddedList>
+      </>
+    )
   )
 }
 
@@ -236,7 +287,7 @@ class TripRequest extends Component {
 
   _onForget = () => this.props.forgetSearch(this.props.tripRequest)
 
-  render () {
+  render() {
     const { intl, tripRequest, user } = this.props
     const { canDelete = true, query, timestamp } = tripRequest
     const mainText = summarizeQuery(query, user.savedLocations)
@@ -244,14 +295,18 @@ class TripRequest extends Component {
     const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
     const timeInfo = intl.formatMessage(
       { id: 'common.time.fromNowUpdate' },
-      { days: fromNowDur.days(), hours: fromNowDur.hours(), minutes: fromNowDur.minutes() }
+      {
+        days: fromNowDur.days(),
+        hours: fromNowDur.hours(),
+        minutes: fromNowDur.minutes()
+      }
     )
 
     return (
       <StyledMainPanelPlace
-        className='place-item'
+        className="place-item"
         detailText={timeInfo}
-        icon='clock-o'
+        icon="clock-o"
         mainText={mainText}
         onClick={this._onSelect}
         onDelete={canDelete ? this._onForget : null}
@@ -264,17 +319,24 @@ class TripRequest extends Component {
  * Renders a list of recent trip requests, most recent first,
  * if permitted by user.
  */
-const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user }) => (
+const RecentTrips = ({
+  forgetSearch,
+  setQueryParam,
+  tripRequests = null,
+  user
+}) =>
   // Note: tripRequests can be undefined,
   // so we have to coerce it to null above to make a valid render.
-  user.storeTripHistory && tripRequests && tripRequests.length > 0 && (
-    <div className='recent-searches-container'>
+  user.storeTripHistory &&
+  tripRequests &&
+  tripRequests.length > 0 && (
+    <div className="recent-searches-container">
       <hr />
-      <div className='section-header'>Recent searches</div>
+      <div className="section-header">Recent searches</div>
       <UnpaddedList>
         {tripRequests
           .sort((a, b) => b.timestamp - a.timestamp)
-          .map(tripReq => (
+          .map((tripReq) => (
             <TripRequest
               forgetSearch={forgetSearch}
               key={tripReq.id}
@@ -282,12 +344,10 @@ const RecentTrips = ({ forgetSearch, setQueryParam, tripRequests = null, user })
               tripRequest={tripReq}
               user={user}
             />
-          ))
-        }
+          ))}
       </UnpaddedList>
     </div>
   )
-)
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {
@@ -322,4 +382,7 @@ const mapDispatchToProps = {
   toggleTracking: apiActions.toggleTracking
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(UserSettings))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(UserSettings))
diff --git a/lib/components/form/user-trip-settings.js b/lib/components/form/user-trip-settings.js
index 1011a4449..a95e4c879 100644
--- a/lib/components/form/user-trip-settings.js
+++ b/lib/components/form/user-trip-settings.js
@@ -1,8 +1,9 @@
-import coreUtils from '@opentripplanner/core-utils'
-import React, { Component } from 'react'
+/* eslint-disable react/prop-types */
 import { Button } from 'react-bootstrap'
-import { FormattedMessage } from 'react-intl'
 import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+import coreUtils from '@opentripplanner/core-utils'
+import React, { Component } from 'react'
 
 import {
   clearDefaultSettings,
@@ -25,13 +26,8 @@ class UserTripSettings extends Component {
     else this.props.storeDefaultSettings(options)
   }
 
-  render () {
-    const {
-      config,
-      defaults,
-      query,
-      resetForm
-    } = this.props
+  render() {
+    const { config, defaults, query, resetForm } = this.props
 
     // Do not permit remembering trip options if they do not differ from the
     // defaults and nothing has been stored
@@ -39,26 +35,38 @@ class UserTripSettings extends Component {
     const rememberIsDisabled = queryIsDefault && !defaults
 
     return (
-      <div className='store-settings pull-right' style={{ marginBottom: '5px' }}>
+      <div
+        className="store-settings pull-right"
+        style={{ marginBottom: '5px' }}
+      >
         <Button
-          bsSize='xsmall'
-          bsStyle='link'
+          bsSize="xsmall"
+          bsStyle="link"
           disabled={rememberIsDisabled}
           onClick={this._toggleStoredSettings}
-        >{defaults
-            ? <span><Icon type='times' /> <FormattedMessage id='components.UserTripSettings.forgetOptions' /></span>
-            : <span><Icon type='lock' /> <FormattedMessage id='components.UserTripSettings.rememberOptions' /></span>
-          }</Button>
+        >
+          {defaults ? (
+            <span>
+              <Icon type="times" />{' '}
+              <FormattedMessage id="components.UserTripSettings.forgetOptions" />
+            </span>
+          ) : (
+            <span>
+              <Icon type="lock" />{' '}
+              <FormattedMessage id="components.UserTripSettings.rememberOptions" />
+            </span>
+          )}
+        </Button>
         <Button
-          bsSize='xsmall'
-          bsStyle='link'
+          bsSize="xsmall"
+          bsStyle="link"
           disabled={queryIsDefault && !defaults}
           onClick={resetForm}
         >
-          <Icon type='undo' withSpace />
+          <Icon type="undo" withSpace />
           <FormattedMessage
-            id='components.UserTripSettings.restoreOptions'
-            values={{defaults}}
+            id="components.UserTripSettings.restoreOptions"
+            values={{ defaults }}
           />
         </Button>
       </div>
diff --git a/lib/components/user/account-page.js b/lib/components/user/account-page.js
index 08a3c5d18..bad582de8 100644
--- a/lib/components/user/account-page.js
+++ b/lib/components/user/account-page.js
@@ -1,7 +1,8 @@
-import { withAuthenticationRequired } from '@auth0/auth0-react'
+/* eslint-disable react/prop-types */
+import { connect } from 'react-redux'
 import { replace } from 'connected-react-router'
+import { withAuthenticationRequired } from '@auth0/auth0-react'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
 
 import * as uiActions from '../../actions/ui'
 import {
@@ -12,8 +13,8 @@ import {
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
 import AppFrame from '../app/app-frame'
 
-import withLoggedInUserSupport from './with-logged-in-user-support'
 import SubNav from './sub-nav'
+import withLoggedInUserSupport from './with-logged-in-user-support'
 
 /**
  * This component contains common navigation elements and wrappers and should
@@ -35,17 +36,13 @@ class AccountPage extends Component {
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this._checkAccountCreated()
   }
 
-  render () {
-    const {children, subnav = true} = this.props
-    return (
-      <AppFrame SubNav={subnav && SubNav}>
-        {children}
-      </AppFrame>
-    )
+  render() {
+    const { children, subnav = true } = this.props
+    return <AppFrame SubNav={subnav && SubNav}>{children}</AppFrame>
   }
 }
 
@@ -55,7 +52,8 @@ const mapStateToProps = (state, ownProps) => {
   const currentPath = state.router.location.pathname
   return {
     isTermsOrVerifyPage:
-      currentPath === CREATE_ACCOUNT_TERMS_PATH || currentPath === CREATE_ACCOUNT_VERIFY_PATH,
+      currentPath === CREATE_ACCOUNT_TERMS_PATH ||
+      currentPath === CREATE_ACCOUNT_VERIFY_PATH,
     loggedInUser: state.user.loggedInUser
   }
 }
diff --git a/lib/components/user/new-account-wizard.js b/lib/components/user/new-account-wizard.js
index f9adf797f..d54df2561 100644
--- a/lib/components/user/new-account-wizard.js
+++ b/lib/components/user/new-account-wizard.js
@@ -1,9 +1,10 @@
-import React, { Component } from 'react'
+/* eslint-disable react/prop-types */
 import { FormattedMessage } from 'react-intl'
+import React, { Component } from 'react'
 
 import AccountSetupFinishPane from './account-setup-finish-pane'
-import NotificationPrefsPane from './notification-prefs-pane'
 import FavoritePlaceList from './places/favorite-place-list'
+import NotificationPrefsPane from './notification-prefs-pane'
 import SequentialPaneDisplay from './sequential-pane-display'
 import TermsOfUsePane from './terms-of-use-pane'
 import VerifyEmailPane from './verify-email-pane'
@@ -24,57 +25,60 @@ class NewAccountWizard extends Component {
     }
   }
 
-  render () {
+  render() {
     // The props include Formik props that provide access to the current user data (stored in props.values)
     // and to its own blur/change/submit event handlers that automate the state.
     // We forward the props to each pane so that their individual controls
     // can be wired to be managed by Formik.
     const { activePaneId, values: userData } = this.props
-    const {
-      hasConsentedToTerms,
-      notificationChannel = 'email'
-    } = userData
+    const { hasConsentedToTerms, notificationChannel = 'email' } = userData
 
     const paneSequence = {
-      // Verify will redirect according to email verification state
-      // and thus doesn't carry a nextId.
-      verify: {
-        hideNavigation: true,
-        pane: VerifyEmailPane,
-        title: <FormattedMessage id='components.NewAccountWizard.verify' />
-      },
       // eslint-disable-next-line sort-keys
-      terms: {
-        disableNext: !hasConsentedToTerms,
-        nextId: 'notifications',
-        onNext: this._handleCreateNewUser,
-        pane: TermsOfUsePane,
-        title: <FormattedMessage id='components.NewAccountWizard.terms' />
+      finish: {
+        pane: AccountSetupFinishPane,
+        prevId: 'places',
+        title: <FormattedMessage id="components.NewAccountWizard.finish" />
       },
+
       // eslint-disable-next-line sort-keys
       notifications: {
         disableNext: notificationChannel === 'sms' && !userData.phoneNumber,
         nextId: 'places',
         pane: NotificationPrefsPane,
         prevId: 'terms',
-        title: <FormattedMessage id='components.NewAccountWizard.notifications' />
+        title: (
+          <FormattedMessage id="components.NewAccountWizard.notifications" />
+        )
       },
+
       places: {
         nextId: 'finish',
-        pane: FavoritePlacesList,
+        pane: FavoritePlaceList,
         prevId: 'notifications',
-        title: <FormattedMessage id='components.NewAccountWizard.places' />
+        title: <FormattedMessage id="components.NewAccountWizard.places" />
       },
+
       // eslint-disable-next-line sort-keys
-      finish: {
-        pane: AccountSetupFinishPane,
-        prevId: 'places',
-        title: <FormattedMessage id='components.NewAccountWizard.finish' />
+      terms: {
+        disableNext: !hasConsentedToTerms,
+        nextId: 'notifications',
+        onNext: this._handleCreateNewUser,
+        pane: TermsOfUsePane,
+        title: <FormattedMessage id="components.NewAccountWizard.terms" />
+      },
+
+      // Verify will redirect according to email verification state
+      // and thus doesn't carry a nextId.
+      verify: {
+        hideNavigation: true,
+        pane: VerifyEmailPane,
+        title: <FormattedMessage id="components.NewAccountWizard.verify" />
       }
     }
 
     // Pass props and title to each entry above
-    Object.keys(paneSequence).forEach(k => {
+    Object.keys(paneSequence).forEach((k) => {
       const pane = paneSequence[k]
       pane.props = this.props
     })
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 3033ef5b1..74b77e246 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -1,13 +1,14 @@
-import coreUtils from '@opentripplanner/core-utils'
-import React from 'react'
+/* eslint-disable react/prop-types */
+import { connect } from 'react-redux'
 import { ControlLabel } from 'react-bootstrap'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { connect } from 'react-redux'
+import coreUtils from '@opentripplanner/core-utils'
+import React from 'react'
 
 import * as userActions from '../../../actions/user'
-import { UnpaddedList } from '../../form/styled'
 import { CREATE_ACCOUNT_PLACES_PATH } from '../../../util/constants'
 import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
+import { UnpaddedList } from '../../form/styled'
 
 import { FavoritePlace } from './styled'
 
@@ -17,41 +18,57 @@ const { toSentenceCase } = coreUtils.itinerary
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
  */
-const FavoritePlaceList = ({ deleteUserPlace, isCreating, loggedInUser }) => {
+const FavoritePlaceList = ({
+  deleteLoggedInUserPlace,
+  isCreating,
+  loggedInUser
+}) => {
   const intl = useIntl()
   const basePath = getPlaceBasePath(isCreating)
   return (
     <div>
       <ControlLabel>
-        <FormattedMessage id='components.FavoritePlaceList.description' />
+        <FormattedMessage id="components.FavoritePlaceList.description" />
       </ControlLabel>
       <UnpaddedList>
         {loggedInUser.savedLocations.map((place, index) => (
           <FavoritePlace
-            detailText={place.address || (
-              <FormattedMessage
-                id='components.FavoritePlaceList.setAddressForPlaceType'
-                values={{
-                  placeType: intl.formatMessage({ id: `common.places.${place.type}` })
-                }}
-              />
-            )}
+            detailText={
+              place.address || (
+                <FormattedMessage
+                  id="components.FavoritePlaceList.setAddressForPlaceType"
+                  values={{
+                    placeType: intl.formatMessage({
+                      id: `common.places.${place.type}`
+                    })
+                  }}
+                />
+              )
+            }
             icon={place.icon}
             key={index}
             // Use toSentenceCase (and not text-transform: capitalize)
             // to change the first char. of the work and home locations only (which come in lowercase).
-            mainText={isHomeOrWork(place) ? toSentenceCase(place.name) : (place.name || place.address)}
+            mainText={
+              isHomeOrWork(place)
+                ? toSentenceCase(place.name)
+                : place.name || place.address
+            }
             onDelete={() => deleteLoggedInUserPlace(place)}
             path={`${basePath}/${index}`}
-            title={intl.formatMessage({ id: 'components.FavoritePlaceList.editThisPlace' })}
+            title={intl.formatMessage({
+              id: 'components.FavoritePlaceList.editThisPlace'
+            })}
           />
         ))}
 
         <FavoritePlace
-          icon='plus'
-          mainText={<FormattedMessage id='components.FavoritePlaceList.addAnotherPlace' />}
+          icon="plus"
+          mainText={
+            <FormattedMessage id="components.FavoritePlaceList.addAnotherPlace" />
+          }
           path={`${basePath}/new`}
-          title={''}
+          title=""
         />
       </UnpaddedList>
     </div>
@@ -70,7 +87,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  deleteUserPlace: userActions.deleteLoggedInUserPlace
+  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(FavoritePlaceList)
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index f8fea8949..6f636989b 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -1,11 +1,12 @@
+/* eslint-disable react/prop-types */
+import { connect } from 'react-redux'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
 
 import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
-import { PERSIST_TO_OTP_MIDDLEWARE } from '../../../util/constants'
 import { convertToLocation, getPersistenceStrategy } from '../../../util/user'
+import { PERSIST_TO_OTP_MIDDLEWARE } from '../../../util/constants'
 
 import { StyledMainPanelPlace } from './styled'
 
@@ -19,19 +20,15 @@ class PlaceShortcut extends Component {
   /**
    * Sets the from or to location based on the query using the provided action.
    */
-  _setFromOrToLocation = location => {
+  _setFromOrToLocation = (location) => {
     const { query, setLocation } = this.props
     // If 'to' not set and 'from' does not match location, set as 'to'.
-    if (
-      !query.to && (
-        !query.from || !matchLatLon(location, query.from)
-      )
-    ) {
+    if (!query.to && (!query.from || !matchLatLon(location, query.from))) {
       setLocation({ location, locationType: 'to' })
     } else if (
       // Vice versa for setting as 'from'.
       !query.from &&
-        !matchLatLon(location, query.to)
+      !matchLatLon(location, query.to)
     ) {
       setLocation({ location, locationType: 'from' })
     }
@@ -43,7 +40,9 @@ class PlaceShortcut extends Component {
       if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
         routeTo(`/account/places/${index}`)
       } else {
-        window.alert(`Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`)
+        window.alert(
+          `Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`
+        )
       }
     } else {
       // Convert to OTP UI location before sending events
@@ -63,11 +62,11 @@ class PlaceShortcut extends Component {
     onDelete(place)
   }
 
-  render () {
+  render() {
     const { detailText, icon, mainText, onView, place } = this.props
     return (
       <StyledMainPanelPlace
-        className='place-item'
+        className="place-item"
         detailText={detailText}
         icon={icon}
         mainText={mainText}
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index c8a897bd8..40029b1db 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
-import React from 'react'
 import { Button } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
 
 import { LinkContainerWithQuery } from '../../form/connected-links'
@@ -54,29 +54,26 @@ const Place = ({
 }) => {
   const intl = useIntl()
   const viewStopLabel = intl.formatMessage({ id: 'components.Place.viewStop' })
-  const deletePlaceLabel = intl.formatMessage({ id: 'components.Place.deleteThisPlace' })
+  const deletePlaceLabel = intl.formatMessage({
+    id: 'components.Place.deleteThisPlace'
+  })
   const to = onClick ? null : path
   const iconSize = largeIcon && '2x'
   return (
     <Container className={className}>
       <LinkContainerWithQuery
         // Don't highlight component if 'to' is null.
-        activeClassName=''
+        activeClassName=""
         to={to}
       >
-        <PlaceButton
-          onClick={onClick}
-          title={title}
-        >
-          {largeIcon && <Icon size='2x' type={icon} />}
+        <PlaceButton onClick={onClick} title={title}>
+          {largeIcon && <Icon size="2x" type={icon} />}
           <PlaceContent>
-            <PlaceText className='place-text'>
+            <PlaceText className="place-text">
               {!largeIcon && <Icon type={icon} />}
               <PlaceName>{mainText}</PlaceName>
             </PlaceText>
-            <PlaceDetail className='place-detail'>
-              {detailText}
-            </PlaceDetail>
+            <PlaceDetail className="place-detail">{detailText}</PlaceDetail>
           </PlaceContent>
         </PlaceButton>
       </LinkContainerWithQuery>
@@ -90,7 +87,7 @@ const Place = ({
           onClick={onView}
           title={viewStopLabel}
         >
-          <Icon size={iconSize} type='search' />
+          <Icon size={iconSize} type="search" />
         </ActionButton>
       )}
       {onDelete && (
@@ -99,7 +96,7 @@ const Place = ({
           onClick={onDelete}
           title={deletePlaceLabel}
         >
-          <Icon size={iconSize} type='trash-o' />
+          <Icon size={iconSize} type="trash-o" />
         </ActionButton>
       )}
     </Container>
@@ -107,6 +104,8 @@ const Place = ({
 }
 
 Place.propTypes = {
+  /** Optional CSS class name */
+  className: PropTypes.string,
   /** The detail text displayed for the place */
   detailText: PropTypes.node,
   /** The font-awesome icon name for the place. */
diff --git a/lib/components/user/places/styled.js b/lib/components/user/places/styled.js
index f79b9703c..1b6e19048 100644
--- a/lib/components/user/places/styled.js
+++ b/lib/components/user/places/styled.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import styled from 'styled-components'
 
 import Place, {
@@ -47,11 +48,8 @@ const StyledFavoritePlace = styled(Place)`
   }
 `
 
-export const FavoritePlace = props => (
-  <StyledFavoritePlace
-    largeIcon
-    {...props}
-  />
+export const FavoritePlace = (props) => (
+  <StyledFavoritePlace largeIcon {...props} />
 )
 
 // Styles and exports for the place component

From a34695a0c109bf8833c762246043158472ba66e8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 24 Jan 2022 15:49:07 -0500
Subject: [PATCH 125/270] chore(jest): Add workaround for yml imports in jest
 a11y tests.

---
 __tests__/test-utils/mock-data/empty-yml.js | 2 ++
 package.json                                | 3 +++
 2 files changed, 5 insertions(+)
 create mode 100644 __tests__/test-utils/mock-data/empty-yml.js

diff --git a/__tests__/test-utils/mock-data/empty-yml.js b/__tests__/test-utils/mock-data/empty-yml.js
new file mode 100644
index 000000000..734ddcaf0
--- /dev/null
+++ b/__tests__/test-utils/mock-data/empty-yml.js
@@ -0,0 +1,2 @@
+// Empty file for use with jest that replaces YML file imports.
+// (jest 26 or one of its loaders does not process comments in YML files correctly.)
diff --git a/package.json b/package.json
index f9cba43af..629a1dd2b 100644
--- a/package.json
+++ b/package.json
@@ -178,6 +178,9 @@
     "react-leaflet": "^2.6.1"
   },
   "jest": {
+    "moduleNameMapper": {
+      "i18n/(.*)\\.yml$": "<rootDir>__tests__/test-utils/mock-data/empty-yml.js"
+    },
     "transform": {
       "\\.[jt]sx?$": "babel-jest"
     },

From e924f6c595631ca79ad563cf5413c00d018208cb Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 24 Jan 2022 17:47:27 -0500
Subject: [PATCH 126/270] refactor(actions/api): Adjust for middleware CDP
 changes.

---
 lib/actions/api.js                   | 187 ++++++++++++++-------------
 lib/actions/user.js                  |  13 +-
 lib/components/form/user-settings.js |  72 ++++++-----
 3 files changed, 145 insertions(+), 127 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 2e76dd0c3..481d9d539 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -102,17 +102,17 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
     // FIXME: batchId is searchId for now.
     const state = getState()
     const { currentQuery } = state.otp
-    const persistenceStrategy = getPersistenceStrategy(state.otp.config.persistence)
-    const isUsingOtpMiddleware = persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
+    const persistenceStrategy = getPersistenceStrategy(
+      state.otp.config.persistence
+    )
+    const isUsingOtpMiddleware =
+      persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
 
     const isNewSearch = !searchId
     if (isNewSearch) searchId = randId()
     // Don't permit a routing query if the query is invalid
     if (!queryIsValid(state)) {
-      console.warn(
-        'Query is invalid. Aborting routing query',
-        currentQuery
-      )
+      console.warn('Query is invalid. Aborting routing query', currentQuery)
       return
     }
 
@@ -125,49 +125,65 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
     // Otherwise, inject nothing (rely on what's in current query) and perform
     // one iteration.
     const iterations = combinations
-      ? combinations.map(
-        ({mode, params}) => ({mode, ...params})
-      )
+      ? combinations.map(({ mode, params }) => ({ mode, ...params }))
       : [{}]
-    dispatch(routingRequest({
-      activeItinerary,
-      pending: iterations.length,
-      routingType,
-      searchId,
-      updateSearchInReducer
-    }))
-    return Promise.all(iterations.map((injectedParams, i) => {
-      const requestId = randId()
-      // fetch a realtime route
-      const url = constructRoutingQuery(state, false, {
-        batchId: searchId,
-        ...injectedParams
+    dispatch(
+      routingRequest({
+        activeItinerary,
+        pending: iterations.length,
+        routingType,
+        searchId,
+        updateSearchInReducer
       })
-      const realTimeFetch = fetch(url, getOtpFetchOptions(state))
-        .then(getJsonAndCheckResponse)
-        .then(json => {
-          const dispatchedRoutingResponse = dispatch(routingResponse({
-            requestId,
-            response: json,
-            searchId
-          }))
-          // If tracking is enabled, store locations and search after successful
-          // search is completed.
-          if (!isUsingOtpMiddleware && state.user?.localUser?.storeTripHistory) {
-            const { from, to } = currentQuery
-            if (!isStoredPlace(from)) {
-              dispatch(rememberPlace({ location: formatRecentPlace(from), type: 'recent' }))
-            }
-            if (!isStoredPlace(to)) {
-              dispatch(rememberPlace({ location: formatRecentPlace(to), type: 'recent' }))
-            }
-            dispatch(rememberSearch(formatRecentSearch(url, state)))
-          }
-          return dispatchedRoutingResponse
-        })
-        .catch(error => {
-          dispatch(routingError({ error, requestId, searchId, url }))
+    )
+    return Promise.all(
+      iterations.map((injectedParams, i) => {
+        const requestId = randId()
+        // fetch a realtime route
+        const url = constructRoutingQuery(state, false, {
+          batchId: searchId,
+          ...injectedParams
         })
+        const realTimeFetch = fetch(url, getOtpFetchOptions(state))
+          .then(getJsonAndCheckResponse)
+          .then((json) => {
+            const dispatchedRoutingResponse = dispatch(
+              routingResponse({
+                requestId,
+                response: json,
+                searchId
+              })
+            )
+            // If tracking is enabled, store locations and search after successful
+            // search is completed.
+            if (
+              !isUsingOtpMiddleware &&
+              state.user?.localUser?.storeTripHistory
+            ) {
+              const { from, to } = currentQuery
+              if (!isStoredPlace(from)) {
+                dispatch(
+                  rememberPlace({
+                    location: formatRecentPlace(from),
+                    type: 'recent'
+                  })
+                )
+              }
+              if (!isStoredPlace(to)) {
+                dispatch(
+                  rememberPlace({
+                    location: formatRecentPlace(to),
+                    type: 'recent'
+                  })
+                )
+              }
+              dispatch(rememberSearch(formatRecentSearch(url, state)))
+            }
+            return dispatchedRoutingResponse
+          })
+          .catch((error) => {
+            dispatch(routingError({ error, requestId, searchId, url }))
+          })
         // Update OTP URL params if a new search. In other words, if we're
         // performing a search based on query params taken from the URL after a back
         // button press, we don't need to update the OTP URL.
@@ -180,50 +196,47 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
           dispatch(updateOtpUrlParams(state, searchId))
         }
 
-      // Also fetch a non-realtime route.
-      //
-      // FIXME: The statement below may no longer apply with future work
-      // involving realtime info embedded in the OTP response.
-      // (That action records an entry again in the middleware.)
-      // For users who opted in to store trip request history,
-      // to avoid recording the same trip request twice in the middleware,
-      // only add the user Authorization token to the request
-      // when querying the non-realtime route.
-      //
-      // The advantage of using non-realtime route is that the middleware will be able to
-      // record and provide the theoretical itinerary summary without having to query OTP again.
-      //
-      // If storeTripHistory is enabled, we only send the token for logging for the first request,
-      // subsequent requests from the `iterations` variable are identical
-      // (except for the mode combinations -- they are regenerated for every inquiry).
-      //
-      // FIXME: Interestingly, and this could be from a side effect elsewhere,
-      // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
-      // (state.user stays unpopulated until after this function is called).
-      //
-      const shouldStoreTrip = i === 0 && (
-        isUsingOtpMiddleware
+        // Also fetch a non-realtime route.
+        //
+        // FIXME: The statement below may no longer apply with future work
+        // involving realtime info embedded in the OTP response.
+        // (That action records an entry again in the middleware.)
+        // For users who opted in to store trip request history,
+        // to avoid recording the same trip request twice in the middleware,
+        // only add the user Authorization token to the request
+        // when querying the non-realtime route.
+        //
+        // The advantage of using non-realtime route is that the middleware will be able to
+        // record and provide the theoretical itinerary summary without having to query OTP again.
+        //
+        // FIXME: Interestingly, and this could be from a side effect elsewhere,
+        // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
+        // (state.user stays unpopulated until after this function is called).
+        //
+        const shouldStoreTrip = isUsingOtpMiddleware
           ? state.user?.loggedInUser?.storeTripHistory
           : state.user?.localUser?.storeTripHistory
-      )
 
-      const nonRealtimeFetch = fetch(
-        constructRoutingQuery(state, true, {
-          batchId: searchId,
-          ...injectedParams
-        }),
-        getOtpFetchOptions(state, shouldStoreTrip)
-      )
-        .then(getJsonAndCheckResponse)
-        .then(json => {
-          // For OTP Middleware users, if tracking is enabled,
-          // refetch recent trip requests after a few seconds,
-          // so that persistence of trip requests has time to complete.
-          if (isUsingOtpMiddleware && state.user?.loggedInUser?.storeTripHistory) {
-            setTimeout(() => {
-              dispatch(fetchTripRequests())
-            }, 5000)
-          }
+        const nonRealtimeFetch = fetch(
+          constructRoutingQuery(state, true, {
+            batchId: searchId,
+            ...injectedParams
+          }),
+          getOtpFetchOptions(state, shouldStoreTrip)
+        )
+          .then(getJsonAndCheckResponse)
+          .then((json) => {
+            // For OTP Middleware users, if tracking is enabled,
+            // refetch recent trip requests after a few seconds,
+            // so that persistence of trip requests has time to complete.
+            if (
+              isUsingOtpMiddleware &&
+              state.user?.loggedInUser?.storeTripHistory
+            ) {
+              setTimeout(() => {
+                dispatch(fetchTripRequests())
+              }, 5000)
+            }
             // FIXME: This is only performed when ignoring realtimeupdates currently, just
             // to ensure it is not repeated twice.
             // FIXME: We should check that the mode combination actually has
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 4f2b3cf0c..e2fba5267 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -1,6 +1,7 @@
 import { createAction } from 'redux-actions'
 import clone from 'clone'
 import coreUtils from '@opentripplanner/core-utils'
+import isEmpty from 'lodash.isempty'
 import moment from 'moment'
 import qs from 'qs'
 
@@ -141,14 +142,14 @@ export function fetchAuth0Token(auth0, intl) {
  */
 function convertRequestToSearch(config) {
   return function (tripRequest) {
-    const { dateCreated, id, queryParams } = tripRequest
+    const { dateCreated, id, requestParameters = {} } = tripRequest
     const { host, path } = config.api
     return {
       canDelete: false,
       id,
-      query: planParamsToQuery(qs.parse(queryParams)),
+      query: planParamsToQuery(requestParameters),
       timestamp: dateCreated,
-      url: `${host}${path}/plan?${queryParams}`
+      url: `${host}${path}/plan?${qs.stringify(requestParameters)}`
     }
   }
 }
@@ -179,9 +180,9 @@ export function fetchTripRequests() {
       )
       if (status === 'success') {
         // Convert tripRequests to search format.
-        const convertedTrips = trips.data.map(
-          convertRequestToSearch(getState().otp.config)
-        )
+        const convertedTrips = trips.data
+          .map(convertRequestToSearch(getState().otp.config))
+          .filter((tripReq) => !isEmpty(tripReq.query))
         dispatch(setCurrentUserTripRequests(convertedTrips))
       }
     }
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 19fc1e0e3..efcbefdc6 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -2,10 +2,10 @@
 /* eslint-disable react/prop-types */
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl, useIntl } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import moment from 'moment'
-import React, { Component } from 'react'
+import React, { Component, useCallback } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
@@ -277,42 +277,45 @@ const Places = ({
 /**
  * Wrapper for recent trip requests.
  */
-class TripRequest extends Component {
-  _onSelect = () => {
-    const { setQueryParam, tripRequest } = this.props
-    const { id, query } = tripRequest
+const TripRequest = ({ forgetSearch, setQueryParam, tripRequest, user }) => {
+  const { canDelete = true, id, query, timestamp } = tripRequest
+
+  const _onSelect = useCallback(
     // Update query params and initiate search.
-    setQueryParam(query, id)
-  }
+    () => setQueryParam(query, id),
+    [setQueryParam, query, id]
+  )
 
-  _onForget = () => this.props.forgetSearch(this.props.tripRequest)
+  const _onForget = useCallback(
+    () => forgetSearch(tripRequest),
+    [forgetSearch, tripRequest]
+  )
 
-  render() {
-    const { intl, tripRequest, user } = this.props
-    const { canDelete = true, query, timestamp } = tripRequest
-    const mainText = summarizeQuery(query, user.savedLocations)
-    // FIXME_QBD: can we use formatDuration?
-    const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
-    const timeInfo = intl.formatMessage(
-      { id: 'common.time.fromNowUpdate' },
-      {
-        days: fromNowDur.days(),
-        hours: fromNowDur.hours(),
-        minutes: fromNowDur.minutes()
-      }
-    )
+  const mainText = summarizeQuery(query, user.savedLocations)
+  // FIXME_QBD: can we use formatDuration?
+  const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
+  const intl = useIntl()
+  // This text will be shown in a tooltip, therefore
+  // it is obtained using formaMessage rather than <FormattedfMessage>.
+  const timeInfo = intl.formatMessage(
+    { id: 'common.time.fromNowUpdate' },
+    {
+      days: fromNowDur.days(),
+      hours: fromNowDur.hours(),
+      minutes: fromNowDur.minutes()
+    }
+  )
 
-    return (
-      <StyledMainPanelPlace
-        className="place-item"
-        detailText={timeInfo}
-        icon="clock-o"
-        mainText={mainText}
-        onClick={this._onSelect}
-        onDelete={canDelete ? this._onForget : null}
-      />
-    )
-  }
+  return (
+    <StyledMainPanelPlace
+      className="place-item"
+      detailText={timeInfo}
+      icon="clock-o"
+      mainText={mainText}
+      onClick={_onSelect}
+      onDelete={canDelete ? _onForget : null}
+    />
+  )
 }
 
 /**
@@ -348,6 +351,7 @@ const RecentTrips = ({
       </UnpaddedList>
     </div>
   )
+
 // connect to redux store
 
 const mapStateToProps = (state, ownProps) => {

From 9d96d821a2da7f17e89cb5cfd28f3b978b13d4e4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 24 Jan 2022 18:35:55 -0500
Subject: [PATCH 127/270] improvement(UserSettings): Filter out duplicate
 queries in batch requests

---
 lib/actions/user.js                  | 37 +++++++++++++++++++++++++---
 lib/components/form/user-settings.js |  2 +-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index e2fba5267..d5932c6c4 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -12,6 +12,7 @@ import {
   isNewUser,
   positionHomeAndWorkFirst
 } from '../util/user'
+import { isBatchRoutingEnabled } from '../util/itinerary'
 import { isBlank } from '../util/ui'
 import {
   PERSIST_TO_LOCAL_STORAGE,
@@ -154,6 +155,28 @@ function convertRequestToSearch(config) {
   }
 }
 
+/**
+ * Removes duplicate requests saved from batch queries,
+ * so that only one request is displayed per batch.
+ * (Except for the mode, all query params in the same batch are the same.)
+ */
+function removeDuplicateRequestsFromBatch(config) {
+  if (isBatchRoutingEnabled(config)) {
+    const batches = {}
+    return function ({ query }) {
+      if (!batches[query.batchId]) {
+        batches[query.batchId] = true
+
+        // Remove the mode for display purposes
+        query.mode = ''
+        return true
+      }
+      return false
+    }
+  }
+  return (tripReq) => tripReq
+}
+
 /**
  * Fetches the most recent (default 10) trip history for a user.
  */
@@ -169,20 +192,28 @@ export function fetchTripRequests() {
       apiKey,
       'GET'
     )
-    const DEFAULT_LIMIT = 10
+
+    // FIXME: Revert to 10 after taking care of duplicates in the middleware.
+    const DEFAULT_LIMIT = 50
 
     if (emptyStatus === 'success') {
       const { data: trips, status } = await secureFetch(
-        `${requestUrl}&offset=${requests.total - DEFAULT_LIMIT}`,
+        `${requestUrl}&offset=${Math.max(
+          0,
+          requests.total - DEFAULT_LIMIT
+        )}&limit=${DEFAULT_LIMIT}`,
         accessToken,
         apiKey,
         'GET'
       )
       if (status === 'success') {
         // Convert tripRequests to search format.
+        const { config } = getState().otp
         const convertedTrips = trips.data
-          .map(convertRequestToSearch(getState().otp.config))
+          .map(convertRequestToSearch(config))
           .filter((tripReq) => !isEmpty(tripReq.query))
+          .filter(removeDuplicateRequestsFromBatch(config))
+
         dispatch(setCurrentUserTripRequests(convertedTrips))
       }
     }
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index efcbefdc6..2d8770617 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -291,7 +291,7 @@ const TripRequest = ({ forgetSearch, setQueryParam, tripRequest, user }) => {
     [forgetSearch, tripRequest]
   )
 
-  const mainText = summarizeQuery(query, user.savedLocations)
+  const mainText = summarizeQuery(query, user.savedLocations).trim()
   // FIXME_QBD: can we use formatDuration?
   const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
   const intl = useIntl()

From 47595228122b9d50cefec2bddba18a25e8baa34e Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 25 Jan 2022 08:53:30 -0500
Subject: [PATCH 128/270] refactor: fix typo

---
 lib/actions/api.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 7f968ae03..b053498df 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -129,7 +129,7 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
             if (!accessibleRoutingEnabled) return true
 
             // Explicit check for false is needed to avoid matching
-            // combinations without the pparameter set (undefined)
+            // combinations without the parameter set (undefined)
             return combination.accessible !== false
           })
       : [{}]

From 0075f3edd9d07c1fd69fc58b374a6fde046a3741 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Jan 2022 13:51:55 -0500
Subject: [PATCH 129/270] refactor(UserSettings): Add i18n where missing.

---
 i18n/en-US.yml                                |  2 +
 i18n/fr-FR.yml                                |  2 +
 lib/components/app/batch-routing-panel.js     |  3 +-
 lib/components/form/user-settings.js          | 88 +++++++++++--------
 .../user/places/favorite-place-list.js        | 32 ++-----
 lib/util/user.js                              | 77 +++++++++++++---
 6 files changed, 127 insertions(+), 77 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 27f9f2530..8b745db07 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -602,10 +602,12 @@ components:
     confirmDeletion: You have recent searches and/or places stored. Disabling storage of recent places/searches will remove these items. Continue?
     favoriteStops: Favorite stops
     myPreferences: My preferences
+    mySavedPlaces: My saved places (<manageLink>manage</manageLink>)
     noFavoriteStops: No favorite stops
     recentPlaces: Recent places
     recentSearches: Recent searches
     rememberSearches: Remember recent searches/places?
+    stopId: "Stop ID: {stopId}"
     storageDisclaimer: >
       Any preferences, places, or settings you opt 
       to save will be stored in the local storage of your browser. 
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 141b7a8ec..0e9c31f6c 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -587,10 +587,12 @@ components:
     confirmDeletion: Vous avez des recherches et/ou lieux récemment enregistrés qui vont être supprimés. Voulez-vous continuer ?
     favoriteStops: Arrêts favoris
     myPreferences: Mes préférences
+    mySavedPlaces: Mes lieux favoris (<manageLink>modifier</manageLink>)
     noFavoriteStops: Aucun arrêt favori
     recentPlaces: Lieux récents
     recentSearches: Recherches récentes
     rememberSearches: Enregistrer les recherches/lieux récents ?
+    stopId: "Arrêt n° {stopId}"
     storageDisclaimer: >
       En activant cette option, tous vos lieux, préférences et paramètres
       seront enregistrés dans le cache de votre navigateur.
diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 26a9ba5fe..2bb8424bf 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -37,7 +37,6 @@ const NarrativeContainer = styled.div`
 class BatchRoutingPanel extends Component {
   render() {
     const { activeSearch, intl, mobile, showUserSettings } = this.props
-    const actionText = mobile ? 'tap' : 'click' // FIXME_QBD: add intl
     return (
       <ViewerContainer className="batch-routing-panel">
         <div className="locations">
@@ -85,7 +84,7 @@ class BatchRoutingPanel extends Component {
 }
 
 // connect to the redux store
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const showUserSettings = getShowUserSettings(state)
   return {
     activeSearch: getActiveSearch(state),
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 2d8770617..c3a8a7466 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -14,8 +14,9 @@ import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import {
   getPersistenceStrategy,
+  getPlaceDetail,
+  getPlaceMainText,
   isHome,
-  isHomeOrWork,
   isWork
 } from '../../util/user'
 import { LinkWithQuery } from '../form/connected-links'
@@ -25,9 +26,26 @@ import PlaceShortcut from '../user/places/place-shortcut'
 
 import { UnpaddedList } from './styled'
 
-const { toSentenceCase } = coreUtils.itinerary
 const { summarizeQuery } = coreUtils.query
 
+/**
+ * Formats ellapsed time from the specified timestamp to now,
+ * as in "5 hours ago" or the localized equivalent.
+ */
+function formatEllapsedTime(timestamp, intl) {
+  // This text will be shown in a tooltip, therefore
+  // it is obtained using formaMessage rather than <FormattedfMessage>.
+  const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
+  return intl.formatMessage(
+    { id: 'common.time.fromNowUpdate' },
+    {
+      days: fromNowDur.days(),
+      hours: fromNowDur.hours(),
+      minutes: fromNowDur.minutes()
+    }
+  )
+}
+
 class UserSettings extends Component {
   _disableTracking = () => {
     const { intl, localUser, toggleTracking } = this.props
@@ -59,10 +77,10 @@ class UserSettings extends Component {
       deleteLocalUserRecentPlace,
       forgetSearch,
       forgetStop,
+      intl,
       localUser,
       setQueryParam,
-      setViewedStop,
-      storageDisclaimer
+      setViewedStop
     } = this.props
 
     const { favoriteStops, recentPlaces, recentSearches, storeTripHistory } =
@@ -71,7 +89,12 @@ class UserSettings extends Component {
       <>
         {/* Favorite stops are shown regardless of tracking. */}
         <Places
-          getDetailText={(location) => `Stop ID: ${location.id}`}
+          getDetailText={(location) => (
+            <FormattedMessage
+              id="components.UserSettings.stopId"
+              values={{ stopId: location.id }}
+            />
+          )}
           getMainText={(location) => location.address || location.name}
           header={
             <FormattedMessage id="components.UserSettings.favoriteStops" />
@@ -86,7 +109,9 @@ class UserSettings extends Component {
 
         {storeTripHistory && (
           <Places
-            getDetailText={(location) => moment(location.timestamp).fromNow()}
+            getDetailText={(location) => {
+              return formatEllapsedTime(location.timestamp, intl)
+            }}
             getMainText={(location) => location.address || location.name}
             header={
               <FormattedMessage id="components.UserSettings.recentPlaces" />
@@ -191,23 +216,23 @@ class UserSettings extends Component {
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
           getDetailText={(location) => {
-            // FIXME_QBD: unify the two location models.
-            return (
-              (isUsingOtpMiddleware ? location.address : location.name) ||
-              `Set your ${location.type} address`
-            )
+            return getPlaceDetail(location, intl, isUsingOtpMiddleware)
           }}
           getMainText={(location) => {
-            return isHomeOrWork(location)
-              ? toSentenceCase(location.type)
-              : location.name
+            return getPlaceMainText(location, intl, isUsingOtpMiddleware)
           }}
           header={
             isUsingOtpMiddleware && (
-              <>
-                My saved places (
-                <LinkWithQuery to="/account/settings">manage</LinkWithQuery>)
-              </>
+              <FormattedMessage
+                id="components.UserSettings.mySavedPlaces"
+                values={{
+                  manageLink: (linkText) => (
+                    <LinkWithQuery to="/account/settings">
+                      {linkText}
+                    </LinkWithQuery>
+                  )
+                }}
+              />
             )
           }
           onDelete={deleteUserPlace}
@@ -292,24 +317,11 @@ const TripRequest = ({ forgetSearch, setQueryParam, tripRequest, user }) => {
   )
 
   const mainText = summarizeQuery(query, user.savedLocations).trim()
-  // FIXME_QBD: can we use formatDuration?
-  const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
   const intl = useIntl()
-  // This text will be shown in a tooltip, therefore
-  // it is obtained using formaMessage rather than <FormattedfMessage>.
-  const timeInfo = intl.formatMessage(
-    { id: 'common.time.fromNowUpdate' },
-    {
-      days: fromNowDur.days(),
-      hours: fromNowDur.hours(),
-      minutes: fromNowDur.minutes()
-    }
-  )
-
   return (
     <StyledMainPanelPlace
       className="place-item"
-      detailText={timeInfo}
+      detailText={formatEllapsedTime(timestamp, intl)}
       icon="clock-o"
       mainText={mainText}
       onClick={_onSelect}
@@ -335,7 +347,9 @@ const RecentTrips = ({
   tripRequests.length > 0 && (
     <div className="recent-searches-container">
       <hr />
-      <div className="section-header">Recent searches</div>
+      <div className="section-header">
+        <FormattedMessage id="components.UserSettings.recentSearches" />
+      </div>
       <UnpaddedList>
         {tripRequests
           .sort((a, b) => b.timestamp - a.timestamp)
@@ -354,9 +368,8 @@ const RecentTrips = ({
 
 // connect to redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const { config, currentQuery, location, transitIndex } = state.otp
-  const { language, persistence } = config
   const { currentPosition, nearbyStops, sessionSearches } = location
   const { localUser, loggedInUser, loggedInUserTripRequests } = state.user
   return {
@@ -366,11 +379,10 @@ const mapStateToProps = (state, ownProps) => {
     loggedInUser,
     loggedInUserTripRequests,
     nearbyStops,
-    persistenceStrategy: getPersistenceStrategy(persistence),
+    persistenceStrategy: getPersistenceStrategy(config.persistence),
     query: currentQuery,
     sessionSearches,
-    stopsIndex: transitIndex.stops,
-    storageDisclaimer: language.storageDisclaimer
+    stopsIndex: transitIndex.stops
   }
 }
 
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 74b77e246..0f09924f5 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -2,18 +2,19 @@
 import { connect } from 'react-redux'
 import { ControlLabel } from 'react-bootstrap'
 import { FormattedMessage, useIntl } from 'react-intl'
-import coreUtils from '@opentripplanner/core-utils'
 import React from 'react'
 
 import * as userActions from '../../../actions/user'
 import { CREATE_ACCOUNT_PLACES_PATH } from '../../../util/constants'
-import { getPlaceBasePath, isHomeOrWork } from '../../../util/user'
+import {
+  getPlaceBasePath,
+  getPlaceDetail,
+  getPlaceMainText
+} from '../../../util/user'
 import { UnpaddedList } from '../../form/styled'
 
 import { FavoritePlace } from './styled'
 
-const { toSentenceCase } = coreUtils.itinerary
-
 /**
  * Renders an editable list user's favorite locations, and lets the user add a new one.
  * Additions, edits, and deletions of places take effect immediately.
@@ -33,27 +34,10 @@ const FavoritePlaceList = ({
       <UnpaddedList>
         {loggedInUser.savedLocations.map((place, index) => (
           <FavoritePlace
-            detailText={
-              place.address || (
-                <FormattedMessage
-                  id="components.FavoritePlaceList.setAddressForPlaceType"
-                  values={{
-                    placeType: intl.formatMessage({
-                      id: `common.places.${place.type}`
-                    })
-                  }}
-                />
-              )
-            }
+            detailText={getPlaceDetail(place, intl, true)}
             icon={place.icon}
             key={index}
-            // Use toSentenceCase (and not text-transform: capitalize)
-            // to change the first char. of the work and home locations only (which come in lowercase).
-            mainText={
-              isHomeOrWork(place)
-                ? toSentenceCase(place.name)
-                : place.name || place.address
-            }
+            mainText={getPlaceMainText(place, intl, true)}
             onDelete={() => deleteLoggedInUserPlace(place)}
             path={`${basePath}/${index}`}
             title={intl.formatMessage({
@@ -77,7 +61,7 @@ const FavoritePlaceList = ({
 
 // connect to the redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const path = state.router.location.pathname
   const isCreating = path === CREATE_ACCOUNT_PLACES_PATH
   return {
diff --git a/lib/util/user.js b/lib/util/user.js
index e8e2757a8..b2f9551ab 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -1,23 +1,27 @@
+import { FormattedMessage } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
+import React from 'react'
 
 import { CREATE_ACCOUNT_PLACES_PATH, PLACES_PATH } from './constants'
+import { getFormattedPlaces } from './i18n'
 import { isBlank } from './ui'
 
+const { toSentenceCase } = coreUtils.itinerary
 const { formatStoredPlaceName } = coreUtils.map
 
 /**
  * Determines whether a loggedInUser is a new user
  * that needs to complete the new account wizard.
  */
-export function isNewUser (loggedInUser) {
+export function isNewUser(loggedInUser) {
   return !loggedInUser.hasConsentedToTerms
 }
 
 // Helper functions to determine if
 // a location is home or work.
-export const isHome = loc => loc.type === 'home'
-export const isWork = loc => loc.type === 'work'
-export const isHomeOrWork = loc => isHome(loc) || isWork(loc)
+export const isHome = (loc) => loc.type === 'home'
+export const isWork = (loc) => loc.type === 'work'
+export const isHomeOrWork = (loc) => isHome(loc) || isWork(loc)
 
 /**
  * An index of common place types (excluding Home and Work),
@@ -68,7 +72,7 @@ const BLANK_WORK = {
  * The name field is set to 'Home' and 'Work' (or translated equivalent)
  * regardless of the value that was persisted.
  */
-export function positionHomeAndWorkFirst (userData, homeName, workName) {
+export function positionHomeAndWorkFirst(userData, homeName, workName) {
   // Note: cloning is not necessary as the data is obtained from fetch.
   const { savedLocations = [] } = userData
 
@@ -81,7 +85,9 @@ export function positionHomeAndWorkFirst (userData, homeName, workName) {
   const reorderedLocations = [
     homeLocation,
     workLocation,
-    ...savedLocations.filter(loc => loc !== homeLocation && loc !== workLocation)
+    ...savedLocations.filter(
+      (loc) => loc !== homeLocation && loc !== workLocation
+    )
   ]
 
   userData.savedLocations = reorderedLocations
@@ -92,7 +98,7 @@ export function positionHomeAndWorkFirst (userData, homeName, workName) {
  * - The icon for "Work" places is changed to 'briefcase',
  * - The address attribute is filled with the 'name' if available.
  */
-export function convertToPlace (location) {
+export function convertToPlace(location) {
   const { icon, lat, lon, name, type } = location
   return {
     address: name,
@@ -110,7 +116,7 @@ export function convertToPlace (location) {
  * - persistence.enabled is true,
  * - persistence.strategy is defined.
  */
-export function getPersistenceStrategy (persistence) {
+export function getPersistenceStrategy(persistence) {
   return persistence && persistence.enabled && persistence.strategy
 }
 
@@ -119,7 +125,7 @@ export function getPersistenceStrategy (persistence) {
  * - The icon for "Work" places is changed to 'work',
  * - The name attribute is filled with the place address.
  */
-export function convertToLocation (place) {
+export function convertToLocation(place) {
   const { address, icon, lat, lon, name, type } = place
   return {
     icon: isWork(place) ? 'work' : icon,
@@ -134,17 +140,62 @@ export function convertToLocation (place) {
  * Remove entries with blank addresses, and convert entries
  * from persisted user savedLocations into LocationField/EndpointOverlay locations.
  */
-export function getOtpUiLocations (loggedInUser) {
+export function getOtpUiLocations(loggedInUser) {
   return loggedInUser
     ? loggedInUser.savedLocations
-      .filter(place => !isBlank(place.address))
-      .map(convertToLocation)
+        .filter((place) => !isBlank(place.address))
+        .map(convertToLocation)
     : []
 }
 
 /**
  * Obtains the base path for editing a place depending on whether user is creating a new account.
  */
-export function getPlaceBasePath (isCreating) {
+export function getPlaceBasePath(isCreating) {
   return isCreating ? CREATE_ACCOUNT_PLACES_PATH : PLACES_PATH
 }
+
+/**
+ * Constructs the detail text of a favorite place.
+ * That text is typically the address of a location
+ * or, for unset home or work locations, a prompt for
+ * the user to set the address, as in:
+ *   Home
+ *   123 Main Street
+ * or
+ *   Home
+ *   Set your home address
+ */
+export function getPlaceDetail(place, intl, isUsingOtpMiddleware) {
+  // FIXME_QBD: unify the two location models.
+  return (
+    (isUsingOtpMiddleware ? place.address : place.name) || (
+      <FormattedMessage
+        id="components.FavoritePlaceList.setAddressForPlaceType"
+        values={{ placeType: getFormattedPlaces(place.type, intl) }}
+      />
+    )
+  )
+}
+
+/**
+ * Constructs the main text of a favorite place.
+ * That text is typically the nickname a location
+ * or, for home or work locations, the corresponding localized text,
+ * as in:
+ *   Home
+ *   123 Main Street
+ * or
+ *   Mom's house
+ *   123 Main Street
+ */
+export function getPlaceMainText(place, intl, isUsingOtpMiddleware) {
+  // FIXME_QBD: unify the two location models.
+  // Use toSentenceCase (and not text-transform: capitalize)
+  // to change the first char. of the work and home locations only (which come in lowercase).
+  return isHomeOrWork(place)
+    ? toSentenceCase(
+        isUsingOtpMiddleware ? place.name : getFormattedPlaces(place.type, intl)
+      )
+    : place.name || place.address
+}

From 5917a676452656132167b5f6f0e12ddfee7ad4b4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Jan 2022 14:55:24 -0500
Subject: [PATCH 130/270] fix(UserSettings): Add missing i18n

---
 i18n/en-US.yml                               |  3 +-
 i18n/fr-FR.yml                               |  7 ++-
 lib/components/form/user-settings.js         | 65 +++++++++++++++-----
 lib/components/user/places/place-shortcut.js | 16 +++--
 lib/util/user.js                             | 12 ++--
 5 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 8b745db07..eef79a05c 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -312,7 +312,7 @@ components:
     deleteThisPlace: Delete this place
     enterAlert: >
       Enter origin/destination in the form (or set via map click) 
-      and click the resulting marker to set as {type} location.
+      and click the resulting marker to set as {placeType} location.
     viewStop: View Stop
   PlaceEditor:
     genericLocationPlaceholder: Search for location
@@ -606,6 +606,7 @@ components:
     noFavoriteStops: No favorite stops
     recentPlaces: Recent places
     recentSearches: Recent searches
+    recentSearchSummary: "{mode} from {from} to {to}"
     rememberSearches: Remember recent searches/places?
     stopId: "Stop ID: {stopId}"
     storageDisclaimer: >
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 0e9c31f6c..15dbad1a8 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -298,8 +298,8 @@ components:
     # deleteThisPlace is an aria/tooltip text.
     deleteThisPlace: Supprimer ce lieu
     enterAlert: >
-      Entrez votre point de départ/destination dans le formulaire (ou cliquez sur la carte)
-      puis cliquez sur le marqueur qui apparaît pour définir le type d'emplacement ({type}).
+      Entrez votre point de départ/destination dans le formulaire (ou cliquez sur la carte),
+      puis cliquez sur le marqueur qui apparaît afin de définir votre {placeType}.
     viewStop: Voir cet arrêt
   PlaceEditor:
     genericLocationPlaceholder: Adresse du lieu
@@ -591,6 +591,7 @@ components:
     noFavoriteStops: Aucun arrêt favori
     recentPlaces: Lieux récents
     recentSearches: Recherches récentes
+    recentSearchSummary: "{mode} de {from} à {to}"
     rememberSearches: Enregistrer les recherches/lieux récents ?
     stopId: "Arrêt n° {stopId}"
     storageDisclaimer: >
@@ -761,7 +762,7 @@ common:
     rent: Location de véhicules
     subway: Métro
     tram: Tram
-    transit: En transports publics
+    transit: En transports
     walk: À pied
     walking: Marche
 
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index c3a8a7466..032042f84 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -12,6 +12,7 @@ import * as formActions from '../../actions/form'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
+import { getFormattedPlaces } from '../../util/i18n'
 import {
   getPersistenceStrategy,
   getPlaceDetail,
@@ -26,7 +27,37 @@ import PlaceShortcut from '../user/places/place-shortcut'
 
 import { UnpaddedList } from './styled'
 
-const { summarizeQuery } = coreUtils.query
+const { matchLatLon } = coreUtils.map
+const { hasTransit, toSentenceCase } = coreUtils.itinerary
+/**
+ * Version of summarizeQuery and helper function that supports i18n.
+ * FIXME: replace when the original does support i18n.
+ */
+function findLocationType(
+  intl,
+  location,
+  locations = [],
+  types = ['home', 'work', 'suggested']
+) {
+  const match = locations.find((l) => matchLatLon(l, location))
+  return match && types.indexOf(match.type) !== -1
+    ? getFormattedPlaces(match.type, intl)
+    : null
+}
+function summarizeQuery(query, intl, locations = []) {
+  const from =
+    findLocationType(intl, query.from, locations) ||
+    query.from.name.split(',')[0]
+  const to =
+    findLocationType(intl, query.to, locations) || query.to.name.split(',')[0]
+  const mode = hasTransit(query.mode)
+    ? intl.formatMessage({ id: 'common.modes.transit' })
+    : toSentenceCase(query.mode)
+  return intl.formatMessage(
+    { id: 'components.UserSettings.recentSearchSummary' },
+    { from, mode, to }
+  )
+}
 
 /**
  * Formats ellapsed time from the specified timestamp to now,
@@ -36,14 +67,16 @@ function formatEllapsedTime(timestamp, intl) {
   // This text will be shown in a tooltip, therefore
   // it is obtained using formaMessage rather than <FormattedfMessage>.
   const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
-  return intl.formatMessage(
-    { id: 'common.time.fromNowUpdate' },
-    {
-      days: fromNowDur.days(),
-      hours: fromNowDur.hours(),
-      minutes: fromNowDur.minutes()
-    }
-  )
+  return intl
+    .formatMessage(
+      { id: 'common.time.fromNowUpdate' },
+      {
+        days: fromNowDur.days(),
+        hours: fromNowDur.hours(),
+        minutes: fromNowDur.minutes()
+      }
+    )
+    .trim()
 }
 
 class UserSettings extends Component {
@@ -89,12 +122,12 @@ class UserSettings extends Component {
       <>
         {/* Favorite stops are shown regardless of tracking. */}
         <Places
-          getDetailText={(location) => (
-            <FormattedMessage
-              id="components.UserSettings.stopId"
-              values={{ stopId: location.id }}
-            />
-          )}
+          getDetailText={(location) => {
+            return intl.formatMessage(
+              { id: 'components.UserSettings.stopId' },
+              { stopId: location.id }
+            )
+          }}
           getMainText={(location) => location.address || location.name}
           header={
             <FormattedMessage id="components.UserSettings.favoriteStops" />
@@ -316,8 +349,8 @@ const TripRequest = ({ forgetSearch, setQueryParam, tripRequest, user }) => {
     [forgetSearch, tripRequest]
   )
 
-  const mainText = summarizeQuery(query, user.savedLocations).trim()
   const intl = useIntl()
+  const mainText = summarizeQuery(query, intl, user.savedLocations).trim()
   return (
     <StyledMainPanelPlace
       className="place-item"
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 6f636989b..c08c9b633 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -1,11 +1,13 @@
 /* eslint-disable react/prop-types */
 import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
 
 import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
 import { convertToLocation, getPersistenceStrategy } from '../../../util/user'
+import { getFormattedPlaces } from '../../../util/i18n'
 import { PERSIST_TO_OTP_MIDDLEWARE } from '../../../util/constants'
 
 import { StyledMainPanelPlace } from './styled'
@@ -35,13 +37,16 @@ class PlaceShortcut extends Component {
   }
 
   _onSelect = () => {
-    const { index, persistenceStrategy, place, routeTo } = this.props
+    const { index, intl, persistenceStrategy, place, routeTo } = this.props
     if (place.blank) {
       if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
         routeTo(`/account/places/${index}`)
       } else {
         window.alert(
-          `Enter origin/destination in the form (or set via map click) and click the resulting marker to set as ${place.type} location.`
+          intl.formatMessage(
+            { id: 'components.Place.enterAlert' },
+            { type: getFormattedPlaces(place.type, intl) }
+          )
         )
       }
     } else {
@@ -80,7 +85,7 @@ class PlaceShortcut extends Component {
 
 // connect to redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const { config, currentQuery: query } = state.otp
   const { persistence } = config
   return {
@@ -94,4 +99,7 @@ const mapDispatchToProps = {
   setLocation: mapActions.setLocation
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(PlaceShortcut)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(PlaceShortcut))
diff --git a/lib/util/user.js b/lib/util/user.js
index b2f9551ab..52d87f353 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -1,6 +1,4 @@
-import { FormattedMessage } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
-import React from 'react'
 
 import { CREATE_ACCOUNT_PLACES_PATH, PLACES_PATH } from './constants'
 import { getFormattedPlaces } from './i18n'
@@ -167,13 +165,13 @@ export function getPlaceBasePath(isCreating) {
  *   Set your home address
  */
 export function getPlaceDetail(place, intl, isUsingOtpMiddleware) {
+  // intl.formatMessage is used because this text can appear in tooltips.
   // FIXME_QBD: unify the two location models.
   return (
-    (isUsingOtpMiddleware ? place.address : place.name) || (
-      <FormattedMessage
-        id="components.FavoritePlaceList.setAddressForPlaceType"
-        values={{ placeType: getFormattedPlaces(place.type, intl) }}
-      />
+    (isUsingOtpMiddleware ? place.address : place.name) ||
+    intl.formatMessage(
+      { id: 'components.FavoritePlaceList.setAddressForPlaceType' },
+      { placeType: getFormattedPlaces(place.type, intl) }
     )
   )
 }

From e074119d8cfbae7fea6247af1b5718ac48c02ca5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 25 Jan 2022 15:45:11 -0500
Subject: [PATCH 131/270] fix(ConnectedEndpointsOverlay): Fix crash when
 clicking 'Forget home/work'

---
 lib/actions/map.js                            |  4 +-
 lib/actions/user.js                           | 11 ++----
 lib/components/form/user-settings.js          | 12 +++---
 .../map/connected-endpoints-overlay.js        | 38 +++++++++++++------
 .../user/places/favorite-place-list.js        |  2 +-
 5 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 18fe3a617..7a50e30ad 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -26,13 +26,13 @@ const deleteRecentPlace = createAction('DELETE_LOCAL_USER_RECENT_PLACE')
 /**
  * Dispatches the action to delete a saved or recent place from localStorage.
  */
-export function forgetPlace (placeId) {
+export function forgetPlace(placeId, intl) {
   return function (dispatch, getState) {
     // localStorage only: Recent place IDs contain the string literal 'recent'.
     if (placeId.indexOf('recent') !== -1) {
       dispatch(deleteRecentPlace(placeId))
     } else {
-      dispatch(deleteUserPlace(placeId))
+      dispatch(deleteUserPlace(placeId, intl))
     }
   }
 }
diff --git a/lib/actions/user.js b/lib/actions/user.js
index d5932c6c4..c03aa7ec1 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -702,10 +702,6 @@ export function planNewTripFromMonitoredTrip(monitoredTrip) {
 export function saveUserPlace(placeToSave, placeIndex, intl) {
   return function (dispatch, getState) {
     const { loggedInUser } = getState().user
-
-    // FIXME_QBD Remove "blank" attribute, it is not recognized by the middleware.
-    // const { blank, ...placeToSave } = place
-
     if (placeIndex === 'new') {
       loggedInUser.savedLocations.push(placeToSave)
     } else {
@@ -725,8 +721,9 @@ export function deleteLoggedInUserPlace(placeIndex, intl) {
       !window.confirm(
         intl.formatMessage({ id: 'actions.user.confirmDeletePlace' })
       )
-    )
+    ) {
       return
+    }
 
     const { loggedInUser } = getState().user
     loggedInUser.savedLocations.splice(placeIndex, 1)
@@ -738,7 +735,7 @@ export function deleteLoggedInUserPlace(placeIndex, intl) {
 /**
  * Delete a place for the logged-in or local user according to the persistence strategy.
  */
-export function deleteUserPlace(place) {
+export function deleteUserPlace(place, intl) {
   return function (dispatch, getState) {
     const { otp, user } = getState()
     const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
@@ -755,7 +752,7 @@ export function deleteUserPlace(place) {
           : loggedInUser.savedLocations.indexOf(place)
 
       if (placeIndex > -1) {
-        dispatch(deleteLoggedInUserPlace(placeIndex))
+        dispatch(deleteLoggedInUserPlace(placeIndex, intl))
       }
     } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
       dispatch(deleteLocalUserSavedPlace(place))
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 032042f84..5c0f4ce85 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -9,7 +9,6 @@ import React, { Component, useCallback } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
-import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { getFormattedPlaces } from '../../util/i18n'
@@ -217,10 +216,14 @@ class UserSettings extends Component {
     return locations
   }
 
+  _deleteUserPlace = (place) => {
+    const { deleteUserPlace, intl } = this.props
+    deleteUserPlace(place, intl)
+  }
+
   render() {
     const {
       className,
-      deleteUserPlace,
       forgetSearch,
       intl,
       localUser,
@@ -268,7 +271,7 @@ class UserSettings extends Component {
               />
             )
           }
-          onDelete={deleteUserPlace}
+          onDelete={this._deleteUserPlace}
           places={sortedLocations}
           separator={false}
         />
@@ -309,7 +312,6 @@ const Places = ({
         <UnpaddedList>
           {places.length > 0
             ? places.map((location, index) => {
-                // FIXME_QBD Unify location models.
                 // using the `return` syntax instead of `=>` to please both
                 // prettier and react/jsx rules, otherwise they conflict.
                 return (
@@ -421,11 +423,9 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
   deleteLocalUserRecentPlace: userActions.deleteLocalUserRecentPlace,
-  deleteLoggedInUserPlace: userActions.deleteLoggedInUserPlace,
   deleteUserPlace: userActions.deleteUserPlace,
   forgetSearch: apiActions.forgetSearch,
   forgetStop: userActions.forgetStop,
-  setLocation: mapActions.setLocation,
   setQueryParam: formActions.setQueryParam,
   setViewedStop: uiActions.setViewedStop,
   toggleTracking: apiActions.toggleTracking
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index 59b1a2e11..b7a48b431 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -1,19 +1,32 @@
-import EndpointsOverlay from '@opentripplanner/endpoints-overlay'
+/* eslint-disable react/prop-types */
 import { connect } from 'react-redux'
+import { useIntl } from 'react-intl'
+import EndpointsOverlay from '@opentripplanner/endpoints-overlay'
+import React, { useCallback } from 'react'
 
-import {
-  clearLocation,
-  forgetPlace,
-  setLocation
-} from '../../actions/map'
-import { rememberPlace } from '../../actions/user'
-import { PERSIST_TO_LOCAL_STORAGE, PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
+import { clearLocation, forgetPlace, setLocation } from '../../actions/map'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import { getOtpUiLocations, getPersistenceStrategy } from '../../util/user'
+import {
+  PERSIST_TO_LOCAL_STORAGE,
+  PERSIST_TO_OTP_MIDDLEWARE
+} from '../../util/constants'
+import { rememberPlace } from '../../actions/user'
+
+const ConnectedEndpointsOverlay = (props) => {
+  const intl = useIntl()
+  const _forgetPlace = useCallback(
+    (place) => {
+      props.forgetPlace(place, intl)
+    },
+    [props, intl]
+  )
+  return <EndpointsOverlay {...props} forgetPlace={_forgetPlace} />
+}
 
 // connect to the redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const { viewedRoute } = state.otp.ui
   // If the route viewer is active, do not show itinerary on map.
   // mainPanelContent is null whenever the trip planner is active.
@@ -32,7 +45,7 @@ const mapStateToProps = (state, ownProps) => {
   const { from, to } = query
   // Intermediate places doesn't trigger a re-plan, so for now default to
   // current query. FIXME: Determine with TriMet if this is desired behavior.
-  const places = state.otp.currentQuery.intermediatePlaces.filter(p => p)
+  const places = state.otp.currentQuery.intermediatePlaces.filter((p) => p)
   const { localUser, loggedInUser } = state.user
 
   const { persistence } = state.otp.config
@@ -61,4 +74,7 @@ const mapDispatchToProps = {
   setLocation
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(EndpointsOverlay)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ConnectedEndpointsOverlay)
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 0f09924f5..3701269c5 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -38,7 +38,7 @@ const FavoritePlaceList = ({
             icon={place.icon}
             key={index}
             mainText={getPlaceMainText(place, intl, true)}
-            onDelete={() => deleteLoggedInUserPlace(place)}
+            onDelete={() => deleteLoggedInUserPlace(place, intl)}
             path={`${basePath}/${index}`}
             title={intl.formatMessage({
               id: 'components.FavoritePlaceList.editThisPlace'

From 9ec3064b35cffd173a742e7f0fbf0e9047d0582a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 26 Jan 2022 07:50:09 -0500
Subject: [PATCH 132/270] refactor: correct typescript

---
 lib/components/app/app-menu.tsx               | 18 ++++--
 .../narrative-itineraries-errors.tsx          |  2 +
 .../user/monitored-trip/trip-basics-pane.tsx  | 56 ++++++++++---------
 lib/components/user/places/place-editor.tsx   | 12 ++--
 ...ne-display.js => stacked-pane-display.tsx} | 19 +++----
 5 files changed, 58 insertions(+), 49 deletions(-)
 rename lib/components/user/{stacked-pane-display.js => stacked-pane-display.tsx} (80%)

diff --git a/lib/components/app/app-menu.tsx b/lib/components/app/app-menu.tsx
index bbec60447..dbdc11430 100644
--- a/lib/components/app/app-menu.tsx
+++ b/lib/components/app/app-menu.tsx
@@ -8,7 +8,8 @@ import { MenuItem } from 'react-bootstrap'
 import { withRouter } from 'react-router'
 import qs from 'qs'
 import SlidingPane from 'react-sliding-pane'
-import type { InjectedIntlProps } from 'react-intl'
+import type { RouteComponentProps } from 'react-router'
+import type { WrappedComponentProps } from 'react-intl'
 // No types available, old package
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -21,9 +22,16 @@ import { MainPanelContent, setMainPanelContent } from '../../actions/ui'
 import Icon from '../util/icon'
 
 type AppMenuProps = {
+  callTakerEnabled?: boolean
+  extraMenuItems?: menuItem[]
+  fieldTripEnabled?: boolean
   location: { search: string }
+  mailablesEnabled?: boolean
   reactRouterConfig: { basename: string }
+  resetAndToggleCallHistory?: () => void
+  resetAndToggleFieldTrips?: () => void
   setMainPanelContent: (panel: number) => void
+  toggleMailables: () => void
 }
 type AppMenuState = {
   expandedSubmenus: Record<string, boolean>
@@ -43,7 +51,7 @@ type menuItem = {
  * Sidebar which appears to show user list of options and links
  */
 class AppMenu extends Component<
-  AppMenuProps & InjectedIntlProps,
+  AppMenuProps & WrappedComponentProps & RouteComponentProps,
   AppMenuState
 > {
   _showRouteViewer = () => {
@@ -85,7 +93,7 @@ class AppMenu extends Component<
     this.setState({ expandedSubmenus: { [id]: !currentlyOpen } })
   }
 
-  _addExtraMenuItems = (menuItems: menuItem[]) => {
+  _addExtraMenuItems = (menuItems?: menuItem[]) => {
     return (
       menuItems &&
       menuItems.map((menuItem) => {
@@ -260,8 +268,8 @@ const mapDispatchToProps = {
   toggleMailables: callTakerActions.toggleMailables
 }
 
-export default withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(injectIntl(AppMenu))
+export default injectIntl(
+  withRouter(connect(mapStateToProps, mapDispatchToProps)(AppMenu))
 )
 
 /**
diff --git a/lib/components/narrative/narrative-itineraries-errors.tsx b/lib/components/narrative/narrative-itineraries-errors.tsx
index 786e4f30b..87b036463 100644
--- a/lib/components/narrative/narrative-itineraries-errors.tsx
+++ b/lib/components/narrative/narrative-itineraries-errors.tsx
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore otp-ui is not typed yet
 import { getCompanyIcon } from '@opentripplanner/icons/lib/companies'
 import { useIntl } from 'react-intl'
 import React from 'react'
diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx
index 3c084c6f4..73237428c 100644
--- a/lib/components/user/monitored-trip/trip-basics-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-basics-pane.tsx
@@ -21,7 +21,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Prompt } from 'react-router'
 import styled from 'styled-components'
-import type { InjectedIntlProps } from 'react-intl'
+import type { IntlShape, WrappedComponentProps } from 'react-intl'
 
 import * as userActions from '../../../actions/user'
 import {
@@ -38,16 +38,16 @@ import TripSummary from './trip-summary'
 type TripBasicsProps =
   | {
       canceled: boolean
-      checkItineraryExistence: (monitoredTrip: unknown) => void
+      checkItineraryExistence: (monitoredTrip: unknown, intl: IntlShape) => void
       clearItineraryExistence: () => void
       dirty: boolean
-      errors: Record<string, boolean>[]
+      errors: { tripName?: string }
       isCreating: boolean
       isSubmitting: boolean
       itineraryExistence: Record<string, { valid: boolean }>
       setFieldValue: (field: string, threshold: number | false) => void
-      values: { itinerary: unknown } // FIXME
-    } & InjectedIntlProps
+      values: { [key: string]: string; itinerary: any } // FIXME
+    } & WrappedComponentProps
 
 // FIXME: move to shared types file
 type errorStates = 'success' | 'warning' | 'error' | null | undefined
@@ -148,7 +148,7 @@ class TripBasicsPane extends Component<TripBasicsProps> {
       // - monitoredTrip.tripName is not blank and that tripName is not already used.
       // - no day is selected (show a combined error indication).
       // FIXME: type getErrorStates
-      const errorStates: Record<string, errorStates> = getErrorStates(
+      const errorStates: Record<string, errorStates | any> = getErrorStates(
         this.props
       )
 
@@ -207,27 +207,29 @@ class TripBasicsPane extends Component<TripBasicsProps> {
                     )
                   : null
                 return (
-                  <TripDayLabel
-                    className={boxClass}
-                    key={day}
-                    title={notAvailableText}
-                  >
-                    <span>
-                      <FormattedDayOfWeekCompact day={day} />
-                    </span>
-                    {
-                      // Let users save an existing trip, even though it may not be available on some days.
-                      // TODO: improve checking trip availability.
-                      isDayDisabled && isCreating ? (
-                        <Glyphicon
-                          aria-label={notAvailableText}
-                          glyph="ban-circle"
-                        />
-                      ) : (
-                        <Field name={day} type="checkbox" />
-                      )
-                    }
-                  </TripDayLabel>
+                  notAvailableText && (
+                    <TripDayLabel
+                      className={boxClass}
+                      key={day}
+                      title={notAvailableText}
+                    >
+                      <span>
+                        <FormattedDayOfWeekCompact day={day} />
+                      </span>
+                      {
+                        // Let users save an existing trip, even though it may not be available on some days.
+                        // TODO: improve checking trip availability.
+                        isDayDisabled && isCreating ? (
+                          <Glyphicon
+                            aria-label={notAvailableText}
+                            glyph="ban-circle"
+                          />
+                        ) : (
+                          <Field name={day} type="checkbox" />
+                        )
+                      }
+                    </TripDayLabel>
+                  )
                 )
               })}
               <div style={{ clear: 'both' }} />
diff --git a/lib/components/user/places/place-editor.tsx b/lib/components/user/places/place-editor.tsx
index f8569a876..4a61a6b2e 100644
--- a/lib/components/user/places/place-editor.tsx
+++ b/lib/components/user/places/place-editor.tsx
@@ -9,7 +9,7 @@ import {
 import { injectIntl } from 'react-intl'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import type { InjectedIntlProps } from 'react-intl'
+import type { WrappedComponentProps } from 'react-intl'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import coreUtils from '@opentripplanner/core-utils'
@@ -56,15 +56,13 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
  */
 class PlaceEditor extends Component<
   {
-    // FIXME: shared type for errors
-    errors: Record<string, boolean>[]
+    // FIXME: shared type for errors, places
+    errors: any
     handleBlur: () => void
     handleChange: () => void
     setValues: (values: unknown) => void
-    // Needed for prop spread
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    values: Object
-  } & InjectedIntlProps
+    values: any
+  } & WrappedComponentProps
 > {
   _handleLocationChange = ({
     location
diff --git a/lib/components/user/stacked-pane-display.js b/lib/components/user/stacked-pane-display.tsx
similarity index 80%
rename from lib/components/user/stacked-pane-display.js
rename to lib/components/user/stacked-pane-display.tsx
index 35420a347..cf3150797 100644
--- a/lib/components/user/stacked-pane-display.js
+++ b/lib/components/user/stacked-pane-display.tsx
@@ -1,5 +1,4 @@
 import { FormattedMessage } from 'react-intl'
-import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
 import { PageHeading, StackedPaneContainer } from './styled'
@@ -10,8 +9,15 @@ import FormNavigationButtons from './form-navigation-buttons'
  *
  * TODO: add types once Pane type exists
  */
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => {
+const StackedPaneDisplay = ({
+  onCancel,
+  paneSequence,
+  title
+}: {
+  onCancel: () => void
+  paneSequence: any[]
+  title?: string | JSX.Element
+}): JSX.Element => {
   // Create indicator of if cancel button was clicked so that child components can know
   const [isBeingCanceled, updateBeingCanceled] = useState(false)
 
@@ -48,11 +54,4 @@ const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => {
     </>
   )
 }
-
-StackedPaneDisplay.propTypes = {
-  onCancel: PropTypes.func.isRequired,
-  paneSequence: PropTypes.array.isRequired,
-  title: PropTypes.string
-}
-
 export default StackedPaneDisplay

From 6d949aca2ebefb3894478b2b60cf6148eba0bed0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 26 Jan 2022 07:53:36 -0500
Subject: [PATCH 133/270] ci: update for latest package.json scripts

---
 .github/workflows/node-ci.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
index ed1b484eb..15dffceb6 100644
--- a/.github/workflows/node-ci.yml
+++ b/.github/workflows/node-ci.yml
@@ -30,8 +30,10 @@ jobs:
         # TODO: remove this once project is typescripted
       - name: Lint all code (ignoring errors)
         run: yarn lint-all || true
+      - name: Run type check
+        run: yarn typecheck
       - name: Run tests
-        run: yarn jest
+        run: yarn unit
       - name: Build example project
         run: yarn build
       - name: Run a11y tests

From dbc928810cebbfd2001e87a2ecc7346e6fc0521e Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 26 Jan 2022 13:48:51 -0500
Subject: [PATCH 134/270] chore(deps): update otp-ui

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 5a8f70e83..58654f249 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",
     "@opentripplanner/base-map": "^2.0.0",
-    "@opentripplanner/core-utils": "^4.7.0",
+    "@opentripplanner/core-utils": "^4.7.1",
     "@opentripplanner/endpoints-overlay": "^1.3.0",
     "@opentripplanner/from-to-location-picker": "^1.3.0",
     "@opentripplanner/geocoder": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 33deb055e..5645dc05c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2464,10 +2464,10 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/core-utils@^4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.7.0.tgz#0a59f26344702e6a9b45f977c338c58d1773dc45"
-  integrity sha512-YqGbIG1vnZSaBsZO3ss0IZ16Tdx6Ze29iHOVO+kC3Plqu7HPv7/lhzA/3qCqlTLwNp+rkfsDlv06H/Gqr1mjHg==
+"@opentripplanner/core-utils@^4.7.1":
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.7.1.tgz#72e708d3818f6764726b489192d7501e86d012d3"
+  integrity sha512-AGtNEqqNLYMp+elLiQKVf6QcP4KIoMugN7oZ4+G1p5a1eMMtP5wrxk/2IidCkkz2c+wacljoPZ2pWF630gvj7w==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/geocoder" "^1.1.2"

From 8ac8cfca5af87790de532d59acb8e8c2f48f2a12 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 26 Jan 2022 16:09:00 -0500
Subject: [PATCH 135/270] refactor(UserSettings): Finish merging the location
 models.

---
 __tests__/util/user.js                        |  86 ++++++++++++
 lib/actions/api.js                            |   6 +-
 lib/components/form/user-settings.js          |  16 +--
 .../user/places/favorite-place-list.js        |  11 +-
 lib/components/user/places/place-shortcut.js  |  12 +-
 lib/reducers/create-user-reducer.js           | 126 +++++++++++++-----
 lib/util/user.js                              |  62 ++++-----
 7 files changed, 227 insertions(+), 92 deletions(-)
 create mode 100644 __tests__/util/user.js

diff --git a/__tests__/util/user.js b/__tests__/util/user.js
new file mode 100644
index 000000000..b1472139e
--- /dev/null
+++ b/__tests__/util/user.js
@@ -0,0 +1,86 @@
+/* globals describe, expect, it */
+
+import { convertToLegacyLocation, convertToPlace } from '../../lib/util/user'
+
+describe('util > user', () => {
+  describe('convertToPlace', () => {
+    const testCases = [
+      {
+        expected: {
+          address: '123 Main street',
+          icon: 'home',
+          id: 'id123',
+          lat: 12,
+          lon: 34,
+          name: 'Home',
+          type: 'home'
+        },
+        input: {
+          icon: 'home',
+          id: 'id123',
+          lat: 12,
+          lon: 34,
+          name: '123 Main street',
+          type: 'home'
+        }
+      },
+      {
+        expected: {
+          address: '123 Main street',
+          icon: 'briefcase',
+          id: 'id123',
+          lat: 12,
+          lon: 34,
+          name: 'Work',
+          type: 'work'
+        },
+        input: {
+          icon: 'some-icon',
+          id: 'id123',
+          lat: 12,
+          lon: 34,
+          name: '123 Main street',
+          type: 'work'
+        }
+      }
+    ]
+
+    testCases.forEach((testCase) => {
+      it('should convert a localStorage location to memory', () => {
+        expect(convertToPlace(testCase.input)).toEqual(testCase.expected)
+      })
+    })
+  })
+
+  describe('convertToLegacyLocation', () => {
+    const testCases = [
+      {
+        expected: {
+          address: undefined,
+          icon: 'home',
+          id: 'id123',
+          lat: 12,
+          lon: 34,
+          name: '123 Main street',
+          type: 'home'
+        },
+        input: {
+          address: '123 Main street',
+          icon: 'home',
+          id: 'id123',
+          lat: 12,
+          lon: 34,
+          type: 'home'
+        }
+      }
+    ]
+
+    testCases.forEach((testCase) => {
+      it('should convert a memory place to a localStorage location', () => {
+        expect(convertToLegacyLocation(testCase.input)).toEqual(
+          testCase.expected
+        )
+      })
+    })
+  })
+})
diff --git a/lib/actions/api.js b/lib/actions/api.js
index 481d9d539..f16ef5ea0 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -11,7 +11,7 @@ import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
 import qs from 'qs'
 
-import { getPersistenceStrategy } from '../util/user'
+import { convertToPlace, getPersistenceStrategy } from '../util/user'
 import { getSecureFetchOptions } from '../util/middleware'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
 import { PERSIST_TO_OTP_MIDDLEWARE } from '../util/constants'
@@ -44,13 +44,13 @@ export const rememberSearch = createAction('REMEMBER_SEARCH')
 export const forgetSearch = createAction('FORGET_SEARCH')
 
 function formatRecentPlace(place) {
-  return {
+  return convertToPlace({
     ...place,
     icon: 'clock-o',
     id: `recent-${randId()}`,
     timestamp: new Date().getTime(),
     type: 'recent'
-  }
+  })
 }
 
 function formatRecentSearch(url, state) {
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 5c0f4ce85..08550ba42 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -127,7 +127,7 @@ class UserSettings extends Component {
               { stopId: location.id }
             )
           }}
-          getMainText={(location) => location.address || location.name}
+          getMainText={(location) => location.address}
           header={
             <FormattedMessage id="components.UserSettings.favoriteStops" />
           }
@@ -144,7 +144,7 @@ class UserSettings extends Component {
             getDetailText={(location) => {
               return formatEllapsedTime(location.timestamp, intl)
             }}
-            getMainText={(location) => location.address || location.name}
+            getMainText={(location) => location.address}
             header={
               <FormattedMessage id="components.UserSettings.recentPlaces" />
             }
@@ -199,7 +199,7 @@ class UserSettings extends Component {
     const locations = [...user.savedLocations]
     if (!locations.find(isWork)) {
       locations.push({
-        blank: true,
+        address: '',
         icon: 'briefcase',
         id: 'work',
         type: 'work'
@@ -207,7 +207,7 @@ class UserSettings extends Component {
     }
     if (!locations.find(isHome)) {
       locations.push({
-        blank: true,
+        address: '',
         icon: 'home',
         id: 'home',
         type: 'home'
@@ -251,12 +251,8 @@ class UserSettings extends Component {
       <div className={`user-settings ${className}`} style={style}>
         {/* Sorted locations are shown regardless of tracking. */}
         <Places
-          getDetailText={(location) => {
-            return getPlaceDetail(location, intl, isUsingOtpMiddleware)
-          }}
-          getMainText={(location) => {
-            return getPlaceMainText(location, intl, isUsingOtpMiddleware)
-          }}
+          getDetailText={(location) => getPlaceDetail(location, intl)}
+          getMainText={(location) => getPlaceMainText(location, intl)}
           header={
             isUsingOtpMiddleware && (
               <FormattedMessage
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
index 3701269c5..4b757f629 100644
--- a/lib/components/user/places/favorite-place-list.js
+++ b/lib/components/user/places/favorite-place-list.js
@@ -11,6 +11,7 @@ import {
   getPlaceDetail,
   getPlaceMainText
 } from '../../../util/user'
+import { isBlank } from '../../../util/ui'
 import { UnpaddedList } from '../../form/styled'
 
 import { FavoritePlace } from './styled'
@@ -34,11 +35,15 @@ const FavoritePlaceList = ({
       <UnpaddedList>
         {loggedInUser.savedLocations.map((place, index) => (
           <FavoritePlace
-            detailText={getPlaceDetail(place, intl, true)}
+            detailText={getPlaceDetail(place, intl)}
             icon={place.icon}
             key={index}
-            mainText={getPlaceMainText(place, intl, true)}
-            onDelete={() => deleteLoggedInUserPlace(place, intl)}
+            mainText={getPlaceMainText(place, intl)}
+            onDelete={
+              !isBlank(place.address)
+                ? () => deleteLoggedInUserPlace(index, intl)
+                : null
+            }
             path={`${basePath}/${index}`}
             title={intl.formatMessage({
               id: 'components.FavoritePlaceList.editThisPlace'
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index c08c9b633..67f087dc8 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -6,8 +6,12 @@ import React, { Component } from 'react'
 
 import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
-import { convertToLocation, getPersistenceStrategy } from '../../../util/user'
+import {
+  convertToLegacyLocation,
+  getPersistenceStrategy
+} from '../../../util/user'
 import { getFormattedPlaces } from '../../../util/i18n'
+import { isBlank } from '../../../util/ui'
 import { PERSIST_TO_OTP_MIDDLEWARE } from '../../../util/constants'
 
 import { StyledMainPanelPlace } from './styled'
@@ -38,7 +42,7 @@ class PlaceShortcut extends Component {
 
   _onSelect = () => {
     const { index, intl, persistenceStrategy, place, routeTo } = this.props
-    if (place.blank) {
+    if (isBlank(place.address)) {
       if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
         routeTo(`/account/places/${index}`)
       } else {
@@ -53,7 +57,7 @@ class PlaceShortcut extends Component {
       // Convert to OTP UI location before sending events
       // (to avoid issues when user clicks Forget/Save location
       // multiple times subsequently)
-      this._setFromOrToLocation(convertToLocation(place))
+      this._setFromOrToLocation(convertToLegacyLocation(place))
     }
   }
 
@@ -76,7 +80,7 @@ class PlaceShortcut extends Component {
         icon={icon}
         mainText={mainText}
         onClick={this._onSelect}
-        onDelete={!place.isFixed && !place.blank ? this._onDelete : null}
+        onDelete={!isBlank(place.address) ? this._onDelete : null}
         onView={onView && this._onView}
       />
     )
diff --git a/lib/reducers/create-user-reducer.js b/lib/reducers/create-user-reducer.js
index 6111b5f07..7d6e0301e 100644
--- a/lib/reducers/create-user-reducer.js
+++ b/lib/reducers/create-user-reducer.js
@@ -1,8 +1,10 @@
 /* eslint-disable complexity */
 import clone from 'clone'
-import update from 'immutability-helper'
-import isEqual from 'lodash.isequal'
 import coreUtils from '@opentripplanner/core-utils'
+import isEqual from 'lodash.isequal'
+import update from 'immutability-helper'
+
+import { convertToLegacyLocation, convertToPlace } from '../util/user'
 
 const { matchLatLon } = coreUtils.map
 const { getDefaultQuery, getTripOptionsFromQuery } = coreUtils.query
@@ -13,17 +15,26 @@ const MAX_RECENT_STORAGE = 5
 /**
  * Adds a place to the specified localUser state and optional persistence setting.
  */
-function rememberLocalUserPlace (location, duplicateFinder, beforeSave, state, fieldName, settingName) {
+function rememberLocalUserPlace(
+  place,
+  duplicateFinder,
+  beforeSave,
+  state,
+  fieldName,
+  settingName
+) {
   let places = clone(state.localUser[fieldName])
   const duplicateIndex = places.findIndex(duplicateFinder)
   // Replace recent place if duplicate found or add to beginning of list.
-  if (duplicateIndex !== -1) places.splice(duplicateIndex, 1, location)
-  else places.unshift(location)
+  if (duplicateIndex !== -1) places.splice(duplicateIndex, 1, place)
+  else places.unshift(place)
 
   if (beforeSave) {
     places = beforeSave(places)
   }
-  if (settingName) {
+  if (settingName === 'recent') {
+    storeItem(settingName, places.map(convertToLegacyLocation))
+  } else if (settingName) {
     storeItem(settingName, places)
   }
   return update(state, { localUser: { [fieldName]: { $set: places } } })
@@ -33,7 +44,7 @@ function rememberLocalUserPlace (location, duplicateFinder, beforeSave, state, f
  * Sorts the given list most recent first,
  * and keeps the first MAX_RECENT_STORAGE most recent items.
  */
-function sortAndTrim (list) {
+function sortAndTrim(list) {
   const sorted = list.sort((a, b) => b.timestamp - a.timestamp)
   // Only keep up to 5 recent locations
   // FIXME: Check for duplicates
@@ -46,9 +57,9 @@ function sortAndTrim (list) {
 /**
  * Removes a place by id from the specified localUser state and optional persistence setting.
  */
-function removeLocalUserPlace (place, state, fieldName, settingName) {
+function removeLocalUserPlace(place, state, fieldName, settingName) {
   const originalArray = state.localUser[fieldName]
-  const removeIndex = originalArray.findIndex(l => l.id === place.id)
+  const removeIndex = originalArray.findIndex((l) => l.id === place.id)
   // If a persistence setting is provided,
   // persist a copy of the passed array without the specified element.
   if (settingName) {
@@ -57,7 +68,9 @@ function removeLocalUserPlace (place, state, fieldName, settingName) {
     storeItem(settingName, newArray)
   }
   return removeIndex !== -1
-    ? update(state, { localUser: { [fieldName]: { $splice: [[removeIndex, 1]] } } })
+    ? update(state, {
+        localUser: { [fieldName]: { $splice: [[removeIndex, 1]] } }
+      })
     : state
 }
 
@@ -68,7 +81,7 @@ function removeLocalUserPlace (place, state, fieldName, settingName) {
  * are fetched separately as soon as user login info is received
  * (from one of the components that uses withLoggedInUserSupport).
  */
-function loadUserFromLocalStorage (config) {
+function loadUserFromLocalStorage(config) {
   const { locations: configLocations = null } = config
 
   // User's home and work locations
@@ -77,16 +90,17 @@ function loadUserFromLocalStorage (config) {
   // Whether recent searches and places should be tracked in local storage.
   const trackRecent = getItem('trackRecent', false)
   // Recent places used in trip plan searches.
-  const recentPlaces = getItem('recent', [])
+  const recentPlaces = getItem('recent', []).map(convertToPlace)
   // List of user's favorite stops.
-  const favoriteStops = getItem('favoriteStops', [])
+  const favoriteStops = getItem('favoriteStops', []).map(convertToPlace)
   // Recent trip plan searches (excluding time/date parameters to avoid complexity).
   const recentSearches = getItem('recentSearches', [])
   // Filter valid locations found into locations list.
-  const locations = [home, work].filter(p => p)
+  const locations = [home, work].filter((p) => p).map(convertToPlace)
+
   // Add configurable locations to home and work locations
   if (configLocations) {
-    locations.push(...configLocations.map(l => ({ ...l, type: 'suggested' })))
+    locations.push(...configLocations.map((l) => ({ ...l, type: 'suggested' })))
   }
   // User overrides determine user's default mode/query parameters.
   const userOverrides = getItem('defaultQuery', {})
@@ -110,7 +124,7 @@ function loadUserFromLocalStorage (config) {
  * Create the initial user state of otp-react-redux using the provided config, any
  * and the user stored in localStorage.
  */
-export function getUserInitialState (config) {
+export function getUserInitialState(config) {
   const localStorageState = loadUserFromLocalStorage(config)
 
   return {
@@ -129,7 +143,7 @@ export function getUserInitialState (config) {
   }
 }
 
-function createUserReducer (config) {
+function createUserReducer(config) {
   const initialState = getUserInitialState(config)
 
   return (state = initialState, action) => {
@@ -183,7 +197,12 @@ function createUserReducer (config) {
       }
 
       case 'DELETE_LOCAL_USER_RECENT_PLACE':
-        return removeLocalUserPlace(action.payload, state, 'recentPlaces', 'recent')
+        return removeLocalUserPlace(
+          action.payload,
+          state,
+          'recentPlaces',
+          'recent'
+        )
 
       case 'DELETE_LOCAL_USER_SAVED_PLACE': {
         // This is used to delete the local user's Home and Work (or other built-in)
@@ -196,15 +215,33 @@ function createUserReducer (config) {
         const { location, type } = action.payload
         switch (type) {
           case 'recent':
-            return rememberLocalUserPlace(location, l => matchLatLon(l, location), sortAndTrim, state, 'recentPlaces', 'recent')
+            return rememberLocalUserPlace(
+              location,
+              (l) => matchLatLon(l, location),
+              sortAndTrim,
+              state,
+              'recentPlaces',
+              'recent'
+            )
           default:
             storeItem(type, location)
-            return rememberLocalUserPlace(location, l => l.type === type, null, state, 'savedLocations')
+            return rememberLocalUserPlace(
+              location,
+              (l) => l.type === type,
+              null,
+              state,
+              'savedLocations'
+            )
         }
       }
 
       case 'FORGET_STOP':
-        return removeLocalUserPlace(action.payload, state, 'favoriteStops', 'favoriteStops')
+        return removeLocalUserPlace(
+          action.payload,
+          state,
+          'favoriteStops',
+          'favoriteStops'
+        )
 
       case 'REMEMBER_STOP': {
         // Payload is stop data. We want to avoid saving other attributes that
@@ -220,10 +257,12 @@ function createUserReducer (config) {
         }
         const favoriteStops = clone(state.localUser.favoriteStops)
         if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          window.alert(
+            `Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`
+          )
           return state
         }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        const index = favoriteStops.findIndex((s) => s.id === stop.id)
         // Do nothing if duplicate stop found.
         if (index !== -1) {
           console.warn(`Stop with id ${stop.id} already exists in favorites.`)
@@ -232,15 +271,28 @@ function createUserReducer (config) {
           favoriteStops.unshift(stop)
         }
         storeItem('favoriteStops', favoriteStops)
-        return update(state, { localUser: { favoriteStops: { $set: favoriteStops } } })
+        return update(state, {
+          localUser: { favoriteStops: { $set: favoriteStops } }
+        })
       }
 
       case 'FORGET_SEARCH':
-        return removeLocalUserPlace(action.payload, state, 'recentSearches', 'recentSearches')
+        return removeLocalUserPlace(
+          action.payload,
+          state,
+          'recentSearches',
+          'recentSearches'
+        )
 
       case 'REMEMBER_SEARCH':
-        return rememberLocalUserPlace(action.payload, s => isEqual(s.query, action.payload.query),
-          sortAndTrim, state, 'recentSearches', 'recentSearches')
+        return rememberLocalUserPlace(
+          action.payload,
+          (s) => isEqual(s.query, action.payload.query),
+          sortAndTrim,
+          state,
+          'recentSearches',
+          'recentSearches'
+        )
 
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)
@@ -253,16 +305,20 @@ function createUserReducer (config) {
           removeItem('recent')
           removeItem('recentSearches')
         }
-        return update(state, { localUser: {
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches },
-          storeTripHistory: { $set: action.payload }
-        } })
+        return update(state, {
+          localUser: {
+            recentPlaces: { $set: recentPlaces },
+            recentSearches: { $set: recentSearches },
+            storeTripHistory: { $set: action.payload }
+          }
+        })
       }
 
       case 'TOGGLE_AUTO_REFRESH':
         storeItem('autoRefreshStopTimes', action.payload)
-        return update(state, { localUser: { autoRefreshStopTimes: { $set: action.payload } } })
+        return update(state, {
+          localUser: { autoRefreshStopTimes: { $set: action.payload } }
+        })
 
       case 'CLEAR_DEFAULT_SETTINGS':
         removeItem('defaultQuery')
@@ -270,7 +326,9 @@ function createUserReducer (config) {
 
       case 'STORE_DEFAULT_SETTINGS':
         storeItem('defaultQuery', action.payload)
-        return update(state, { localUser: { defaults: { $set: action.payload } } })
+        return update(state, {
+          localUser: { defaults: { $set: action.payload } }
+        })
 
       default:
         return state
diff --git a/lib/util/user.js b/lib/util/user.js
index 52d87f353..ef72357c2 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -52,18 +52,6 @@ export const PLACE_TYPES = {
   }
 }
 
-// Defaults for home and work
-const BLANK_HOME = {
-  ...PLACE_TYPES.home,
-  address: '',
-  blank: true
-}
-const BLANK_WORK = {
-  ...PLACE_TYPES.work,
-  address: '',
-  blank: true
-}
-
 /**
  * Moves the 'home' and 'work' locations of the provided user to the beginning of
  * the savedLocations list, so they are always shown at the top of the FavoritePlacesPane.
@@ -74,8 +62,8 @@ export function positionHomeAndWorkFirst(userData, homeName, workName) {
   // Note: cloning is not necessary as the data is obtained from fetch.
   const { savedLocations = [] } = userData
 
-  const homeLocation = savedLocations.find(isHome) || BLANK_HOME
-  const workLocation = savedLocations.find(isWork) || BLANK_WORK
+  const homeLocation = savedLocations.find(isHome) || PLACE_TYPES.home
+  const workLocation = savedLocations.find(isWork) || PLACE_TYPES.work
 
   homeLocation.name = homeName || 'Home'
   workLocation.name = workName || 'Work'
@@ -91,16 +79,27 @@ export function positionHomeAndWorkFirst(userData, homeName, workName) {
   userData.savedLocations = reorderedLocations
 }
 
+/**
+ * Returns the persistence.strategy string if the following apply in config.yml, null otherwise:
+ * - persistence is defined,
+ * - persistence.enabled is true,
+ * - persistence.strategy is defined.
+ */
+export function getPersistenceStrategy(persistence) {
+  return persistence && persistence.enabled && persistence.strategy
+}
+
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
  * - The icon for "Work" places is changed to 'briefcase',
  * - The address attribute is filled with the 'name' if available.
  */
 export function convertToPlace(location) {
-  const { icon, lat, lon, name, type } = location
+  const { icon, id, lat, lon, name, type } = location
   return {
     address: name,
     icon: isWork(location) ? 'briefcase' : icon,
+    id,
     lat,
     lon,
     name: formatStoredPlaceName(location, false),
@@ -108,25 +107,16 @@ export function convertToPlace(location) {
   }
 }
 
-/**
- * Returns the persistence.strategy string if the following apply in config.yml, null otherwise:
- * - persistence is defined,
- * - persistence.enabled is true,
- * - persistence.strategy is defined.
- */
-export function getPersistenceStrategy(persistence) {
-  return persistence && persistence.enabled && persistence.strategy
-}
-
 /**
  * Convert an entry from persisted user savedLocations into LocationField locations:
  * - The icon for "Work" places is changed to 'work',
  * - The name attribute is filled with the place address.
  */
-export function convertToLocation(place) {
-  const { address, icon, lat, lon, name, type } = place
+export function convertToLegacyLocation(place) {
+  const { address, icon, id, lat, lon, name, type } = place
   return {
     icon: isWork(place) ? 'work' : icon,
+    id,
     lat,
     lon,
     name: address || name,
@@ -142,7 +132,7 @@ export function getOtpUiLocations(loggedInUser) {
   return loggedInUser
     ? loggedInUser.savedLocations
         .filter((place) => !isBlank(place.address))
-        .map(convertToLocation)
+        .map(convertToLegacyLocation)
     : []
 }
 
@@ -164,11 +154,10 @@ export function getPlaceBasePath(isCreating) {
  *   Home
  *   Set your home address
  */
-export function getPlaceDetail(place, intl, isUsingOtpMiddleware) {
-  // intl.formatMessage is used because this text can appear in tooltips.
-  // FIXME_QBD: unify the two location models.
+export function getPlaceDetail(place, intl) {
   return (
-    (isUsingOtpMiddleware ? place.address : place.name) ||
+    place.address ||
+    // intl.formatMessage is used because this text can appear in tooltips.
     intl.formatMessage(
       { id: 'components.FavoritePlaceList.setAddressForPlaceType' },
       { placeType: getFormattedPlaces(place.type, intl) }
@@ -187,13 +176,10 @@ export function getPlaceDetail(place, intl, isUsingOtpMiddleware) {
  *   Mom's house
  *   123 Main Street
  */
-export function getPlaceMainText(place, intl, isUsingOtpMiddleware) {
-  // FIXME_QBD: unify the two location models.
+export function getPlaceMainText(place, intl) {
   // Use toSentenceCase (and not text-transform: capitalize)
-  // to change the first char. of the work and home locations only (which come in lowercase).
+  // to change the first character of the work and home locations only (which come in lowercase).
   return isHomeOrWork(place)
-    ? toSentenceCase(
-        isUsingOtpMiddleware ? place.name : getFormattedPlaces(place.type, intl)
-      )
+    ? toSentenceCase(getFormattedPlaces(place.type, intl))
     : place.name || place.address
 }

From 46e67c33586931a4bf67960af05245df3520ff94 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 26 Jan 2022 16:53:02 -0500
Subject: [PATCH 136/270] refactor(locale-selector, package.json): Add content
 to locale-selector wrapper css, update package.

---
 lib/components/app/locale-selector.tsx | 1 +
 package.json                           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index cb993c196..677a08986 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -25,6 +25,7 @@ const FLAG_ICON_MAPPING: Record<string, React.ReactElement> = {
 
 const FlagContainer = styled.span`
   &::after {
+    content: '';
     margin: 0 0.125em;
   }
 `
diff --git a/package.json b/package.json
index 74415c515..18165c6c8 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "clone": "^2.1.0",
     "connected-react-router": "^6.8.0",
     "copy-to-clipboard": "^3.0.8",
+    "country-flag-icons": "^1.4.19",
     "currency-formatter": "^1.4.2",
     "d3-selection": "^1.3.0",
     "d3-zoom": "^1.7.1",

From aef79eb83a74b5c4bba1132ef79cbad1e33d7e1a Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 26 Jan 2022 16:57:16 -0500
Subject: [PATCH 137/270] refactor(Yarn.lock): Update yarn.lock file

---
 yarn.lock | 69 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 16b8684b0..0c4bd2e97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -386,6 +386,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
   integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -419,6 +424,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.1.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.8.tgz#61c243a3875f7d0b0962b0543a33ece6ff2f1f17"
+  integrity sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==
+
 "@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
@@ -1417,6 +1427,14 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.3.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -3169,7 +3187,22 @@
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
 
-"@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
   version "7.14.2"
   resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
   integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
@@ -3602,30 +3635,6 @@
     "@typescript-eslint/types" "4.30.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vue/compiler-core@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.6.tgz#7162bb0670273f04566af0d353009187ab577915"
-  integrity sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@babel/types" "^7.15.0"
-    "@vue/shared" "3.2.6"
-    estree-walker "^2.0.2"
-    source-map "^0.6.1"
-
-"@vue/compiler-dom@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz#3764d7fe1a696e39fb2a3c9d638da0749e369b2d"
-  integrity sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==
-  dependencies:
-    "@vue/compiler-core" "3.2.6"
-    "@vue/shared" "3.2.6"
-
-"@vue/shared@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.6.tgz#2c22bae88fe2b7b59fa68a9c9c4cd60bae2c1794"
-  integrity sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw==
-
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -6962,6 +6971,11 @@ country-flag-icons@^1.0.2:
   resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.4.7.tgz#6f9acb18fae373528ba38834ba80e30084f24e7f"
   integrity sha512-tsF7fPalAub3f328OcZL6sUxC+g7Ndua+M4xXCm+Q3f/p2XtNmJNrZTopA9iyS82ddYyKZ5ClPZUhifWv6fn2g==
 
+country-flag-icons@^1.4.19:
+  version "1.4.19"
+  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.4.19.tgz#410879a4a1b06ab28d4fc56261b391f221eba957"
+  integrity sha512-1hmXFJ4UURQt0Ex0990B7oOL4n9KLpT9NOSEmZoYh+/5DQ7/pikyqaptqCLUFFv/bYHyvYFeo0fqV82XxU6VOA==
+
 craco-fast-refresh@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/craco-fast-refresh/-/craco-fast-refresh-1.1.0.tgz#0e672ffb63b7428c8e79566e81d8107f10291ac6"
@@ -8793,11 +8807,6 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
-  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"

From 796425b94eb6898da889cb42014914cc488b9dc8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 26 Jan 2022 17:08:49 -0500
Subject: [PATCH 138/270] refactor: Add isOtpMiddleware, remove unused props.

---
 lib/actions/api.js                           |  9 ++-------
 lib/components/app/batch-routing-panel.js    | 16 +---------------
 lib/components/form/batch-settings.js        | 13 +++----------
 lib/components/form/user-settings.js         | 19 +++++--------------
 lib/components/form/user-trip-settings.js    |  2 +-
 lib/components/user/places/place-shortcut.js | 12 ++++--------
 lib/util/auth.js                             | 10 ++++------
 lib/util/user.js                             | 13 ++++++++++++-
 8 files changed, 32 insertions(+), 62 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index f16ef5ea0..d91b042f4 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -11,10 +11,9 @@ import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
 import qs from 'qs'
 
-import { convertToPlace, getPersistenceStrategy } from '../util/user'
+import { convertToPlace, isOtpMiddleware } from '../util/user'
 import { getSecureFetchOptions } from '../util/middleware'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
-import { PERSIST_TO_OTP_MIDDLEWARE } from '../util/constants'
 
 import { fetchTripRequests, rememberPlace } from './user'
 import { ItineraryView, setItineraryView } from './ui'
@@ -102,11 +101,7 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
     // FIXME: batchId is searchId for now.
     const state = getState()
     const { currentQuery } = state.otp
-    const persistenceStrategy = getPersistenceStrategy(
-      state.otp.config.persistence
-    )
-    const isUsingOtpMiddleware =
-      persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
+    const isUsingOtpMiddleware = isOtpMiddleware(state.otp.config.persistence)
 
     const isNewSearch = !searchId
     if (isNewSearch) searchId = randId()
diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index 2bb8424bf..64c3ccce1 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -4,8 +4,6 @@ import { injectIntl } from 'react-intl'
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
-import * as apiActions from '../../actions/api'
-import * as formActions from '../../actions/form'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
 import BatchSettings from '../form/batch-settings'
 import LocationField from '../form/connected-location-field'
@@ -88,20 +86,8 @@ const mapStateToProps = (state) => {
   const showUserSettings = getShowUserSettings(state)
   return {
     activeSearch: getActiveSearch(state),
-    config: state.otp.config,
-    currentQuery: state.otp.currentQuery,
-    expandAdvanced: state.user.localUser.expandAdvanced,
-    possibleCombinations: state.otp.config.modes.combinations,
     showUserSettings
   }
 }
 
-const mapDispatchToProps = {
-  routingQuery: apiActions.routingQuery,
-  setQueryParam: formActions.setQueryParam
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(injectIntl(BatchRoutingPanel))
+export default connect(mapStateToProps)(injectIntl(BatchRoutingPanel))
diff --git a/lib/components/form/batch-settings.js b/lib/components/form/batch-settings.js
index 4bf76996b..5d9cad04d 100644
--- a/lib/components/form/batch-settings.js
+++ b/lib/components/form/batch-settings.js
@@ -7,11 +7,7 @@ import styled from 'styled-components'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
-import {
-  getActiveSearch,
-  getShowUserSettings,
-  hasValidLocation
-} from '../../util/state'
+import { hasValidLocation } from '../../util/state'
 import Icon from '../util/icon'
 
 import {
@@ -204,14 +200,11 @@ class BatchSettings extends Component {
 }
 
 // connect to the redux store
-const mapStateToProps = (state, ownProps) => {
-  const showUserSettings = getShowUserSettings(state)
+const mapStateToProps = (state) => {
   return {
-    activeSearch: getActiveSearch(state),
     config: state.otp.config,
     currentQuery: state.otp.currentQuery,
-    possibleCombinations: state.otp.config.modes.combinations,
-    showUserSettings
+    possibleCombinations: state.otp.config.modes.combinations
   }
 }
 
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 08550ba42..d00a6b356 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -13,14 +13,13 @@ import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { getFormattedPlaces } from '../../util/i18n'
 import {
-  getPersistenceStrategy,
   getPlaceDetail,
   getPlaceMainText,
   isHome,
+  isOtpMiddleware,
   isWork
 } from '../../util/user'
 import { LinkWithQuery } from '../form/connected-links'
-import { PERSIST_TO_OTP_MIDDLEWARE } from '../../util/constants'
 import { StyledMainPanelPlace } from '../user/places/styled'
 import PlaceShortcut from '../user/places/place-shortcut'
 
@@ -226,15 +225,13 @@ class UserSettings extends Component {
       className,
       forgetSearch,
       intl,
+      isUsingOtpMiddleware,
       localUser,
       loggedInUser,
       loggedInUserTripRequests,
-      persistenceStrategy,
       setQueryParam,
       style
     } = this.props
-    const isUsingOtpMiddleware =
-      persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
     const userNotLoggedIn = isUsingOtpMiddleware && !loggedInUser
     if (userNotLoggedIn) return null
 
@@ -400,20 +397,14 @@ const RecentTrips = ({
 // connect to redux store
 
 const mapStateToProps = (state) => {
-  const { config, currentQuery, location, transitIndex } = state.otp
-  const { currentPosition, nearbyStops, sessionSearches } = location
+  const { config, currentQuery } = state.otp
   const { localUser, loggedInUser, loggedInUserTripRequests } = state.user
   return {
-    config,
-    currentPosition,
+    isUsingOtpMiddleware: isOtpMiddleware(config.persistence),
     localUser,
     loggedInUser,
     loggedInUserTripRequests,
-    nearbyStops,
-    persistenceStrategy: getPersistenceStrategy(config.persistence),
-    query: currentQuery,
-    sessionSearches,
-    stopsIndex: transitIndex.stops
+    query: currentQuery
   }
 }
 
diff --git a/lib/components/form/user-trip-settings.js b/lib/components/form/user-trip-settings.js
index a95e4c879..55f09ff0a 100644
--- a/lib/components/form/user-trip-settings.js
+++ b/lib/components/form/user-trip-settings.js
@@ -76,7 +76,7 @@ class UserTripSettings extends Component {
 
 // connect to redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const { config, currentQuery } = state.otp
   const { defaults } = state.user.localUser
 
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index 67f087dc8..f29c46159 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -6,13 +6,9 @@ import React, { Component } from 'react'
 
 import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
-import {
-  convertToLegacyLocation,
-  getPersistenceStrategy
-} from '../../../util/user'
+import { convertToLegacyLocation, isOtpMiddleware } from '../../../util/user'
 import { getFormattedPlaces } from '../../../util/i18n'
 import { isBlank } from '../../../util/ui'
-import { PERSIST_TO_OTP_MIDDLEWARE } from '../../../util/constants'
 
 import { StyledMainPanelPlace } from './styled'
 
@@ -41,9 +37,9 @@ class PlaceShortcut extends Component {
   }
 
   _onSelect = () => {
-    const { index, intl, persistenceStrategy, place, routeTo } = this.props
+    const { index, intl, isOtpMiddleware, place, routeTo } = this.props
     if (isBlank(place.address)) {
-      if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
+      if (isOtpMiddleware) {
         routeTo(`/account/places/${index}`)
       } else {
         window.alert(
@@ -93,7 +89,7 @@ const mapStateToProps = (state) => {
   const { config, currentQuery: query } = state.otp
   const { persistence } = config
   return {
-    persistenceStrategy: getPersistenceStrategy(persistence),
+    isOtpMiddleware: isOtpMiddleware(persistence),
     query
   }
 }
diff --git a/lib/util/auth.js b/lib/util/auth.js
index 527cf3e64..da6f5b93b 100644
--- a/lib/util/auth.js
+++ b/lib/util/auth.js
@@ -1,5 +1,5 @@
-import { ACCOUNT_PATH, PERSIST_TO_OTP_MIDDLEWARE } from './constants'
-import { getPersistenceStrategy } from './user'
+import { ACCOUNT_PATH } from './constants'
+import { isOtpMiddleware } from './user'
 
 /**
  * Custom links under the user account dropdown.
@@ -26,8 +26,6 @@ export const accountLinks = [
  * @param persistence The OTP persistence configuration from config.yml.
  * @returns The Auth0 configuration, or null if the conditions are not met.
  */
-export function getAuth0Config (persistence) {
-  return getPersistenceStrategy(persistence) === PERSIST_TO_OTP_MIDDLEWARE
-    ? persistence.auth0
-    : null
+export function getAuth0Config(persistence) {
+  return isOtpMiddleware(persistence) ? persistence.auth0 : null
 }
diff --git a/lib/util/user.js b/lib/util/user.js
index ef72357c2..c5e3f9f74 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -1,6 +1,10 @@
 import coreUtils from '@opentripplanner/core-utils'
 
-import { CREATE_ACCOUNT_PLACES_PATH, PLACES_PATH } from './constants'
+import {
+  CREATE_ACCOUNT_PLACES_PATH,
+  PERSIST_TO_OTP_MIDDLEWARE,
+  PLACES_PATH
+} from './constants'
 import { getFormattedPlaces } from './i18n'
 import { isBlank } from './ui'
 
@@ -89,6 +93,13 @@ export function getPersistenceStrategy(persistence) {
   return persistence && persistence.enabled && persistence.strategy
 }
 
+/**
+ * @returns true if the persistence strategy is OTP middleware, false otherwise.
+ */
+export function isOtpMiddleware(persistence) {
+  return getPersistenceStrategy(persistence) === PERSIST_TO_OTP_MIDDLEWARE
+}
+
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
  * - The icon for "Work" places is changed to 'briefcase',

From aa2c70f05660867d31ecabd6c02e9d628ba3eb0f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 26 Jan 2022 17:12:07 -0500
Subject: [PATCH 139/270] refactor: Revert linted files with no PR changes.

---
 lib/components/user/account-page.js         | 23 +++++++++++----------
 lib/components/user/back-to-trip-planner.js |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/components/user/account-page.js b/lib/components/user/account-page.js
index bad582de8..4c7042e63 100644
--- a/lib/components/user/account-page.js
+++ b/lib/components/user/account-page.js
@@ -1,8 +1,7 @@
-/* eslint-disable react/prop-types */
-import { connect } from 'react-redux'
-import { replace } from 'connected-react-router'
 import { withAuthenticationRequired } from '@auth0/auth0-react'
+import { replace } from 'connected-react-router'
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import * as uiActions from '../../actions/ui'
 import {
@@ -11,10 +10,9 @@ import {
   CREATE_ACCOUNT_VERIFY_PATH
 } from '../../util/constants'
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
+import withLoggedInUserSupport from './with-logged-in-user-support'
 import AppFrame from '../app/app-frame'
-
 import SubNav from './sub-nav'
-import withLoggedInUserSupport from './with-logged-in-user-support'
 
 /**
  * This component contains common navigation elements and wrappers and should
@@ -36,13 +34,17 @@ class AccountPage extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this._checkAccountCreated()
   }
 
-  render() {
-    const { children, subnav = true } = this.props
-    return <AppFrame SubNav={subnav && SubNav}>{children}</AppFrame>
+  render () {
+    const {children, subnav = true} = this.props
+    return (
+      <AppFrame SubNav={subnav && SubNav}>
+        {children}
+      </AppFrame>
+    )
   }
 }
 
@@ -52,8 +54,7 @@ const mapStateToProps = (state, ownProps) => {
   const currentPath = state.router.location.pathname
   return {
     isTermsOrVerifyPage:
-      currentPath === CREATE_ACCOUNT_TERMS_PATH ||
-      currentPath === CREATE_ACCOUNT_VERIFY_PATH,
+      currentPath === CREATE_ACCOUNT_TERMS_PATH || currentPath === CREATE_ACCOUNT_VERIFY_PATH,
     loggedInUser: state.user.loggedInUser
   }
 }
diff --git a/lib/components/user/back-to-trip-planner.js b/lib/components/user/back-to-trip-planner.js
index feb5bec1d..094034308 100644
--- a/lib/components/user/back-to-trip-planner.js
+++ b/lib/components/user/back-to-trip-planner.js
@@ -12,7 +12,7 @@ const StyledLinkWithQuery = styled(LinkWithQuery)`
 
 const BackToTripPlanner = () => (
   <StyledLinkWithQuery to={'/'}>
-    <IconWithMargin type='arrow-left' />
+    <IconWithMargin name='arrow-left' />
     <FormattedMessage id='components.BackToTripPlanner.backToTripPlanner' />
   </StyledLinkWithQuery>
 )

From f09c7cc3a0993e4411897503d58dac86d1eb2636 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 26 Jan 2022 17:57:48 -0500
Subject: [PATCH 140/270] refactor(UserSettings): Fix func name typo.

---
 lib/components/form/user-settings.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index d00a6b356..7baf07323 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -58,10 +58,10 @@ function summarizeQuery(query, intl, locations = []) {
 }
 
 /**
- * Formats ellapsed time from the specified timestamp to now,
+ * Formats elapsed time from the specified timestamp to now,
  * as in "5 hours ago" or the localized equivalent.
  */
-function formatEllapsedTime(timestamp, intl) {
+function formatElapsedTime(timestamp, intl) {
   // This text will be shown in a tooltip, therefore
   // it is obtained using formaMessage rather than <FormattedfMessage>.
   const fromNowDur = moment.duration(moment().diff(moment(timestamp)))
@@ -141,7 +141,7 @@ class UserSettings extends Component {
         {storeTripHistory && (
           <Places
             getDetailText={(location) => {
-              return formatEllapsedTime(location.timestamp, intl)
+              return formatElapsedTime(location.timestamp, intl)
             }}
             getMainText={(location) => location.address}
             header={
@@ -349,7 +349,7 @@ const TripRequest = ({ forgetSearch, setQueryParam, tripRequest, user }) => {
   return (
     <StyledMainPanelPlace
       className="place-item"
-      detailText={formatEllapsedTime(timestamp, intl)}
+      detailText={formatElapsedTime(timestamp, intl)}
       icon="clock-o"
       mainText={mainText}
       onClick={_onSelect}

From 60cf294f0ba322fc445402e7fcd877147f78e259 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 26 Jan 2022 20:47:27 -0500
Subject: [PATCH 141/270] refactor(util/user): Add getPersistenceMode helper.

---
 lib/actions/user.js                           | 21 +++---
 lib/components/form/connect-location-field.js | 17 ++---
 .../map/connected-endpoints-overlay.js        | 18 +----
 lib/components/viewers/stop-viewer.js         | 65 +++++++++++--------
 lib/util/user.js                              | 43 +++++++++---
 5 files changed, 86 insertions(+), 78 deletions(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index c03aa7ec1..5f650df4d 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -7,20 +7,15 @@ import qs from 'qs'
 
 import {
   convertToPlace,
-  getPersistenceStrategy,
+  getPersistenceMode,
   isHomeOrWork,
   isNewUser,
   positionHomeAndWorkFirst
 } from '../util/user'
 import { isBatchRoutingEnabled } from '../util/itinerary'
 import { isBlank } from '../util/ui'
-import {
-  PERSIST_TO_LOCAL_STORAGE,
-  PERSIST_TO_OTP_MIDDLEWARE,
-  TRIPS_PATH,
-  URL_ROOT
-} from '../util/constants'
 import { secureFetch } from '../util/middleware'
+import { TRIPS_PATH, URL_ROOT } from '../util/constants'
 
 import { routeTo } from './ui'
 import { routingQuery } from './api'
@@ -738,10 +733,10 @@ export function deleteLoggedInUserPlace(placeIndex, intl) {
 export function deleteUserPlace(place, intl) {
   return function (dispatch, getState) {
     const { otp, user } = getState()
-    const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
+    const persistenceMode = getPersistenceMode(otp.config.persistence)
     const { loggedInUser } = user
 
-    if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE && loggedInUser) {
+    if (persistenceMode.isOtpMiddleware && loggedInUser) {
       // Find the index of the place in the loggedInUser.savedLocations
 
       // If 'Forget home' or 'Forget work' links from OTP UI's EndPointOverlay/EndPoint
@@ -754,7 +749,7 @@ export function deleteUserPlace(place, intl) {
       if (placeIndex > -1) {
         dispatch(deleteLoggedInUserPlace(placeIndex, intl))
       }
-    } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
+    } else if (persistenceMode.isLocalStorage) {
       dispatch(deleteLocalUserSavedPlace(place))
     }
   }
@@ -767,10 +762,10 @@ export function deleteUserPlace(place, intl) {
 export function rememberPlace(placeTypeLocation) {
   return function (dispatch, getState) {
     const { otp, user } = getState()
-    const persistenceStrategy = getPersistenceStrategy(otp.config.persistence)
+    const persistenceMode = getPersistenceMode(otp.config.persistence)
     const { loggedInUser } = user
 
-    if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE && loggedInUser) {
+    if (persistenceMode.isOtpMiddleware && loggedInUser) {
       // For middleware loggedInUsers, this method should only be triggered by the
       // 'Save as home' or 'Save as work' links from OTP UI's EndPointOverlay/EndPoint.
       const { location } = placeTypeLocation
@@ -784,7 +779,7 @@ export function rememberPlace(placeTypeLocation) {
           dispatch(saveUserPlace(convertToPlace(location), placeIndex))
         }
       }
-    } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
+    } else if (persistenceMode.isLocalStorage) {
       dispatch(rememberLocalUserPlace(placeTypeLocation))
     }
   }
diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index 19f749ba1..b7745fc2c 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -6,11 +6,7 @@ import React from 'react'
 import * as apiActions from '../../actions/api'
 import * as locationActions from '../../actions/location'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
-import { getOtpUiLocations, getPersistenceStrategy } from '../../util/user'
-import {
-  PERSIST_TO_LOCAL_STORAGE,
-  PERSIST_TO_OTP_MIDDLEWARE
-} from '../../util/constants'
+import { getUserLocations } from '../../util/user'
 import Icon from '../util/icon'
 
 /**
@@ -59,14 +55,9 @@ export default function connectLocationField(
     let userSavedLocations = []
     let recentPlaces = []
     if (!excludeSavedLocations) {
-      const { localUser, loggedInUser } = state.user
-      const persistenceStrategy = getPersistenceStrategy(config.persistence)
-      if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
-        userSavedLocations = getOtpUiLocations(loggedInUser)
-      } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-        userSavedLocations = localUser.savedLocations
-        recentPlaces = localUser.recentPlaces
-      }
+      const userLocations = getUserLocations(state)
+      userSavedLocations = userLocations.saved
+      recentPlaces = userLocations.recent
     }
 
     const geocoderConfig = config.geocoder
diff --git a/lib/components/map/connected-endpoints-overlay.js b/lib/components/map/connected-endpoints-overlay.js
index b7a48b431..7af1c562f 100644
--- a/lib/components/map/connected-endpoints-overlay.js
+++ b/lib/components/map/connected-endpoints-overlay.js
@@ -6,11 +6,7 @@ import React, { useCallback } from 'react'
 
 import { clearLocation, forgetPlace, setLocation } from '../../actions/map'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
-import { getOtpUiLocations, getPersistenceStrategy } from '../../util/user'
-import {
-  PERSIST_TO_LOCAL_STORAGE,
-  PERSIST_TO_OTP_MIDDLEWARE
-} from '../../util/constants'
+import { getUserLocations } from '../../util/user'
 import { rememberPlace } from '../../actions/user'
 
 const ConnectedEndpointsOverlay = (props) => {
@@ -46,21 +42,11 @@ const mapStateToProps = (state) => {
   // Intermediate places doesn't trigger a re-plan, so for now default to
   // current query. FIXME: Determine with TriMet if this is desired behavior.
   const places = state.otp.currentQuery.intermediatePlaces.filter((p) => p)
-  const { localUser, loggedInUser } = state.user
-
-  const { persistence } = state.otp.config
-  const persistenceStrategy = getPersistenceStrategy(persistence)
-  let userSavedLocations = []
-  if (persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE) {
-    userSavedLocations = getOtpUiLocations(loggedInUser)
-  } else if (persistenceStrategy === PERSIST_TO_LOCAL_STORAGE) {
-    userSavedLocations = localUser.savedLocations
-  }
 
   return {
     fromLocation: from,
     intermediatePlaces: places,
-    locations: userSavedLocations,
+    locations: getUserLocations(state).saved,
     showUserSettings,
     toLocation: to,
     visible: true
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 431d7918b..78f449680 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -1,5 +1,4 @@
-// REMOVE THIS LINE BEFORE EDITING THIS FILE
-/* eslint-disable  */
+/* eslint-disable react/prop-types */
 import 'moment-timezone'
 import { Alert, Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
@@ -15,16 +14,15 @@ import * as apiActions from '../../actions/api'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
-import { PERSIST_TO_LOCAL_STORAGE } from '../../util/constants'
+import { getPersistenceMode } from '../../util/user'
 import { getShowUserSettings, getStopViewerConfig } from '../../util/state'
-import { getPersistenceStrategy } from '../../util/user'
 import { navigateBack } from '../../util/ui'
+import { stopIsFlex } from '../../util/viewer'
 import Icon from '../util/icon'
 import Strong from '../util/strong-text'
 
-import StopScheduleTable from './stop-schedule-table'
 import LiveStopTimes from './live-stop-times'
-import { stopIsFlex } from '../../util/viewer'
+import StopScheduleTable from './stop-schedule-table'
 
 const { getUserTimezone, OTP_API_DATE_FORMAT } = coreUtils.time
 
@@ -127,7 +125,8 @@ class StopViewer extends Component {
   }
 
   _renderHeader = () => {
-    const { enableFavoriteStops, hideBackButton, showUserSettings, stopData } = this.props
+    const { enableFavoriteStops, hideBackButton, showUserSettings, stopData } =
+      this.props
     return (
       <div className="stop-viewer-header">
         {/* Back button */}
@@ -149,7 +148,7 @@ class StopViewer extends Component {
               <FormattedMessage id="components.StopViewer.loadingText" />
             </span>
           )}
-          {(showUserSettings && enableFavoriteStops) ? (
+          {showUserSettings && enableFavoriteStops ? (
             <Button
               bsSize="large"
               bsStyle="link"
@@ -174,8 +173,8 @@ class StopViewer extends Component {
    * TODO: Can this use SetFromToButtons?
    */
   _renderControls = () => {
-    const {homeTimezone, intl, stopData} = this.props
-    const {scheduleView} = this.state
+    const { homeTimezone, intl, stopData } = this.props
+    const { scheduleView } = this.state
     const userTimeZone = getUserTimezone()
     const inHomeTimezone = homeTimezone && homeTimezone === userTimeZone
 
@@ -217,21 +216,25 @@ class StopViewer extends Component {
           <button
             className="link-button"
             onClick={this._zoomToStop}
-            title={intl.formatMessage({id: 'components.StopViewer.zoomToStop'})}
+            title={intl.formatMessage({
+              id: 'components.StopViewer.zoomToStop'
+            })}
           >
             <Icon type="search" />
           </button>
-          {!isFlex && <button
-            className="link-button pull-right"
-            onClick={this._toggleScheduleView}
-            style={{ fontSize: 'small' }}
-          >
-            <Icon type={scheduleView ? 'clock-o' : 'calendar'} withSpace />
-            <FormattedMessage
-              id="components.StopViewer.viewTypeBtnText"
-              values={{ scheduleView }}
-            />
-          </button>}
+          {!isFlex && (
+            <button
+              className="link-button pull-right"
+              onClick={this._toggleScheduleView}
+              style={{ fontSize: 'small' }}
+            >
+              <Icon type={scheduleView ? 'clock-o' : 'calendar'} withSpace />
+              <FormattedMessage
+                id="components.StopViewer.viewTypeBtnText"
+                values={{ scheduleView }}
+              />
+            </button>
+          )}
         </div>
         <b>
           <FormattedMessage id="components.StopViewer.planTrip" />
@@ -298,7 +301,11 @@ class StopViewer extends Component {
          not shown while stopData is loading
          */
       if (stopIsFlex(stopData)) {
-        contents = <div style={{lineHeight:'normal'}}><FormattedMessage id="components.StopViewer.flexStop" /></div>
+        contents = (
+          <div style={{ lineHeight: 'normal' }}>
+            <FormattedMessage id="components.StopViewer.flexStop" />
+          </div>
+        )
       }
     } else if (scheduleView) {
       contents = (
@@ -347,18 +354,19 @@ class StopViewer extends Component {
 
 // connect to redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const showUserSettings = getShowUserSettings(state)
   const stopViewerConfig = getStopViewerConfig(state)
   const { config, transitIndex, ui } = state.otp
-  const { homeTimezone, language, persistence, stopViewer, transitOperators } = config
+  const { homeTimezone, language, persistence, stopViewer, transitOperators } =
+    config
   const { autoRefreshStopTimes, favoriteStops } = state.user.localUser
   const stopLookup = transitIndex.stops
   const stopData = stopLookup[ui.viewedStop.stopId]
   const nearbyStops = stopData?.nearbyStops?.map((stopId) => stopLookup[stopId])
   return {
     autoRefreshStopTimes,
-    enableFavoriteStops: getPersistenceStrategy(persistence) === PERSIST_TO_LOCAL_STORAGE,
+    enableFavoriteStops: getPersistenceMode(persistence).isLocalStorage,
     favoriteStops,
     homeTimezone,
     nearbyStops,
@@ -384,4 +392,7 @@ const mapDispatchToProps = {
   zoomToStop: mapActions.zoomToStop
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(StopViewer))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(StopViewer))
diff --git a/lib/util/user.js b/lib/util/user.js
index c5e3f9f74..43b783af1 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -2,6 +2,7 @@ import coreUtils from '@opentripplanner/core-utils'
 
 import {
   CREATE_ACCOUNT_PLACES_PATH,
+  PERSIST_TO_LOCAL_STORAGE,
   PERSIST_TO_OTP_MIDDLEWARE,
   PLACES_PATH
 } from './constants'
@@ -89,7 +90,7 @@ export function positionHomeAndWorkFirst(userData, homeName, workName) {
  * - persistence.enabled is true,
  * - persistence.strategy is defined.
  */
-export function getPersistenceStrategy(persistence) {
+function getPersistenceStrategy(persistence) {
   return persistence && persistence.enabled && persistence.strategy
 }
 
@@ -100,6 +101,17 @@ export function isOtpMiddleware(persistence) {
   return getPersistenceStrategy(persistence) === PERSIST_TO_OTP_MIDDLEWARE
 }
 
+/**
+ * Constructs information regarding the persistence strategy.
+ */
+export function getPersistenceMode(persistence) {
+  const persistenceStrategy = getPersistenceStrategy(persistence)
+  return {
+    isLocalStorage: persistenceStrategy === PERSIST_TO_LOCAL_STORAGE,
+    isOtpMiddleware: persistenceStrategy === PERSIST_TO_OTP_MIDDLEWARE
+  }
+}
+
 /**
  * Convert a LocationField entry to a persisted user savedLocations:
  * - The icon for "Work" places is changed to 'briefcase',
@@ -136,15 +148,28 @@ export function convertToLegacyLocation(place) {
 }
 
 /**
- * Remove entries with blank addresses, and convert entries
- * from persisted user savedLocations into LocationField/EndpointOverlay locations.
+ * Obtains the saved and recent locations based on the redux state.
  */
-export function getOtpUiLocations(loggedInUser) {
-  return loggedInUser
-    ? loggedInUser.savedLocations
-        .filter((place) => !isBlank(place.address))
-        .map(convertToLegacyLocation)
-    : []
+export function getUserLocations(state) {
+  let saved = []
+  let recent = []
+
+  const { persistence } = state.otp.config
+  const { localUser, loggedInUser } = state.user
+  const persistenceMode = getPersistenceMode(persistence)
+  if (persistenceMode.isOtpMiddleware) {
+    saved = loggedInUser.savedLocations
+      .filter((place) => !isBlank(place.address))
+      .map(convertToLegacyLocation)
+  } else if (persistenceMode.isLocalStorage) {
+    saved = localUser.savedLocations
+    recent = localUser.recentPlaces
+  }
+
+  return {
+    recent,
+    saved
+  }
 }
 
 /**

From f1ada5ebbe25fb1a82a9648e675740c3c50a4f27 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 08:13:08 -0500
Subject: [PATCH 142/270] chore: run autoformatter

---
 lib/reducers/create-otp-reducer.js | 324 +++++++++++++++++------------
 1 file changed, 190 insertions(+), 134 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 914a05a2e..5dfd53c7e 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -1,22 +1,20 @@
+/* eslint-disable no-case-declarations */
 import clone from 'clone'
-import update from 'immutability-helper'
+import coreUtils from '@opentripplanner/core-utils'
 import isEqual from 'lodash.isequal'
 import objectPath from 'object-path'
-import coreUtils from '@opentripplanner/core-utils'
+import update from 'immutability-helper'
 
+import { FETCH_STATUS } from '../util/constants'
+import { getTimestamp } from '../util/state'
+import { isBatchRoutingEnabled } from '../util/itinerary'
 import { MainPanelContent, MobileScreens } from '../actions/ui'
-import {FETCH_STATUS} from '../util/constants'
-import {getTimestamp} from '../util/state'
-import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { getTransitModes, isTransit } = coreUtils.itinerary
 const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
-const {
-  ensureSingleAccessMode,
-  getDefaultQuery,
-  getTripOptionsFromQuery
-} = coreUtils.query
+const { ensureSingleAccessMode, getDefaultQuery, getTripOptionsFromQuery } =
+  coreUtils.query
 const { getItem, removeItem, storeItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
@@ -31,8 +29,8 @@ const MAX_RECENT_STORAGE = 5
  * TODO: maybe it's a better idea to move all of this to a script that can do
  *  JSON Schema validation and other stuff.
  */
-function validateInitialState (initialState) {
-  const {config} = initialState
+function validateInitialState(initialState) {
+  const { config } = initialState
 
   const errors = []
 
@@ -45,17 +43,18 @@ function validateInitialState (initialState) {
     objectPath.get(config, 'persistence.strategy') === 'localStorage' &&
     objectPath.get(config, 'geocoder.type') === 'ARCGIS'
   ) {
-    errors.push(new Error('Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'))
+    errors.push(
+      new Error(
+        'Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'
+      )
+    )
   }
 
   if (errors.length > 0) {
     throw new Error(
-      errors.reduce(
-        (message, error) => {
-          return `${message}\n- ${error.message}`
-        },
-        'Encountered the following configuration errors:'
-      )
+      errors.reduce((message, error) => {
+        return `${message}\n- ${error.message}`
+      }, 'Encountered the following configuration errors:')
     )
   }
 }
@@ -64,7 +63,7 @@ function validateInitialState (initialState) {
  * Create the initial state of otp-react-redux using user-provided config, any
  * items in localStorage and a few defaults.
  */
-export function getInitialState (userDefinedConfig) {
+export function getInitialState(userDefinedConfig) {
   const defaultConfig = {
     autoPlan: {
       default: 'ONE_LOCATION_CHANGED',
@@ -131,14 +130,16 @@ export function getInitialState (userDefinedConfig) {
   // Recent trip plan searches (excluding time/date parameters to avoid complexity).
   const recentSearches = getItem('recentSearches', [])
   // Filter valid locations found into locations list.
-  const locations = [home, work].filter(p => p)
+  const locations = [home, work].filter((p) => p)
   // TODO: parse and merge URL query params w/ default query
 
   // populate query by merging any provided query params w/ the default params
   const currentQuery = Object.assign(defaults, userDefinedConfig.initialQuery)
   // Add configurable locations to home and work locations
   if (config.locations) {
-    locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
+    locations.push(
+      ...config.locations.map((l) => ({ ...l, type: 'suggested' }))
+    )
   }
   // Check for alternative routerId in session storage. This is generally used
   // for testing single GTFS feed OTP graphs that are deployed to feed-specific
@@ -159,7 +160,7 @@ export function getInitialState (userDefinedConfig) {
   // If 'TRANSIT' is included in the mode list, replace it with individual modes
   if (queryModes.includes('TRANSIT')) {
     // Isolate the non-transit modes in queryModes
-    queryModes = queryModes.filter(m => !isTransit(m))
+    queryModes = queryModes.filter((m) => !isTransit(m))
     // Add all possible transit modes
     queryModes = queryModes.concat(getTransitModes(config))
     // Stringify and set as OTP 'mode' query param
@@ -256,7 +257,7 @@ export function getInitialState (userDefinedConfig) {
   }
 }
 
-function createOtpReducer (config) {
+function createOtpReducer(config) {
   const initialState = getInitialState(config)
   // validate the initial state
   validateInitialState(initialState)
@@ -268,35 +269,32 @@ function createOtpReducer (config) {
     const activeSearch = state.searches[searchId]
     switch (action.type) {
       case 'ROUTING_REQUEST':
-        const {
-          activeItinerary,
-          pending,
-          updateSearchInReducer
-        } = action.payload
+        const { activeItinerary, pending, updateSearchInReducer } =
+          action.payload
         const searchUpdate = updateSearchInReducer
           ? {
-            activeItinerary: { $set: activeItinerary },
-            activeLeg: { $set: null },
-            activeStep: { $set: null },
-            pending: { $set: pending },
-            // FIXME: get query from action payload?
-            query: { $set: clone(state.currentQuery) },
-            // omit requests reset to make sure requests can be added to this
-            // search
-            timestamp: { $set: getTimestamp() }
-          }
-          : {
-            $set: {
-              activeItinerary,
-              activeLeg: null,
-              activeStep: null,
-              pending,
+              activeItinerary: { $set: activeItinerary },
+              activeLeg: { $set: null },
+              activeStep: { $set: null },
+              pending: { $set: pending },
               // FIXME: get query from action payload?
-              query: clone(state.currentQuery),
-              response: [],
-              timestamp: getTimestamp()
+              query: { $set: clone(state.currentQuery) },
+              // omit requests reset to make sure requests can be added to this
+              // search
+              timestamp: { $set: getTimestamp() }
+            }
+          : {
+              $set: {
+                activeItinerary,
+                activeLeg: null,
+                activeStep: null,
+                pending,
+                // FIXME: get query from action payload?
+                query: clone(state.currentQuery),
+                response: [],
+                timestamp: getTimestamp()
+              }
             }
-          }
         return update(state, {
           activeSearchId: { $set: searchId },
           searches: { [searchId]: searchUpdate }
@@ -307,19 +305,22 @@ function createOtpReducer (config) {
             [searchId]: {
               pending: { $set: activeSearch.pending - 1 },
               response: {
-                $push: [{
-                  error: action.payload.error,
-                  requestId,
-                  url: action.payload.url
-                }]
+                $push: [
+                  {
+                    error: action.payload.error,
+                    requestId,
+                    url: action.payload.url
+                  }
+                ]
               }
             }
           }
         })
       case 'ROUTING_RESPONSE':
-        const response = (state.currentQuery.routingType === 'PROFILE')
-          ? filterProfileOptions(action.payload.response)
-          : action.payload.response
+        const response =
+          state.currentQuery.routingType === 'PROFILE'
+            ? filterProfileOptions(action.payload.response)
+            : action.payload.response
         response.requestId = requestId
         return update(state, {
           searches: {
@@ -350,8 +351,8 @@ function createOtpReducer (config) {
         })
       case 'SET_ACTIVE_ITINERARIES':
         const responseUpdate = {}
-        Object.entries(action.payload.assignedItinerariesByResponse)
-          .forEach(([ responseIdx, responsePlanItineraries ]) => {
+        Object.entries(action.payload.assignedItinerariesByResponse).forEach(
+          ([responseIdx, responsePlanItineraries]) => {
             responseUpdate[responseIdx] = {
               plan: {
                 itineraries: {
@@ -359,7 +360,8 @@ function createOtpReducer (config) {
                 }
               }
             }
-          })
+          }
+        )
         return update(state, {
           searches: {
             [searchId]: {
@@ -532,18 +534,26 @@ function createOtpReducer (config) {
         if (action.payload.indexOf('recent') !== -1) {
           const recentPlaces = clone(state.user.recentPlaces)
           // Remove recent from list of recent places
-          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
+          const removeIndex = recentPlaces.findIndex(
+            (l) => l.id === action.payload
+          )
           recentPlaces.splice(removeIndex, 1)
           storeItem('recent', recentPlaces)
           return removeIndex !== -1
-            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { recentPlaces: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         } else {
           const locations = clone(state.user.locations)
-          const removeIndex = locations.findIndex(l => l.id === action.payload)
+          const removeIndex = locations.findIndex(
+            (l) => l.id === action.payload
+          )
           removeItem(action.payload)
           return removeIndex !== -1
-            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { locations: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         }
       }
@@ -552,23 +562,29 @@ function createOtpReducer (config) {
         switch (type) {
           case 'recent': {
             const recentPlaces = clone(state.user.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            const index = recentPlaces.findIndex((l) =>
+              matchLatLon(l, location)
+            )
             // Replace recent place if duplicate found or add to list.
             if (index !== -1) recentPlaces.splice(index, 1, location)
             else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            const sortedPlaces = recentPlaces.sort(
+              (a, b) => b.timestamp - a.timestamp
+            )
             // Only keep up to 5 recent locations
             // FIXME: Check for duplicates
             if (recentPlaces.length >= MAX_RECENT_STORAGE) {
               sortedPlaces.splice(MAX_RECENT_STORAGE)
             }
             storeItem('recent', recentPlaces)
-            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
+            return update(state, {
+              user: { recentPlaces: { $set: sortedPlaces } }
+            })
           }
           default: {
             const locations = clone(state.user.locations)
             // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
+            const index = locations.findIndex((l) => l.type === type)
             if (index !== -1) locations.splice(index, 1, location)
             else locations.push(location)
             storeItem(type, location)
@@ -580,11 +596,15 @@ function createOtpReducer (config) {
         // Payload is the stop ID.
         const favoriteStops = clone(state.user.favoriteStops)
         // Remove stop from favorites
-        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
+        const removeIndex = favoriteStops.findIndex(
+          (l) => l.id === action.payload
+        )
         favoriteStops.splice(removeIndex, 1)
         storeItem('favoriteStops', favoriteStops)
         return removeIndex !== -1
-          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
+          ? update(state, {
+              user: { favoriteStops: { $splice: [[removeIndex, 1]] } }
+            })
           : state
       }
       case 'REMEMBER_STOP': {
@@ -601,10 +621,12 @@ function createOtpReducer (config) {
         }
         const favoriteStops = clone(state.user.favoriteStops)
         if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          window.alert(
+            `Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`
+          )
           return state
         }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        const index = favoriteStops.findIndex((s) => s.id === stop.id)
         // Do nothing if duplicate stop found.
         if (index !== -1) {
           console.warn(`Stop with id ${stop.id} already exists in favorites.`)
@@ -613,15 +635,19 @@ function createOtpReducer (config) {
           favoriteStops.unshift(stop)
         }
         storeItem('favoriteStops', favoriteStops)
-        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
+        return update(state, {
+          user: { favoriteStops: { $set: favoriteStops } }
+        })
       }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
         if (!action.payload) removeItem('expandAdvanced')
-        return update(state, { user: {
-          expandAdvanced: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            expandAdvanced: { $set: action.payload }
+          }
+        })
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)
         let recentPlaces = clone(state.user.recentPlaces)
@@ -633,19 +659,25 @@ function createOtpReducer (config) {
           removeItem('recent')
           removeItem('recentSearches')
         }
-        return update(state, { user: {
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches },
-          trackRecent: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            recentPlaces: { $set: recentPlaces },
+            recentSearches: { $set: recentSearches },
+            trackRecent: { $set: action.payload }
+          }
+        })
       }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
-        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
+        const duplicateIndex = searches.findIndex((s) =>
+          isEqual(s.query, action.payload.query)
+        )
         // Overwrite duplicate search (so that new timestamp is stored).
         if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
         else searches.unshift(action.payload)
-        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
+        const sortedSearches = searches.sort(
+          (a, b) => b.timestamp - a.timestamp
+        )
         // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
         if (sortedSearches.length >= MAX_RECENT_STORAGE) {
           sortedSearches.splice(MAX_RECENT_STORAGE)
@@ -654,12 +686,14 @@ function createOtpReducer (config) {
         return update(state, { user: { searches: { $set: sortedSearches } } })
       case 'FORGET_SEARCH': {
         const recentSearches = clone(state.user.recentSearches)
-        const index = recentSearches.findIndex(l => l.id === action.payload)
+        const index = recentSearches.findIndex((l) => l.id === action.payload)
         // Remove item from list of recent searches
         recentSearches.splice(index, 1)
         storeItem('recentSearches', recentSearches)
         return index !== -1
-          ? update(state, { user: { recentSearches: { $splice: [[index, 1]] } } })
+          ? update(state, {
+              user: { recentSearches: { $splice: [[index, 1]] } }
+            })
           : state
       }
       case 'SET_AUTOPLAN':
@@ -686,12 +720,13 @@ function createOtpReducer (config) {
       case 'SET_ROUTER_ID':
         const routerId = action.payload
         // Store original path value in originalPath variable.
-        const originalPath = config.api.originalPath || config.api.path || '/otp/routers/default'
+        const originalPath =
+          config.api.originalPath || config.api.path || '/otp/routers/default'
         const path = routerId
           ? `/otp/routers/${routerId}`
-          // If routerId is null, revert to the original config's API path (or
-          // the standard path if that is not found).
-          : originalPath
+          : // If routerId is null, revert to the original config's API path (or
+            // the standard path if that is not found).
+            originalPath
         // Store routerId in session storage (persists through page reloads but
         // not when a new tab/window is opened).
         if (routerId) window.sessionStorage.setItem('routerId', routerId)
@@ -742,13 +777,15 @@ function createOtpReducer (config) {
         })
 
       case 'NEARBY_STOPS_RESPONSE':
-        const {focusStopId, stops} = action.payload
+        const { focusStopId, stops } = action.payload
         const stopLookup = {}
-        stops.forEach(s => {
+        stops.forEach((s) => {
           stopLookup[s.id] = s
         })
 
-        const stopIds = stops.map(stop => stop.id).filter(id => focusStopId !== id)
+        const stopIds = stops
+          .map((stop) => stop.id)
+          .filter((id) => focusStopId !== id)
 
         if (!focusStopId) {
           return update(state, {
@@ -762,20 +799,24 @@ function createOtpReducer (config) {
           // losing the child stops field we're adding here.
           delete stopLookup[focusStopId]
           return update(state, {
-            transitIndex: { stops: {
-              // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
-              $merge: stopLookup, // going to include the parentStop
-              // For the parent stop, we want to add the nearby stops as a new child stops field
-              [focusStopId]: {$merge: {nearbyStops: stopIds}}
-            } }
+            transitIndex: {
+              stops: {
+                // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
+                $merge: stopLookup, // going to include the parentStop
+                // For the parent stop, we want to add the nearby stops as a new child stops field
+                [focusStopId]: { $merge: { nearbyStops: stopIds } }
+              }
+            }
           })
         }
       case 'FIND_NEARBY_AMENITIES_RESPONSE':
         const { stopId, ...amenities } = action.payload
         return update(state, {
-          transitIndex: { stops: {
-            [stopId]: {$merge: amenities}
-          } }
+          transitIndex: {
+            stops: {
+              [stopId]: { $merge: amenities }
+            }
+          }
         })
       case 'STOPS_WITHIN_BBOX_RESPONSE':
         return update(state, {
@@ -826,10 +867,12 @@ function createOtpReducer (config) {
       case 'SET_VIEWED_STOP':
         if (action.payload) {
           // If setting to a stop (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
-            viewedStop: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
+              viewedStop: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed stop with null
           return update(state, { ui: { viewedStop: { $set: action.payload } } })
@@ -843,18 +886,24 @@ function createOtpReducer (config) {
         return update(state, { ui: { viewedTrip: { $set: null } } })
 
       case 'SET_HOVERED_STOP':
-        return update(state, { ui: { highlightedStop: { $set: action.payload } } })
+        return update(state, {
+          ui: { highlightedStop: { $set: action.payload } }
+        })
 
       case 'SET_VIEWED_ROUTE':
         if (action.payload) {
           // If setting to a route (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
-            viewedRoute: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
+              viewedRoute: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed route with null
-          return update(state, { ui: { viewedRoute: { $set: action.payload } } })
+          return update(state, {
+            ui: { viewedRoute: { $set: action.payload } }
+          })
         }
       case 'FIND_STOP_RESPONSE':
         return update(state, {
@@ -934,7 +983,9 @@ function createOtpReducer (config) {
         })
       case 'TOGGLE_AUTO_REFRESH':
         storeItem('autoRefreshStopTimes', action.payload)
-        return update(state, { user: { autoRefreshStopTimes: { $set: action.payload } } })
+        return update(state, {
+          user: { autoRefreshStopTimes: { $set: action.payload } }
+        })
 
       case 'FIND_ROUTES_RESPONSE':
         // If routes is undefined, initialize it w/ the full payload
@@ -951,7 +1002,9 @@ function createOtpReducer (config) {
         // If routes is undefined, initialize it w/ this route only
         if (!state.transitIndex.routes) {
           return update(state, {
-            transitIndex: { routes: { $set: { [action.payload.id]: action.payload } } }
+            transitIndex: {
+              routes: { $set: { [action.payload.id]: action.payload } }
+            }
           })
         }
         // Otherwise, overwrite only this route
@@ -1008,19 +1061,20 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             etaEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const estimates = action.payload.estimates || []
-                estimates.forEach(estimate => {
+                estimates.forEach((estimate) => {
                   if (!fromData[estimate.company]) {
                     fromData[estimate.company] = {}
                   }
-                  fromData[estimate.company][estimate.productId] = Object.assign(
-                    {
-                      estimateTimestamp: new Date()
-                    },
-                    estimate
-                  )
+                  fromData[estimate.company][estimate.productId] =
+                    Object.assign(
+                      {
+                        estimateTimestamp: new Date()
+                      },
+                      estimate
+                    )
                 })
                 return fromData
               }
@@ -1031,7 +1085,7 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             rideEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const { company, rideEstimate, to } = action.payload
                 if (!rideEstimate) {
@@ -1078,23 +1132,25 @@ function createOtpReducer (config) {
       case 'UPDATE_OVERLAY_VISIBILITY':
         const mapOverlays = clone(state.config.map.overlays)
         for (const key in action.payload) {
-          const overlay = mapOverlays.find(o => o.name === key)
+          const overlay = mapOverlays.find((o) => o.name === key)
           overlay.visible = action.payload[key]
         }
-        return update(state,
-          { config: { map: { overlays: { $set: mapOverlays } } } }
-        )
+        return update(state, {
+          config: { map: { overlays: { $set: mapOverlays } } }
+        })
       case 'UPDATE_ITINERARY_FILTER':
-        return update(state,
-          { filter: { $set: action.payload } }
-        )
+        return update(state, { filter: { $set: action.payload } })
       case 'SET_PREVIOUS_ITINERARY_VIEW':
-        return update(state, { ui: { previousItineraryView: { $set: action.payload } } })
+        return update(state, {
+          ui: { previousItineraryView: { $set: action.payload } }
+        })
       case 'UPDATE_LOCALE':
-        return update(state, { ui: {
-          locale: { $set: action.payload.locale },
-          localizedMessages: { $set: action.payload.messages }
-        }})
+        return update(state, {
+          ui: {
+            locale: { $set: action.payload.locale },
+            localizedMessages: { $set: action.payload.messages }
+          }
+        })
 
       case 'UPDATE_ROUTE_VIEWER_FILTER':
         return update(state, {

From be42a000c359b5ff281a53e599224a706f637e48 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 08:15:34 -0500
Subject: [PATCH 143/270] refactor: address pr feedback

---
 lib/actions/api.js                 | 7 ++++++-
 lib/reducers/create-otp-reducer.js | 5 +++++
 lib/util/state.js                  | 9 +++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index b053498df..da70f9985 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -25,6 +25,11 @@ const { randId } = coreUtils.storage
 
 // Generic API actions
 
+/*
+  This is not actively used, but may be again in the future to 
+  facilitate trip monitoring, which requires a non-realtime
+  trip 
+*/
 export const nonRealtimeRoutingResponse = createAction(
   'NON_REALTIME_ROUTING_RESPONSE'
 )
@@ -206,7 +211,7 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
           dispatch(updateOtpUrlParams(state, searchId))
         }
 
-        return Promise.all([realTimeFetch])
+        return realTimeFetch
       })
     )
   }
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 5dfd53c7e..61c54c03d 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -333,6 +333,11 @@ function createOtpReducer(config) {
             diagramLeg: { $set: null }
           }
         })
+      /*
+        This is not actively used, but may be again in the future to 
+        facilitate trip monitoring, which requires a non-realtime
+        trip 
+      */
       case 'NON_REALTIME_ROUTING_RESPONSE':
         return update(state, {
           searches: {
diff --git a/lib/util/state.js b/lib/util/state.js
index f3a1656a1..fbc7f606d 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -195,6 +195,10 @@ export function getErrorMessage(error, intl) {
 
 /**
  * Helper to get the active search's non-realtime response
+ * 
+ * This is not actively used, but may be again in the future to 
+ * facilitate trip monitoring, which requires a non-realtime
+ * trip 
  */
 function getActiveSearchNonRealtimeResponse(state) {
   const search = getActiveSearch(state)
@@ -661,6 +665,11 @@ export function getRealtimeEffects(state) {
       ? search.response.plan.itineraries
       : null
 
+  /*
+    This is not actively used, but may be again in the future to 
+    facilitate trip monitoring, which requires a non-realtime
+    trip 
+  */
   const hasNonRealtimeItineraries =
     search && search.nonRealtimeResponse && search.nonRealtimeResponse.plan
 

From 6973f017f54bfb3988130fddc2d834092a43919b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 08:22:38 -0500
Subject: [PATCH 144/270] chore: run autoformatter

---
 lib/actions/narrative.js                      |   4 +-
 .../narrative/narrative-itineraries.js        | 122 +++++++++---------
 .../narrative/realtime-annotation.js          | 113 +++++++++-------
 3 files changed, 126 insertions(+), 113 deletions(-)

diff --git a/lib/actions/narrative.js b/lib/actions/narrative.js
index 48a75d611..a9a296c2e 100644
--- a/lib/actions/narrative.js
+++ b/lib/actions/narrative.js
@@ -1,9 +1,9 @@
-import coreUtils from '@opentripplanner/core-utils'
 import { createAction } from 'redux-actions'
+import coreUtils from '@opentripplanner/core-utils'
 
 import { setUrlSearch } from './api'
 
-export function setActiveItinerary (payload) {
+export function setActiveItinerary(payload) {
   return function (dispatch, getState) {
     // Trigger change in store.
     dispatch(settingActiveitinerary(payload))
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 2f9c41ee9..999005a3a 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -1,17 +1,9 @@
+import { connect } from 'react-redux'
 import coreUtils from '@opentripplanner/core-utils'
-import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import { connect } from 'react-redux'
 
-import {
-  setActiveItinerary,
-  setActiveLeg,
-  setActiveStep,
-  setUseRealtimeResponse,
-  setVisibleItinerary,
-  updateItineraryFilter
-} from '../../actions/narrative'
 import * as uiActions from '../../actions/ui'
 import { ComponentContext } from '../../util/contexts'
 import {
@@ -21,6 +13,14 @@ import {
   getResponsesWithErrors,
   getVisibleItineraryIndex
 } from '../../util/state'
+import {
+  setActiveItinerary,
+  setActiveLeg,
+  setActiveStep,
+  setUseRealtimeResponse,
+  setVisibleItinerary,
+  updateItineraryFilter
+} from '../../actions/narrative'
 
 import NarrativeItinerariesErrors from './narrative-itineraries-errors'
 import NarrativeItinerariesHeader from './narrative-itineraries-header'
@@ -68,16 +68,16 @@ class NarrativeItineraries extends Component {
     setActiveLeg(null, null)
   }
 
-  _onSortChange = evt => {
-    const {value: type} = evt.target
-    const {sort, updateItineraryFilter} = this.props
-    updateItineraryFilter({sort: {...sort, type}})
+  _onSortChange = (evt) => {
+    const { value: type } = evt.target
+    const { sort, updateItineraryFilter } = this.props
+    updateItineraryFilter({ sort: { ...sort, type } })
   }
 
   _onSortDirChange = () => {
-    const {sort, updateItineraryFilter} = this.props
+    const { sort, updateItineraryFilter } = this.props
     const direction = sort.direction === 'ASC' ? 'DESC' : 'ASC'
-    updateItineraryFilter({sort: {...sort, direction}})
+    updateItineraryFilter({ sort: { ...sort, direction } })
   }
 
   _onViewAllOptions = () => {
@@ -93,25 +93,23 @@ class NarrativeItineraries extends Component {
   }
 
   _renderLoadingDivs = () => {
-    const {itineraries, modes, pending} = this.props
-    const {showingErrors} = this.state
+    const { itineraries, modes, pending } = this.props
+    const { showingErrors } = this.state
     if (!pending || showingErrors) return null
     // Construct loading divs as placeholders while all itineraries load.
     const count = modes.combinations
       ? modes.combinations.length - itineraries.length
       : 0
-    return Array.from(
-      {length: count},
-      (v, i) =>
-        <div className='option default-itin' key={i}>
-          <SkeletonTheme color='#ddd' highlightColor='#eee'>
-            <Skeleton count={3} />
-          </SkeletonTheme>
-        </div>
-    )
+    return Array.from({ length: count }, (v, i) => (
+      <div className="option default-itin" key={i}>
+        <SkeletonTheme color="#ddd" highlightColor="#eee">
+          <Skeleton count={3} />
+        </SkeletonTheme>
+      </div>
+    ))
   }
 
-  render () {
+  render() {
     const {
       activeItinerary,
       activeLeg,
@@ -138,14 +136,14 @@ class NarrativeItineraries extends Component {
 
     if (!activeSearch) return null
 
-    const showRealtimeAnnotation = realtimeEffects.isAffectedByRealtimeData && (
-      realtimeEffects.exceedsThreshold ||
-      realtimeEffects.routesDiffer ||
-      !useRealtime
-    )
+    const showRealtimeAnnotation =
+      realtimeEffects.isAffectedByRealtimeData &&
+      (realtimeEffects.exceedsThreshold ||
+        realtimeEffects.routesDiffer ||
+        !useRealtime)
 
     return (
-      <div className='options itinerary' style={containerStyle}>
+      <div className="options itinerary" style={containerStyle}>
         <NarrativeItinerariesHeader
           errors={errors}
           itineraries={itineraries}
@@ -160,20 +158,19 @@ class NarrativeItineraries extends Component {
         />
         <div
           // FIXME: Change to a ul with li children?
-          className='list'
+          className="list"
           style={{
             flexGrow: '1',
             overflowY: 'auto'
           }}
         >
-          {showingErrors || itineraries.length === 0
-            ? (
-              <NarrativeItinerariesErrors
-                errorMessages={errorMessages}
-                errors={errors}
-              />
-            )
-            : <>
+          {showingErrors || itineraries.length === 0 ? (
+            <NarrativeItinerariesErrors
+              errorMessages={errorMessages}
+              errors={errors}
+            />
+          ) : (
+            <>
               {itineraries.map((itinerary, index) => {
                 const active = index === activeItinerary
                 // Hide non-active itineraries.
@@ -189,7 +186,7 @@ class NarrativeItineraries extends Component {
                     key={index}
                     LegIcon={LegIcon}
                     onClick={active ? this._toggleDetailedItinerary : undefined}
-                    routingType='ITINERARY'
+                    routingType="ITINERARY"
                     setActiveItinerary={setActiveItinerary}
                     setActiveLeg={this._setActiveLeg}
                     setActiveStep={setActiveStep}
@@ -203,7 +200,7 @@ class NarrativeItineraries extends Component {
               })}
               {this._renderLoadingDivs()}
             </>
-          }
+          )}
         </div>
       </div>
     )
@@ -223,12 +220,12 @@ const mapStateToProps = (state, ownProps) => {
   const useRealtime = state.otp.useRealtime
   const urlParams = coreUtils.query.getUrlParams()
   const itineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
-  const showDetails = itineraryView === ItineraryView.FULL ||
-          itineraryView === ItineraryView.LEG ||
-          itineraryView === ItineraryView.LEG_HIDDEN
-  const itineraryIsExpanded = activeItinerary !== undefined &&
-    activeItinerary !== null &&
-    showDetails
+  const showDetails =
+    itineraryView === ItineraryView.FULL ||
+    itineraryView === ItineraryView.LEG ||
+    itineraryView === ItineraryView.LEG_HIDDEN
+  const itineraryIsExpanded =
+    activeItinerary !== undefined && activeItinerary !== null && showDetails
 
   return {
     // swap out realtime itineraries with non-realtime depending on boolean
@@ -260,22 +257,25 @@ const mapDispatchToProps = (dispatch, ownProps) => {
   // so that only one argument is passed,
   // e.g. setActiveLeg({ index, leg })
   return {
-    setActiveItinerary: payload => dispatch(setActiveItinerary(payload)),
+    setActiveItinerary: (payload) => dispatch(setActiveItinerary(payload)),
     // FIXME
     setActiveLeg: (index, leg) => {
-      dispatch(setActiveLeg({index, leg}))
+      dispatch(setActiveLeg({ index, leg }))
     },
     // FIXME
     setActiveStep: (index, step) => {
-      dispatch(setActiveStep({index, step}))
+      dispatch(setActiveStep({ index, step }))
     },
-    setItineraryView: payload => dispatch(uiActions.setItineraryView(payload)),
-    setUseRealtimeResponse: payload => dispatch(setUseRealtimeResponse(payload)),
-    setVisibleItinerary: payload => dispatch(setVisibleItinerary(payload)),
-    updateItineraryFilter: payload => dispatch(updateItineraryFilter(payload))
+    setItineraryView: (payload) =>
+      dispatch(uiActions.setItineraryView(payload)),
+    setUseRealtimeResponse: (payload) =>
+      dispatch(setUseRealtimeResponse(payload)),
+    setVisibleItinerary: (payload) => dispatch(setVisibleItinerary(payload)),
+    updateItineraryFilter: (payload) => dispatch(updateItineraryFilter(payload))
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  NarrativeItineraries
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NarrativeItineraries)
diff --git a/lib/components/narrative/realtime-annotation.js b/lib/components/narrative/realtime-annotation.js
index 5c1ecc3dd..1a15f64b5 100644
--- a/lib/components/narrative/realtime-annotation.js
+++ b/lib/components/narrative/realtime-annotation.js
@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
 import { Button, OverlayTrigger, Popover } from 'react-bootstrap'
 import { FormattedList, FormattedMessage } from 'react-intl'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import FormattedDuration from '../util/formatted-duration'
 import Icon from '../util/icon'
@@ -14,70 +14,83 @@ export default class RealtimeAnnotation extends Component {
     useRealtime: PropTypes.bool
   }
 
-  render () {
-    const {
-      componentClass,
-      realtimeEffects,
-      toggleRealtime,
-      useRealtime
-    } = this.props
+  render() {
+    const { componentClass, realtimeEffects, toggleRealtime, useRealtime } =
+      this.props
     // Keep only the unique route IDs (so that duplicates are not listed).
-    const filteredRoutes = realtimeEffects.normalRoutes
-      .filter((routeId, index, self) => self.indexOf(routeId) === index)
+    const filteredRoutes = realtimeEffects.normalRoutes.filter(
+      (routeId, index, self) => self.indexOf(routeId) === index
+    )
     // FIXME: there are some weird css things happening in desktop vs. mobile,
     // so I removed the divs with classNames and opted for h4 and p for now
-    const innerContent = <div className='realtime-alert'>
-      <div className='content'>
-        <h3>
-          <Icon type='exclamation-circle' withSpace />
-          <FormattedMessage id='components.RealtimeAnnotation.serviceUpdate' />
-        </h3>
-        <p className='small'>
-          {useRealtime
-            ? (
+    const innerContent = (
+      <div className="realtime-alert">
+        <div className="content">
+          <h3>
+            <Icon type="exclamation-circle" withSpace />
+            <FormattedMessage id="components.RealtimeAnnotation.serviceUpdate" />
+          </h3>
+          <p className="small">
+            {useRealtime ? (
               <FormattedMessage
-                id='components.RealtimeAnnotation.delaysShownInResults'
+                id="components.RealtimeAnnotation.delaysShownInResults"
                 values={{
-                  normalDuration: <FormattedDuration duration={realtimeEffects.normalDuration} />,
+                  normalDuration: (
+                    <FormattedDuration
+                      duration={realtimeEffects.normalDuration}
+                    />
+                  ),
                   routes: (
                     <FormattedList
-                      type='conjunction'
-                      value={filteredRoutes.map(route => <strong>{route}</strong>)}
+                      type="conjunction"
+                      value={filteredRoutes.map((route) => (
+                        <strong>{route}</strong>
+                      ))}
                     />
                   ),
                   strong: Strong
                 }}
               />
-            )
-            : <FormattedMessage id='components.RealtimeAnnotation.delaysNotShownInResults' />
-          }
-        </p>
-        <div>
-          <Button
-            block={componentClass === 'popover'} // display as block in popover
-            className='toggle-realtime'
-            onClick={toggleRealtime}
-          >
-            {useRealtime
-              ? <FormattedMessage id='components.RealtimeAnnotation.ignoreServiceDelays' />
-              : <FormattedMessage id='components.RealtimeAnnotation.applyServiceDelays' />
-            }
-          </Button>
+            ) : (
+              <FormattedMessage id="components.RealtimeAnnotation.delaysNotShownInResults" />
+            )}
+          </p>
+          <div>
+            <Button
+              block={componentClass === 'popover'} // display as block in popover
+              className="toggle-realtime"
+              onClick={toggleRealtime}
+            >
+              {useRealtime ? (
+                <FormattedMessage id="components.RealtimeAnnotation.ignoreServiceDelays" />
+              ) : (
+                <FormattedMessage id="components.RealtimeAnnotation.applyServiceDelays" />
+              )}
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    )
 
     if (componentClass === 'popover') {
-      return <OverlayTrigger
-        overlay={
-          <Popover id='popover-positioned-bottom' style={{maxWidth: '300px'}}>
-            {innerContent}
-          </Popover>
-        }
-        placement='bottom'
-        trigger='click'>
-        <Button bsStyle='link'><i className='fa fa-2x fa-exclamation-circle' /></Button>
-      </OverlayTrigger>
+      return (
+        <OverlayTrigger
+          overlay={
+            <Popover
+              id="popover-positioned-bottom"
+              style={{ maxWidth: '300px' }}
+            >
+              {innerContent}
+            </Popover>
+          }
+          placement="bottom"
+          trigger="click"
+        >
+          <Button bsStyle="link">
+            <i className="fa fa-2x fa-exclamation-circle" />
+          </Button>
+        </OverlayTrigger>
+      )
     } else {
       return innerContent
     }

From e56922d66dc7caf3a48d826486ea5b6a35309c71 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 08:38:58 -0500
Subject: [PATCH 145/270] refactor: appease linter while starting to tear out
 useRealtime

---
 lib/components/mobile/results-header.js       |  49 +++---
 lib/components/mobile/results-screen.js       | 145 +++++++++---------
 .../narrative/narrative-itineraries.js        |  17 +-
 .../narrative/realtime-annotation.js          |   3 +-
 lib/reducers/create-otp-reducer.js            |   7 +-
 lib/util/state.js                             |   5 +-
 6 files changed, 111 insertions(+), 115 deletions(-)

diff --git a/lib/components/mobile/results-header.js b/lib/components/mobile/results-header.js
index fb92f0025..75120b248 100644
--- a/lib/components/mobile/results-header.js
+++ b/lib/components/mobile/results-header.js
@@ -1,9 +1,9 @@
+import { Col, Row } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
 import LocationIcon from '@opentripplanner/location-icon'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { Col, Row } from 'react-bootstrap'
-import { FormattedMessage } from 'react-intl'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import {
@@ -55,38 +55,38 @@ class ResultsHeader extends Component {
     resultCount: PropTypes.number
   }
 
-  render () {
+  render() {
     const { errors, query, resultCount } = this.props
     const hasNoResult = resultCount === 0 && errors.length > 0
-    const headerText = hasNoResult
-      ? <FormattedMessage id='components.ResultsHeader.noTripFound' />
-      : (resultCount
-        ? (
-          <FormattedMessage
-            id='components.ResultsHeader.tripsFound'
-            values={{ count: resultCount }}
-          />
-        )
-        : <FormattedMessage id='components.ResultsHeader.waiting' />
-      )
+    const headerText = hasNoResult ? (
+      <FormattedMessage id="components.ResultsHeader.noTripFound" />
+    ) : resultCount ? (
+      <FormattedMessage
+        id="components.ResultsHeader.tripsFound"
+        values={{ count: resultCount }}
+      />
+    ) : (
+      <FormattedMessage id="components.ResultsHeader.waiting" />
+    )
 
     return (
       <>
         <MobileNavigationBar headerText={headerText} />
 
         <LocationSummaryContainer>
-          <LocationsSummaryRow className='locations-summary'>
+          <LocationsSummaryRow className="locations-summary">
             <LocationsSummaryColFromTo sm={11} xs={8}>
               <LocationContainer>
-                <StyledLocationIcon type='from' /> { query.from ? query.from.name : '' }
+                <StyledLocationIcon type="from" />{' '}
+                {query.from ? query.from.name : ''}
               </LocationContainer>
               <LocationContainer style={{ marginTop: 2 }}>
-                <StyledLocationIcon type='to' /> { query.to ? query.to.name : '' }
+                <StyledLocationIcon type="to" /> {query.to ? query.to.name : ''}
               </LocationContainer>
             </LocationsSummaryColFromTo>
             <Col sm={1} xs={4}>
-              <EditSearchButton className='edit-search-button pull-right'>
-                <FormattedMessage id='common.forms.edit' />
+              <EditSearchButton className="edit-search-button pull-right">
+                <FormattedMessage id="common.forms.edit" />
               </EditSearchButton>
             </Col>
           </LocationsSummaryRow>
@@ -100,18 +100,13 @@ class ResultsHeader extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   const activeSearch = getActiveSearch(state)
-  const {useRealtime} = state.otp
-  const response = !activeSearch
-    ? null
-    : useRealtime ? activeSearch.response : activeSearch.nonRealtimeResponse
+  const response = !activeSearch ? null : activeSearch.response
 
   const itineraries = getActiveItineraries(state)
   return {
     errors: getResponsesWithErrors(state),
     query: state.otp.currentQuery,
-    resultCount: response
-      ? itineraries.length
-      : null
+    resultCount: response ? itineraries.length : null
   }
 }
 
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index e52e7f162..fbab6258d 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -1,19 +1,18 @@
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { FormattedMessage } from 'react-intl'
-import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import * as narrativeActions from '../../actions/narrative'
-import Map from '../map/map'
-import ItineraryCarousel from '../narrative/itinerary-carousel'
 import {
   getActiveError,
   getActiveItineraries,
   getActiveSearch,
   getRealtimeEffects
 } from '../../util/state'
+import ItineraryCarousel from '../narrative/itinerary-carousel'
+import Map from '../map/map'
 
 import MobileContainer from './container'
 import ResultsError from './results-error'
@@ -21,19 +20,20 @@ import ResultsHeader from './results-header'
 
 const OptionExpander = styled.button`
   border: none;
-  bottom: ${props => props.expanded ? 'inherit' : '100px'};
+  bottom: ${(props) => (props.expanded ? 'inherit' : '100px')};
   outline: none;
   padding-bottom: 3px;
   display: block;
-  top: ${props => props.expanded ? '100px' : 'inherit'};
+  top: ${(props) => (props.expanded ? '100px' : 'inherit')};
   width: 100%;
 `
 
 const NarrativeContainer = styled.div`
   background-color: white;
-  ${props => props.expanded
-    ? 'top: 140px; overflow-y: auto;'
-    : 'height: 80px; overflow-y: hidden;'}
+  ${(props) =>
+    props.expanded
+      ? 'top: 140px; overflow-y: auto;'
+      : 'height: 80px; overflow-y: hidden;'}
 `
 
 class MobileResultsScreen extends Component {
@@ -47,29 +47,31 @@ class MobileResultsScreen extends Component {
     useRealtime: PropTypes.bool
   }
 
-  constructor () {
+  constructor() {
     super()
     this.state = {
       expanded: false
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     // Get the target element that we want to persist scrolling for
     // FIXME Do we need to add something that removes the listeners when
     // component unmounts?
     coreUtils.ui.enableScrollForSelector('.mobile-narrative-container')
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate(prevProps) {
     // Check if the active leg changed
     if (this.props.activeLeg !== prevProps.activeLeg) {
       this._setExpanded(false)
     }
   }
 
-  _setExpanded (expanded) {
+  _setExpanded(expanded) {
     this.setState({ expanded })
+    // Typescript TODO: move to typescript/modern react (hooks)
+    // eslint-disable-next-line react/no-string-refs
     this.refs['narrative-container'].scrollTop = 0
   }
 
@@ -77,10 +79,6 @@ class MobileResultsScreen extends Component {
     this._setExpanded(!this.state.expanded)
   }
 
-  _toggleRealtime = () => this.props.setUseRealtimeResponse(
-    {useRealtime: !this.props.useRealtime}
-  )
-
   renderDots = () => {
     const { activeItineraryIndex, resultCount } = this.props
 
@@ -96,24 +94,22 @@ class MobileResultsScreen extends Component {
     }
 
     return (
-      <div className='dots-container' style={{ padding: 'none' }}>{dots}</div>
+      <div className="dots-container" style={{ padding: 'none' }}>
+        {dots}
+      </div>
     )
   }
 
-  render () {
-    const {
-      activeItineraryIndex,
-      error,
-      realtimeEffects,
-      useRealtime
-    } = this.props
+  render() {
+    const { activeItineraryIndex, error, realtimeEffects, useRealtime } =
+      this.props
     const { expanded } = this.state
 
-    const showRealtimeAnnotation = realtimeEffects.isAffectedByRealtimeData && (
-      realtimeEffects.exceedsThreshold ||
-      realtimeEffects.routesDiffer ||
-      !useRealtime
-    )
+    const showRealtimeAnnotation =
+      realtimeEffects.isAffectedByRealtimeData &&
+      (realtimeEffects.exceedsThreshold ||
+        realtimeEffects.routesDiffer ||
+        !useRealtime)
 
     return (
       <MobileContainer>
@@ -121,38 +117,42 @@ class MobileResultsScreen extends Component {
         <div className={error ? 'results-error-map' : 'results-map'}>
           <Map />
         </div>
-        {error
-          ? <ResultsError error={error} />
-          : (
-            <>
-              <OptionExpander
-                className='mobile-narrative-header'
-                expanded={expanded}
+        {error ? (
+          <ResultsError error={error} />
+        ) : (
+          <>
+            <OptionExpander
+              className="mobile-narrative-header"
+              expanded={expanded}
+              onClick={this._optionClicked}
+            >
+              <FormattedMessage
+                id="components.ResultsScreen.header"
+                values={{ index: activeItineraryIndex + 1 }}
+              />
+              <i
+                className={`fa fa-caret-${expanded ? 'down' : 'up'}`}
+                style={{ marginLeft: 8 }}
+              />
+            </OptionExpander>
+
+            <NarrativeContainer
+              className="mobile-narrative-container"
+              expanded={expanded}
+              // Typescript TODO: See previous note
+              // eslint-disable-next-line react/no-string-refs
+              ref="narrative-container"
+            >
+              <ItineraryCarousel
+                expanded={this.state.expanded}
+                hideHeader
                 onClick={this._optionClicked}
-              >
-                <FormattedMessage
-                  id='components.ResultsScreen.header'
-                  values={{ index: activeItineraryIndex + 1 }}
-                />
-                <i className={`fa fa-caret-${expanded ? 'down' : 'up'}`} style={{ marginLeft: 8 }} />
-              </OptionExpander>
-
-              <NarrativeContainer
-                className='mobile-narrative-container'
-                expanded={expanded}
-                ref='narrative-container'
-              >
-                <ItineraryCarousel
-                  expanded={this.state.expanded}
-                  hideHeader
-                  onClick={this._optionClicked}
-                  showRealtimeAnnotation={showRealtimeAnnotation}
-                />
-              </NarrativeContainer>
-              {this.renderDots()}
-            </>
-          )
-        }
+                showRealtimeAnnotation={showRealtimeAnnotation}
+              />
+            </NarrativeContainer>
+            {this.renderDots()}
+          </>
+        )}
       </MobileContainer>
     )
   }
@@ -162,10 +162,7 @@ class MobileResultsScreen extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   const activeSearch = getActiveSearch(state)
-  const {useRealtime} = state.otp
-  const response = !activeSearch
-    ? null
-    : useRealtime ? activeSearch.response : activeSearch.nonRealtimeResponse
+  const response = !activeSearch ? null : activeSearch.response
 
   const realtimeEffects = getRealtimeEffects(state)
   const itineraries = getActiveItineraries(state)
@@ -175,18 +172,14 @@ const mapStateToProps = (state, ownProps) => {
     error: getActiveError(state),
     query: state.otp.currentQuery,
     realtimeEffects,
-    resultCount:
-      response
-        ? activeSearch.query.routingType === 'ITINERARY'
-          ? itineraries.length
-          : response.otp.profile.length
-        : null,
-    useRealtime
+    resultCount: response
+      ? activeSearch.query.routingType === 'ITINERARY'
+        ? itineraries.length
+        : response.otp.profile.length
+      : null
   }
 }
 
-const mapDispatchToProps = {
-  setUseRealtimeResponse: narrativeActions.setUseRealtimeResponse
-}
+const mapDispatchToProps = {}
 
 export default connect(mapStateToProps, mapDispatchToProps)(MobileResultsScreen)
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 999005a3a..54169e14a 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -27,18 +27,33 @@ import NarrativeItinerariesHeader from './narrative-itineraries-header'
 
 const { ItineraryView } = uiActions
 
+// FIXME: move to typescript once shared types exist
 class NarrativeItineraries extends Component {
   static propTypes = {
     activeItinerary: PropTypes.number,
+    activeLeg: PropTypes.object,
+    activeSearch: PropTypes.object,
+    activeStep: PropTypes.object,
     containerStyle: PropTypes.object,
+    errorMessages: PropTypes.object,
+    errors: PropTypes.object,
     itineraries: PropTypes.array,
+    itineraryIsExpanded: PropTypes.bool,
+    modes: PropTypes.object,
     pending: PropTypes.bool,
+    realtimeEffects: PropTypes.object,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func,
     setItineraryView: PropTypes.func,
     setUseRealtimeResponse: PropTypes.func,
-    useRealtime: PropTypes.bool
+    setVisibleItinerary: PropTypes.func,
+    showDetails: PropTypes.bool,
+    sort: PropTypes.object,
+    timeFormat: PropTypes.string,
+    updateItineraryFilter: PropTypes.func,
+    useRealtime: PropTypes.bool,
+    visibleItinerary: PropTypes.object
   }
 
   static contextType = ComponentContext
diff --git a/lib/components/narrative/realtime-annotation.js b/lib/components/narrative/realtime-annotation.js
index 1a15f64b5..58c1af9d4 100644
--- a/lib/components/narrative/realtime-annotation.js
+++ b/lib/components/narrative/realtime-annotation.js
@@ -9,6 +9,7 @@ import Strong from '../util/strong-text'
 
 export default class RealtimeAnnotation extends Component {
   static propTypes = {
+    componentClass: PropTypes.string,
     realtimeEffects: PropTypes.object,
     toggleRealtime: PropTypes.func,
     useRealtime: PropTypes.bool
@@ -44,7 +45,7 @@ export default class RealtimeAnnotation extends Component {
                     <FormattedList
                       type="conjunction"
                       value={filteredRoutes.map((route) => (
-                        <strong>{route}</strong>
+                        <strong key={route.id}>{route}</strong>
                       ))}
                     />
                   ),
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 61c54c03d..c2c1b58fa 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -252,8 +252,7 @@ export function getInitialState(userDefinedConfig) {
       recentPlaces,
       recentSearches,
       trackRecent
-    },
-    useRealtime: true
+    }
   }
 }
 
@@ -458,10 +457,6 @@ function createOtpReducer(config) {
             }
           }
         })
-      case 'SET_USE_REALTIME_RESPONSE':
-        return update(state, {
-          useRealtime: { $set: action.payload.useRealtime }
-        })
       case 'SET_ACTIVE_ITINERARY':
         if (state.activeSearchId !== null) {
           return update(state, {
diff --git a/lib/util/state.js b/lib/util/state.js
index fbc7f606d..dc2abbab0 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -269,21 +269,18 @@ export const getActiveItineraries = createSelector(
   getActiveSearchNonRealtimeResponse,
   (state) => state.otp.filter,
   getActiveSearchRealtimeResponse,
-  (state) => state.otp.useRealtime,
   getActiveFieldTripRequest,
   (
     config,
     nonRealtimeResponse,
     itinerarySortSettings,
     realtimeResponse,
-    useRealtime,
     activeFieldTripRequest
   ) => {
-    // set response to use depending on useRealtime
     const response =
       !nonRealtimeResponse && !realtimeResponse
         ? null
-        : useRealtime
+        : realtimeResponse
         ? realtimeResponse
         : nonRealtimeResponse
     const itineraries = []

From 4bcafd8a1cd4f9d325bb3f65b234327a99aca890 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 08:51:48 -0500
Subject: [PATCH 146/270] refactor: remove unused useRealtime

---
 .../__snapshots__/create-otp-reducer.js.snap  |  1 -
 lib/actions/narrative.js                      |  2 +-
 lib/components/mobile/results-screen.js       | 10 +--
 .../narrative/narrative-itineraries.js        | 12 +---
 .../narrative/realtime-annotation.js          | 62 +++++++------------
 .../narrative/tabbed-itineraries.js           | 35 ++---------
 lib/index.js                                  |  4 +-
 7 files changed, 32 insertions(+), 94 deletions(-)

diff --git a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
index f6124fc0d..7321c0589 100644
--- a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
+++ b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
@@ -112,7 +112,6 @@ Object {
       },
     },
   },
-  "useRealtime": true,
   "user": Object {
     "autoRefreshStopTimes": true,
     "defaults": Object {
diff --git a/lib/actions/narrative.js b/lib/actions/narrative.js
index a9a296c2e..2a30e880d 100644
--- a/lib/actions/narrative.js
+++ b/lib/actions/narrative.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
 
@@ -16,7 +17,6 @@ export function setActiveItinerary(payload) {
 const settingActiveitinerary = createAction('SET_ACTIVE_ITINERARY')
 export const setActiveLeg = createAction('SET_ACTIVE_LEG')
 export const setActiveStep = createAction('SET_ACTIVE_STEP')
-export const setUseRealtimeResponse = createAction('SET_USE_REALTIME_RESPONSE')
 // Set itinerary visible on map. This is used for mouse over effects with
 // itineraries in the list.
 export const setVisibleItinerary = createAction('SET_VISIBLE_ITINERARY')
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index fbab6258d..615e76a4c 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -43,8 +43,7 @@ class MobileResultsScreen extends Component {
     error: PropTypes.object,
     query: PropTypes.object,
     realtimeEffects: PropTypes.object,
-    resultCount: PropTypes.number,
-    useRealtime: PropTypes.bool
+    resultCount: PropTypes.number
   }
 
   constructor() {
@@ -101,15 +100,12 @@ class MobileResultsScreen extends Component {
   }
 
   render() {
-    const { activeItineraryIndex, error, realtimeEffects, useRealtime } =
-      this.props
+    const { activeItineraryIndex, error, realtimeEffects } = this.props
     const { expanded } = this.state
 
     const showRealtimeAnnotation =
       realtimeEffects.isAffectedByRealtimeData &&
-      (realtimeEffects.exceedsThreshold ||
-        realtimeEffects.routesDiffer ||
-        !useRealtime)
+      (realtimeEffects.exceedsThreshold || realtimeEffects.routesDiffer)
 
     return (
       <MobileContainer>
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 54169e14a..1b23bcf35 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -17,7 +17,6 @@ import {
   setActiveItinerary,
   setActiveLeg,
   setActiveStep,
-  setUseRealtimeResponse,
   setVisibleItinerary,
   updateItineraryFilter
 } from '../../actions/narrative'
@@ -46,13 +45,11 @@ class NarrativeItineraries extends Component {
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func,
     setItineraryView: PropTypes.func,
-    setUseRealtimeResponse: PropTypes.func,
     setVisibleItinerary: PropTypes.func,
     showDetails: PropTypes.bool,
     sort: PropTypes.object,
     timeFormat: PropTypes.string,
     updateItineraryFilter: PropTypes.func,
-    useRealtime: PropTypes.bool,
     visibleItinerary: PropTypes.object
   }
 
@@ -143,7 +140,6 @@ class NarrativeItineraries extends Component {
       showDetails,
       sort,
       timeFormat,
-      useRealtime,
       visibleItinerary
     } = this.props
     const { ItineraryBody, LegIcon } = this.context
@@ -153,9 +149,7 @@ class NarrativeItineraries extends Component {
 
     const showRealtimeAnnotation =
       realtimeEffects.isAffectedByRealtimeData &&
-      (realtimeEffects.exceedsThreshold ||
-        realtimeEffects.routesDiffer ||
-        !useRealtime)
+      (realtimeEffects.exceedsThreshold || realtimeEffects.routesDiffer)
 
     return (
       <div className="options itinerary" style={containerStyle}>
@@ -232,7 +226,6 @@ const mapStateToProps = (state, ownProps) => {
   const pending = activeSearch ? Boolean(activeSearch.pending) : false
   const itineraries = getActiveItineraries(state)
   const realtimeEffects = getRealtimeEffects(state)
-  const useRealtime = state.otp.useRealtime
   const urlParams = coreUtils.query.getUrlParams()
   const itineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
   const showDetails =
@@ -262,7 +255,6 @@ const mapStateToProps = (state, ownProps) => {
     showDetails,
     sort,
     timeFormat: coreUtils.time.getTimeFormat(state.otp.config),
-    useRealtime,
     visibleItinerary: getVisibleItineraryIndex(state)
   }
 }
@@ -283,8 +275,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     },
     setItineraryView: (payload) =>
       dispatch(uiActions.setItineraryView(payload)),
-    setUseRealtimeResponse: (payload) =>
-      dispatch(setUseRealtimeResponse(payload)),
     setVisibleItinerary: (payload) => dispatch(setVisibleItinerary(payload)),
     updateItineraryFilter: (payload) => dispatch(updateItineraryFilter(payload))
   }
diff --git a/lib/components/narrative/realtime-annotation.js b/lib/components/narrative/realtime-annotation.js
index 58c1af9d4..93aba7a42 100644
--- a/lib/components/narrative/realtime-annotation.js
+++ b/lib/components/narrative/realtime-annotation.js
@@ -10,14 +10,11 @@ import Strong from '../util/strong-text'
 export default class RealtimeAnnotation extends Component {
   static propTypes = {
     componentClass: PropTypes.string,
-    realtimeEffects: PropTypes.object,
-    toggleRealtime: PropTypes.func,
-    useRealtime: PropTypes.bool
+    realtimeEffects: PropTypes.object
   }
 
   render() {
-    const { componentClass, realtimeEffects, toggleRealtime, useRealtime } =
-      this.props
+    const { componentClass, realtimeEffects } = this.props
     // Keep only the unique route IDs (so that duplicates are not listed).
     const filteredRoutes = realtimeEffects.normalRoutes.filter(
       (routeId, index, self) => self.indexOf(routeId) === index
@@ -32,43 +29,26 @@ export default class RealtimeAnnotation extends Component {
             <FormattedMessage id="components.RealtimeAnnotation.serviceUpdate" />
           </h3>
           <p className="small">
-            {useRealtime ? (
-              <FormattedMessage
-                id="components.RealtimeAnnotation.delaysShownInResults"
-                values={{
-                  normalDuration: (
-                    <FormattedDuration
-                      duration={realtimeEffects.normalDuration}
-                    />
-                  ),
-                  routes: (
-                    <FormattedList
-                      type="conjunction"
-                      value={filteredRoutes.map((route) => (
-                        <strong key={route.id}>{route}</strong>
-                      ))}
-                    />
-                  ),
-                  strong: Strong
-                }}
-              />
-            ) : (
-              <FormattedMessage id="components.RealtimeAnnotation.delaysNotShownInResults" />
-            )}
+            <FormattedMessage
+              id="components.RealtimeAnnotation.delaysShownInResults"
+              values={{
+                normalDuration: (
+                  <FormattedDuration
+                    duration={realtimeEffects.normalDuration}
+                  />
+                ),
+                routes: (
+                  <FormattedList
+                    type="conjunction"
+                    value={filteredRoutes.map((route) => (
+                      <strong key={route.id}>{route}</strong>
+                    ))}
+                  />
+                ),
+                strong: Strong
+              }}
+            />
           </p>
-          <div>
-            <Button
-              block={componentClass === 'popover'} // display as block in popover
-              className="toggle-realtime"
-              onClick={toggleRealtime}
-            >
-              {useRealtime ? (
-                <FormattedMessage id="components.RealtimeAnnotation.ignoreServiceDelays" />
-              ) : (
-                <FormattedMessage id="components.RealtimeAnnotation.applyServiceDelays" />
-              )}
-            </Button>
-          </div>
         </div>
       </div>
     )
diff --git a/lib/components/narrative/tabbed-itineraries.js b/lib/components/narrative/tabbed-itineraries.js
index f239715e1..e2bb82b42 100644
--- a/lib/components/narrative/tabbed-itineraries.js
+++ b/lib/components/narrative/tabbed-itineraries.js
@@ -138,18 +138,11 @@ class TabbedItineraries extends Component {
     pending: PropTypes.bool,
     setActiveItinerary: PropTypes.func,
     setActiveLeg: PropTypes.func,
-    setActiveStep: PropTypes.func,
-    setUseRealtimeResponse: PropTypes.func,
-    useRealtime: PropTypes.bool
+    setActiveStep: PropTypes.func
   }
 
   static contextType = ComponentContext
 
-  _toggleRealtimeItineraryClick = (e) => {
-    const { setUseRealtimeResponse, useRealtime } = this.props
-    setUseRealtimeResponse({ useRealtime: !useRealtime })
-  }
-
   render() {
     const {
       activeItinerary,
@@ -160,7 +153,6 @@ class TabbedItineraries extends Component {
       realtimeEffects,
       setActiveItinerary,
       timeFormat,
-      useRealtime,
       ...itineraryBodyProps
     } = this.props
     const { ItineraryBody, LegIcon } = this.context
@@ -170,9 +162,7 @@ class TabbedItineraries extends Component {
     /* TODO: should this be moved? */
     const showRealtimeAnnotation =
       realtimeEffects.isAffectedByRealtimeData &&
-      (realtimeEffects.exceedsThreshold ||
-        realtimeEffects.routesDiffer ||
-        !useRealtime)
+      (realtimeEffects.exceedsThreshold || realtimeEffects.routesDiffer)
     return (
       <div className="options itinerary tabbed-itineraries">
         {error && itineraries && <ErrorMessage error={error} warning />}
@@ -192,12 +182,6 @@ class TabbedItineraries extends Component {
           })}
         </div>
 
-        {/* <RealtimeAnnotation
-          realtimeEffects={realtimeEffects}
-          toggleRealtime={this._toggleRealtimeItineraryClick}
-          useRealtime={useRealtime} />
-        */}
-
         {/* Show active itin if itineraries exist and active itin is defined. */}
         {itineraries.length > 0 && activeItinerary >= 0 ? (
           <ItineraryBody
@@ -224,7 +208,6 @@ const mapStateToProps = (state) => {
   const currency = state.otp.config.localization?.currency || 'USD'
   const pending = activeSearch ? Boolean(activeSearch.pending) : false
   const realtimeEffects = getRealtimeEffects(state)
-  const useRealtime = state.otp.useRealtime
 
   return {
     activeItinerary: activeSearch && activeSearch.activeItinerary,
@@ -237,18 +220,12 @@ const mapStateToProps = (state) => {
     // swap out realtime itineraries with non-realtime depending on boolean
     realtimeEffects,
     timeFormat: getTimeFormat(state),
-    tnc: state.otp.tnc,
-    useRealtime
+    tnc: state.otp.tnc
   }
 }
 
 const mapDispatchToProps = (dispatch) => {
-  const {
-    setActiveItinerary,
-    setActiveLeg,
-    setActiveStep,
-    setUseRealtimeResponse
-  } = narrativeActions
+  const { setActiveItinerary, setActiveLeg, setActiveStep } = narrativeActions
   return {
     // FIXME
     setActiveItinerary: (index) => {
@@ -261,10 +238,6 @@ const mapDispatchToProps = (dispatch) => {
     // FIXME
     setActiveStep: (index, step) => {
       dispatch(setActiveStep({ index, step }))
-    },
-    // FIXME
-    setUseRealtimeResponse: ({ useRealtime }) => {
-      dispatch(setUseRealtimeResponse({ useRealtime }))
     }
   }
 }
diff --git a/lib/index.js b/lib/index.js
index d6396fcc0..009977493 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable sort-imports-es6-autofix/sort-imports-es6 */
 import CallTakerControls from './components/admin/call-taker-controls'
 import CallHistoryWindow from './components/admin/call-history-window'
 import FieldTripWindows from './components/admin/field-trip-windows'
@@ -47,7 +49,6 @@ import BatchSearchScreen from './components/mobile/batch-search-screen'
 import { setAutoPlan, setMapCenter } from './actions/config'
 import { getCurrentPosition } from './actions/location'
 import { setLocationToCurrent, clearLocation } from './actions/map'
-import { setUseRealtimeResponse } from './actions/narrative'
 import { findNearbyStops } from './actions/api'
 import createCallTakerReducer from './reducers/call-taker'
 import createOtpReducer from './reducers/create-otp-reducer'
@@ -126,7 +127,6 @@ export {
   setAutoPlan,
   setLocationToCurrent,
   setMapCenter,
-  setUseRealtimeResponse,
 
   // redux utilities
   createCallTakerReducer,

From 1c69b9467c75cd6dbe8a6b0fffa946db512a4ba5 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 09:04:08 -0500
Subject: [PATCH 147/270] refactor(realtime-status-label): add typescript

---
 .../util/formatted-realtime-status-label.tsx  |  3 +-
 ...tus-label.js => realtime-status-label.tsx} | 93 +++++++++++--------
 2 files changed, 56 insertions(+), 40 deletions(-)
 rename lib/components/viewers/{realtime-status-label.js => realtime-status-label.tsx} (59%)

diff --git a/lib/components/util/formatted-realtime-status-label.tsx b/lib/components/util/formatted-realtime-status-label.tsx
index 10206dc50..8d02603b4 100644
--- a/lib/components/util/formatted-realtime-status-label.tsx
+++ b/lib/components/util/formatted-realtime-status-label.tsx
@@ -10,7 +10,8 @@ const FormattedRealtimeStatusLabel = ({
   minutes,
   status
 }: {
-  minutes: number
+  // TYPESCRIPT TODO: This type doesn't feel correct, but for some reason the FormattedMessage doesn't mind
+  minutes: number | JSX.Element | boolean
   status: string
 }): JSX.Element | null => {
   switch (status) {
diff --git a/lib/components/viewers/realtime-status-label.js b/lib/components/viewers/realtime-status-label.tsx
similarity index 59%
rename from lib/components/viewers/realtime-status-label.js
rename to lib/components/viewers/realtime-status-label.tsx
index dd20d6d76..def9470df 100644
--- a/lib/components/viewers/realtime-status-label.js
+++ b/lib/components/viewers/realtime-status-label.tsx
@@ -1,11 +1,13 @@
-import React from 'react'
-import { FormattedTime } from 'react-intl'
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// Typescript TODO: Waiting on viewer.js being typed
 import { connect } from 'react-redux'
+import { FormattedTime } from 'react-intl'
+import React from 'react'
 import styled from 'styled-components'
 
+import { getTripStatus, REALTIME_STATUS } from '../../util/viewer'
 import FormattedDuration from '../util/formatted-duration'
 import FormattedRealtimeStatusLabel from '../util/formatted-realtime-status-label'
-import { getTripStatus, REALTIME_STATUS } from '../../util/viewer'
 
 // If shown, keep the '5 min' portion of the status string on the same line.
 export const DelayText = styled.span`
@@ -14,11 +16,11 @@ export const DelayText = styled.span`
 
 export const MainContent = styled.div``
 
-const Container = styled.div`
-${props => props.withBackground
-    ? `background-color: ${props.color};`
-    : `color: ${props.color};`
-}
+const Container = styled.div<{ withBackground?: boolean }>`
+  ${(props) =>
+    props.withBackground
+      ? `background-color: ${props.color};`
+      : `color: ${props.color};`}
 `
 
 const TimeStruck = styled.div`
@@ -64,40 +66,47 @@ const RealtimeStatusLabel = ({
   originalTime,
   time,
   withBackground
-}) => {
-  const status = getTripStatus(isRealtime, delay, onTimeThresholdSeconds)
-  const isEarlyOrLate = status === REALTIME_STATUS.EARLY || status === REALTIME_STATUS.LATE
+}: {
+  className?: string
+  delay: number
+  isRealtime?: boolean
+  onTimeThresholdSeconds?: number
+  originalTime?: number
+  time?: number
+  withBackground?: boolean
+}): JSX.Element => {
+  // @ts-ignore getTripStatus is not typed yet
+  const status: typeof REALTIME_STATUS = getTripStatus(
+    isRealtime,
+    delay,
+    onTimeThresholdSeconds
+  )
+  const isEarlyOrLate =
+    // @ts-ignore getTripStatus is not typed yet
+    status === REALTIME_STATUS.EARLY || status === REALTIME_STATUS.LATE
   // Use a default background color if the status object doesn't set a color
   // (e.g. for 'Scheduled' status), but only in withBackground mode.
+  // @ts-ignore getTripStatus is not typed yet
   const color = STATUS[status].color || (withBackground && '#6D6C6C')
   // Render time if provided.
   let renderedTime
   if (time) {
     // If transit vehicle is not on time, strike the original scheduled time
     // and display the updated time underneath.
-    renderedTime = isEarlyOrLate
-      ? (
-        <TimeBlock>
-          <TimeStruck>
-            <FormattedTime
-              timeStyle='short'
-              value={originalTime}
-            />
-          </TimeStruck>
-          <div>
-            <FormattedTime
-              timeStyle='short'
-              value={time}
-            />
-          </div>
-        </TimeBlock>
-      )
-      : <div>
-        <FormattedTime
-          timeStyle='short'
-          value={time}
-        />
+    renderedTime = isEarlyOrLate ? (
+      <TimeBlock>
+        <TimeStruck>
+          <FormattedTime timeStyle="short" value={originalTime} />
+        </TimeStruck>
+        <div>
+          <FormattedTime timeStyle="short" value={time} />
+        </div>
+      </TimeBlock>
+    ) : (
+      <div>
+        <FormattedTime timeStyle="short" value={time} />
       </div>
+    )
   }
   return (
     <Container
@@ -108,11 +117,14 @@ const RealtimeStatusLabel = ({
       {renderedTime}
       <MainContent>
         <FormattedRealtimeStatusLabel
-          minutes={isEarlyOrLate && (
-            <DelayText>
-              <FormattedDuration duration={Math.abs(delay)} />
-            </DelayText>
-          )}
+          minutes={
+            isEarlyOrLate && (
+              <DelayText>
+                <FormattedDuration duration={Math.abs(delay)} />
+              </DelayText>
+            )
+          }
+          // @ts-ignore getTripStatus is not typed yet
           status={STATUS[status].label}
         />
       </MainContent>
@@ -120,7 +132,10 @@ const RealtimeStatusLabel = ({
   )
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: {
+  // Typescript TODO: type state
+  otp: { config: { onTimeThresholdSeconds: any } }
+}) => ({
   onTimeThresholdSeconds: state.otp.config.onTimeThresholdSeconds
 })
 

From 604c1b1d237015f639939708b2770cab1d5bad50 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 09:04:41 -0500
Subject: [PATCH 148/270] refactor(realtime-status-label): make delay less
 confusing

---
 lib/components/viewers/realtime-status-label.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/viewers/realtime-status-label.tsx b/lib/components/viewers/realtime-status-label.tsx
index def9470df..32d5f4d30 100644
--- a/lib/components/viewers/realtime-status-label.tsx
+++ b/lib/components/viewers/realtime-status-label.tsx
@@ -25,6 +25,7 @@ const Container = styled.div<{ withBackground?: boolean }>`
 
 const TimeStruck = styled.div`
   text-decoration: line-through;
+  opacity: 0.4;
 `
 
 const TimeBlock = styled.div`

From 3fdd082e569abbcf0f1b1ef77d94ff0bd60b1da0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 09:07:52 -0500
Subject: [PATCH 149/270] refactor: clean up types

---
 lib/components/util/formatted-realtime-status-label.tsx | 4 ++--
 lib/components/viewers/realtime-status-label.tsx        | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/components/util/formatted-realtime-status-label.tsx b/lib/components/util/formatted-realtime-status-label.tsx
index 8d02603b4..3972f20b9 100644
--- a/lib/components/util/formatted-realtime-status-label.tsx
+++ b/lib/components/util/formatted-realtime-status-label.tsx
@@ -10,8 +10,8 @@ const FormattedRealtimeStatusLabel = ({
   minutes,
   status
 }: {
-  // TYPESCRIPT TODO: This type doesn't feel correct, but for some reason the FormattedMessage doesn't mind
-  minutes: number | JSX.Element | boolean
+  // This will usually become a string, but the type is a React Element since it is a FormattedMessage
+  minutes: JSX.Element
   status: string
 }): JSX.Element | null => {
   switch (status) {
diff --git a/lib/components/viewers/realtime-status-label.tsx b/lib/components/viewers/realtime-status-label.tsx
index 32d5f4d30..1477927c6 100644
--- a/lib/components/viewers/realtime-status-label.tsx
+++ b/lib/components/viewers/realtime-status-label.tsx
@@ -119,10 +119,12 @@ const RealtimeStatusLabel = ({
       <MainContent>
         <FormattedRealtimeStatusLabel
           minutes={
-            isEarlyOrLate && (
+            isEarlyOrLate ? (
               <DelayText>
                 <FormattedDuration duration={Math.abs(delay)} />
               </DelayText>
+            ) : (
+              <>{null}</>
             )
           }
           // @ts-ignore getTripStatus is not typed yet

From 1b9fe12ceace9009b559ab877675bf7d15d36e90 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 09:08:08 -0500
Subject: [PATCH 150/270] refactor(realtime-status-label): improve readability

---
 lib/components/viewers/realtime-status-label.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/viewers/realtime-status-label.tsx b/lib/components/viewers/realtime-status-label.tsx
index 1477927c6..bb21ab430 100644
--- a/lib/components/viewers/realtime-status-label.tsx
+++ b/lib/components/viewers/realtime-status-label.tsx
@@ -25,7 +25,7 @@ const Container = styled.div<{ withBackground?: boolean }>`
 
 const TimeStruck = styled.div`
   text-decoration: line-through;
-  opacity: 0.4;
+  opacity: 0.5;
 `
 
 const TimeBlock = styled.div`

From ffcd36c3def760c57acd170d6d993bf0764be177 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 09:13:21 -0500
Subject: [PATCH 151/270] refactor: remove unused strings

---
 i18n/en-US.yml | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 345338b0b..8216c7667 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -330,12 +330,10 @@ components:
     itinerary: Itinerary
     toggleMap: Toggle Map
   RealtimeAnnotation:
-    delaysNotShownInResults: Your trip results are currently being affected by service delays. These delays do not factor into travel times shown below.
     delaysShownInResults: >
       Your trip results have been adjusted based on real-time
       information. Under normal conditions, this trip would take {normalDuration}
       using the following routes: {routes}.
-    ignoreServiceDelays: Ignore service delays
     serviceUpdate: Service update
   RealtimeStatusLabel:
     # Note to translator: In itinerary body, early or late is single-line
@@ -374,10 +372,6 @@ components:
     agencyFilter: Agency Filter
     allAgencies: All Agencies
     allModes: All Modes # Note to translator: This text is width-constrained.
-    applyServiceDelays: Apply service delays
-    delaysNotShownInResults: >
-      Your trip results are currently being affected by service delays.
-      These delays do not factor into travel times shown below.
     delaysShownInResults: >
       Your trip results have been adjusted based on real-time
       information. Under normal conditions, this trip would take <strong>{normalDuration}</strong>
@@ -385,7 +379,6 @@ components:
     details: " " # If the string is left blank, React-Intl renders the id
     findARoute: Find A Route
     header: Route Viewer
-    ignoreServiceDelays: Ignore service delays
     modeFilter: Mode Filter
     noFilteredRoutesFound: No routes match your filter!
     noRouteUrl: No route URL provided.

From f5094ed7f2d3dbb8e74e55d6eb4c4df3a75d5c9b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 27 Jan 2022 09:18:56 -0500
Subject: [PATCH 152/270] test(StopViewer): Update snapshots

---
 .../viewers/__snapshots__/stop-viewer.js.snap | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
index 53a33a21d..dd3959953 100644
--- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
@@ -1483,7 +1483,7 @@ exports[`components > viewers > stop viewer should render countdown times after
                           margin={0.25}
                         >
                           <span
-                            className="sc-gKseQn qNOdL"
+                            className="sc-dlfnuX jzpRQX"
                           >
                             <input
                               name="autoUpdate"
@@ -2338,7 +2338,7 @@ exports[`components > viewers > stop viewer should render countdown times after
                                     >
                                       <styled.div>
                                         <div
-                                          className="sc-iBPTik frYtny"
+                                          className="sc-hKgJUU hryKBt"
                                         >
                                           P
                                         </div>
@@ -3375,7 +3375,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
                           margin={0.25}
                         >
                           <span
-                            className="sc-gKseQn qNOdL"
+                            className="sc-dlfnuX jzpRQX"
                           >
                             <input
                               name="autoUpdate"
@@ -3834,7 +3834,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
                                     >
                                       <styled.div>
                                         <div
-                                          className="sc-iBPTik frYtny"
+                                          className="sc-hKgJUU hryKBt"
                                         >
                                           P
                                         </div>
@@ -5359,7 +5359,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
                           margin={0.25}
                         >
                           <span
-                            className="sc-gKseQn qNOdL"
+                            className="sc-dlfnuX jzpRQX"
                           >
                             <input
                               name="autoUpdate"
@@ -6214,7 +6214,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
                                     >
                                       <styled.div>
                                         <div
-                                          className="sc-iBPTik frYtny"
+                                          className="sc-hKgJUU hryKBt"
                                         >
                                           P
                                         </div>
@@ -9805,7 +9805,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                           margin={0.25}
                         >
                           <span
-                            className="sc-gKseQn qNOdL"
+                            className="sc-dlfnuX jzpRQX"
                           >
                             <input
                               name="autoUpdate"
@@ -11692,7 +11692,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                                     >
                                       <styled.div>
                                         <div
-                                          className="sc-iBPTik frYtny"
+                                          className="sc-hKgJUU hryKBt"
                                         >
                                           P
                                         </div>
@@ -13976,7 +13976,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                           margin={0.25}
                         >
                           <span
-                            className="sc-gKseQn qNOdL"
+                            className="sc-dlfnuX jzpRQX"
                           >
                             <input
                               name="autoUpdate"
@@ -15843,7 +15843,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                                     >
                                       <styled.div>
                                         <div
-                                          className="sc-iBPTik frYtny"
+                                          className="sc-hKgJUU hryKBt"
                                         >
                                           P
                                         </div>

From ab05230b08afe5388e99fa45b7e115f65219fcd3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 27 Jan 2022 10:06:27 -0500
Subject: [PATCH 153/270] improvement(UserSettings): Add scrolling for
 batch/calltaker UIs.

---
 lib/components/app/batch-routing-panel.js | 2 +-
 lib/components/app/call-taker-panel.js    | 2 +-
 lib/components/form/user-settings.js      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/app/batch-routing-panel.js b/lib/components/app/batch-routing-panel.js
index c14f50bb7..673f8f322 100644
--- a/lib/components/app/batch-routing-panel.js
+++ b/lib/components/app/batch-routing-panel.js
@@ -51,7 +51,7 @@ class BatchRoutingPanel extends Component {
           <BatchSettings />
         </div>
         {!activeSearch && showUserSettings && (
-          <UserSettings style={{ margin: '10px 0 0' }} />
+          <UserSettings style={{ margin: '0 10px', overflowY: 'auto' }} />
         )}
         <div
           className="desktop-narrative-container"
diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 7456f5ae5..bb98b54a4 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -275,7 +275,7 @@ class CallTakerPanel extends Component {
           </div>
         </div>
         {!activeSearch && !showPlanTripButton && showUserSettings && (
-          <UserSettings />
+          <UserSettings style={{ margin: '0 0 0 10px', overflowY: 'auto' }} />
         )}
         <div
           className="desktop-narrative-container"
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 7baf07323..c250643a1 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -222,7 +222,7 @@ class UserSettings extends Component {
 
   render() {
     const {
-      className,
+      className = '',
       forgetSearch,
       intl,
       isUsingOtpMiddleware,

From 6dc50ae9f230e626e1e44e2c3b989647922c00a4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 27 Jan 2022 10:37:01 -0500
Subject: [PATCH 154/270] chore(i18n): Match French messages with English.

---
 i18n/fr-FR.yml | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index ecf28a9ee..64908ebd7 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -317,11 +317,8 @@ components:
     itinerary: Votre trajet
     toggleMap: Afficher/masquer la carte
   RealtimeAnnotation:
-    delaysNotShownInResults: "Vos trajets recherchés sont perturbés par des retards.
-      Ces retards ne sont pas pris en compte dans les temps de trajet ci-dessous."
     delaysShownInResults: "Vos trajets recherchés ont été mis à jour avec les conditions en temps réel.
       En temps normal, ce trajet prendrait {normalDuration} en empruntant les lignes: {routes}."
-    ignoreServiceDelays: Ignorer les retards
     serviceUpdate: Information sur le service
   RealtimeStatusLabel:
     # Note to translator: In itinerary body, early or late is single-line
@@ -360,17 +357,12 @@ components:
     agencyFilter: Filtrer les transporteurs
     allAgencies: Tous transporteurs
     allModes: Tous modes # Note to translator: This text is width-constrained.
-    applyServiceDelays: Appliquer les retards
-    delaysNotShownInResults: >
-      Vos trajets recherchés sont perturbés par des retards.
-      Ces retards ne sont pas pris en compte dans les temps de trajet ci-dessous.
     delaysShownInResults: >
       Vos trajets recherchés ont été mis à jour avec les conditions en temps réel.
       En temps normal, ce trajet prendrait <strong>{normalDuration}</strong> en empruntant les lignes: {routes}.
     details: " " # If the string is left blank, React-Intl renders the id
     findARoute: Chercher une ligne
     header: Index des lignes
-    ignoreServiceDelays: Ignorer les retards
     modeFilter: Filtre pour les modes
     noFilteredRoutesFound: Aucune ligne ne correspond à vos critères
     noRouteUrl: Aucun lien fourni pour cette ligne.

From 67c889ffe392c9295d1dbee16bd57352a3efe3eb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 12:53:17 -0500
Subject: [PATCH 155/270] fix(i18n/error): more helpful trip plan failure
 message

---
 i18n/en-US.yml    | 2 +-
 lib/util/state.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 345338b0b..aa25fc56f 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -857,7 +857,7 @@ util:
     networkUnavailable: The {network} network is unavailable at this moment.
     noTripFound: No trip found.
     noTripFoundForMode: No trip found for {modes}.
-    noTripFoundReason: There may be no transit service within the maximum specified distance or at the specified time, or your start or end point might not be safely accessible.
+    noTripFoundReason: There may be no transit service within the maximum specified distance or at the specified time, or your start or end point might not be safely accessible. <strong>An itinerary may be found if you adjust some Transit Options & Preferences above.</strong>
     noTripFoundWithReason: "{noTripFound} {reason}"
     titleBarRouteId: "Route {routeId}"
     titleBarStopId: "Stop {stopId}"
diff --git a/lib/util/state.js b/lib/util/state.js
index 2f3c6538b..a3308b884 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -12,6 +12,7 @@ import React from 'react'
 
 import { MainPanelContent } from '../actions/ui'
 import { StyledFormattedMode } from '../components/util/formatted-mode'
+import Strong from '../components/util/strong-text'
 
 const { calculateFares } = coreUtils.itinerary
 
@@ -163,7 +164,7 @@ export function getErrorMessage(error, intl) {
         id="util.state.noTripFoundWithReason"
         values={{
           noTripFound: noTripFoundText,
-          reason: <FormattedMessage id="util.state.noTripFoundReason" />
+          reason: <FormattedMessage id="util.state.noTripFoundReason" values={{strong:Strong}}/>,
         }}
       />
     )

From 348446ab1bf6305c17a844c3857ece83d6363222 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 14:22:14 -0500
Subject: [PATCH 156/270] feat: add changelog

---
 CHANGELOG.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..43e8802ad
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,63 @@
+# Open Trip Planner - React Redux Changelog
+
+# [3.0.0](https://github.com/opentripplanner/otp-react-redux/compare/v2.2.0...v3.0.0) (2021-04-13)
+
+- Add mobile batch results screen
+- User Account Settings
+- Add more buttons to favorites management
+- Re-organize user settings
+- Add field trip module
+
+# [3.1.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.0.1...v3.1.0) (2021-07-07)
+
+- Add reverse directions button
+- Add mailables submodule to calltaker module
+- Improve map performance
+
+# [3.2.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.1.2...v3.2.0) (2021-07-15)
+
+- Add GTFS-RT vehicle overlay
+- Add user language settings
+- Support overriding strings
+
+# [3.3.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.2.0...v3.3.0) (2021-07-22)
+
+- Field trip module
+- Add save button
+- Add delete button
+- Allow configuration of capacity
+
+# [3.4.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.3.0...v3.4.0) (2021-08-18)
+
+- Add automatic a11y compliance tests
+- Adjust colors to conform with [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/).
+
+# [3.5.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.4.3...v3.5.0) (2021-10-05)
+
+- Add Traveler Tools Menu
+- Add Route Details Viewer
+- Move route viewer to title bar
+- Add support for displaying realtime vehicle positions
+- Support filtering routes by agency or mode
+
+# [3.6.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.5.1...v3.6.0) (2021-10-21)
+
+- Further replace colors with accessible ones
+- Add nearby amenities panel to stop viewer
+- Add support for Local Places Index
+
+# [3.7.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.6.0...v3.7.0) (2021-11-12)
+
+- Fix reported crashes
+- Zoom to stop when opening stop viewer
+- Display search results based on geolocation
+- New stop markers on map at high zoom levels
+- Add accessibility labels to legs and itineraries when accessible routing is enabled
+- Support showing multiple fare prices
+
+# [3.8.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.7.0...v3.8.0) (2021-12-16)
+
+- Fix crashes reported to us
+- Improve screen reader experience
+- Add user setting for planning accessible trips by default
+- Support internationalization of most component

From b037a58a365bcb8ac6d09dbdc423b69d2e863691 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 27 Jan 2022 14:25:00 -0500
Subject: [PATCH 157/270] refactor(changelog): adjust header links

---
 CHANGELOG.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43e8802ad..1b0531598 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Open Trip Planner - React Redux Changelog
 
-# [3.0.0](https://github.com/opentripplanner/otp-react-redux/compare/v2.2.0...v3.0.0) (2021-04-13)
+## [3.0.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.0.0) (2021-04-13)
 
 - Add mobile batch results screen
 - User Account Settings
@@ -8,31 +8,31 @@
 - Re-organize user settings
 - Add field trip module
 
-# [3.1.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.0.1...v3.1.0) (2021-07-07)
+## [3.1.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.1.0) (2021-07-07)
 
 - Add reverse directions button
 - Add mailables submodule to calltaker module
 - Improve map performance
 
-# [3.2.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.1.2...v3.2.0) (2021-07-15)
+## [3.2.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.2.0) (2021-07-15)
 
 - Add GTFS-RT vehicle overlay
 - Add user language settings
 - Support overriding strings
 
-# [3.3.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.2.0...v3.3.0) (2021-07-22)
+## [3.3.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.3.0) (2021-07-22)
 
 - Field trip module
 - Add save button
 - Add delete button
 - Allow configuration of capacity
 
-# [3.4.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.3.0...v3.4.0) (2021-08-18)
+## [3.4.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.4.0) (2021-08-18)
 
 - Add automatic a11y compliance tests
 - Adjust colors to conform with [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/).
 
-# [3.5.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.4.3...v3.5.0) (2021-10-05)
+## [3.5.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.5.0) (2021-10-05)
 
 - Add Traveler Tools Menu
 - Add Route Details Viewer
@@ -40,13 +40,13 @@
 - Add support for displaying realtime vehicle positions
 - Support filtering routes by agency or mode
 
-# [3.6.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.5.1...v3.6.0) (2021-10-21)
+## [3.6.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.6.0) (2021-10-21)
 
 - Further replace colors with accessible ones
 - Add nearby amenities panel to stop viewer
 - Add support for Local Places Index
 
-# [3.7.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.6.0...v3.7.0) (2021-11-12)
+## [3.7.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.7.0) (2021-11-12)
 
 - Fix reported crashes
 - Zoom to stop when opening stop viewer
@@ -55,7 +55,7 @@
 - Add accessibility labels to legs and itineraries when accessible routing is enabled
 - Support showing multiple fare prices
 
-# [3.8.0](https://github.com/opentripplanner/otp-react-redux/compare/v3.7.0...v3.8.0) (2021-12-16)
+## [3.8.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.8.0) (2021-12-16)
 
 - Fix crashes reported to us
 - Improve screen reader experience

From 83f2573ec464312673ee9a1317c33f66dce53d11 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 27 Jan 2022 14:46:29 -0500
Subject: [PATCH 158/270] refactor(desktop-nav): Remove find check

---
 lib/components/app/desktop-nav.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index 59f942141..5b1b9341f 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -70,10 +70,6 @@ const DesktopNav = ({ otpConfig }: otpConfigType) => {
       <Navbar.Collapse>
         <Nav pullRight>
           {configLanguages &&
-            // Avoid rendering the LocaleSelector for configs without languages
-            !Object.keys(configLanguages).find(
-              (key) => key !== 'allLanguages' && !configLanguages[key].name
-            ) &&
             // Ensure that > 1 valid language is defined
             Object.keys(configLanguages).filter(
               (key) => key !== 'allLanguages' && configLanguages[key].name

From 23ef058a46835bd8ce5710176ca1671ffcf7a586 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 28 Jan 2022 07:38:51 -0500
Subject: [PATCH 159/270] refactor: cleanup

---
 lib/components/mobile/results-header.js | 2 +-
 lib/components/mobile/results-screen.js | 6 ++----
 lib/util/state.js                       | 7 +------
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/lib/components/mobile/results-header.js b/lib/components/mobile/results-header.js
index 75120b248..3c0a92e92 100644
--- a/lib/components/mobile/results-header.js
+++ b/lib/components/mobile/results-header.js
@@ -100,7 +100,7 @@ class ResultsHeader extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   const activeSearch = getActiveSearch(state)
-  const response = !activeSearch ? null : activeSearch.response
+  const response = activeSearch?.response
 
   const itineraries = getActiveItineraries(state)
   return {
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index 615e76a4c..0f9c5362b 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -158,7 +158,7 @@ class MobileResultsScreen extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   const activeSearch = getActiveSearch(state)
-  const response = !activeSearch ? null : activeSearch.response
+  const response = activeSearch?.response
 
   const realtimeEffects = getRealtimeEffects(state)
   const itineraries = getActiveItineraries(state)
@@ -176,6 +176,4 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-const mapDispatchToProps = {}
-
-export default connect(mapStateToProps, mapDispatchToProps)(MobileResultsScreen)
+export default connect(mapStateToProps, {})(MobileResultsScreen)
diff --git a/lib/util/state.js b/lib/util/state.js
index 3c5eae7d9..a02a1db43 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -277,12 +277,7 @@ export const getActiveItineraries = createSelector(
     realtimeResponse,
     activeFieldTripRequest
   ) => {
-    const response =
-      !nonRealtimeResponse && !realtimeResponse
-        ? null
-        : realtimeResponse
-        ? realtimeResponse
-        : nonRealtimeResponse
+    const response = realtimeResponse || nonRealtimeResponse
     const itineraries = []
     // keep track of itinerary hashes in order to not include duplicate
     // itineraries. Duplicate itineraries can occur in batch routing where a walk

From d2ce58fe60a9a6f465297efb3fc507cb6f3b14a0 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 1 Feb 2022 09:28:30 -0500
Subject: [PATCH 160/270] refactor(util/user): Accommodate no logged-in user.

---
 lib/actions/api.js                           | 22 ++++++++++----------
 lib/components/user/places/place-shortcut.js | 10 ++++-----
 lib/util/user.js                             |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index d91b042f4..a4c5d2a21 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -11,7 +11,7 @@ import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
 import qs from 'qs'
 
-import { convertToPlace, isOtpMiddleware } from '../util/user'
+import { convertToPlace, getPersistenceMode } from '../util/user'
 import { getSecureFetchOptions } from '../util/middleware'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
 
@@ -100,8 +100,8 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
   return function (dispatch, getState) {
     // FIXME: batchId is searchId for now.
     const state = getState()
-    const { currentQuery } = state.otp
-    const isUsingOtpMiddleware = isOtpMiddleware(state.otp.config.persistence)
+    const { config, currentQuery } = state.otp
+    const persistenceMode = getPersistenceMode(config.persistence)
 
     const isNewSearch = !searchId
     if (isNewSearch) searchId = randId()
@@ -152,7 +152,7 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
             // If tracking is enabled, store locations and search after successful
             // search is completed.
             if (
-              !isUsingOtpMiddleware &&
+              persistenceMode.isLocalStorage &&
               state.user?.localUser?.storeTripHistory
             ) {
               const { from, to } = currentQuery
@@ -208,9 +208,12 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
         // when a logged-in user refreshes the page, the trip request in the URL is not recorded again
         // (state.user stays unpopulated until after this function is called).
         //
-        const shouldStoreTrip = isUsingOtpMiddleware
-          ? state.user?.loggedInUser?.storeTripHistory
-          : state.user?.localUser?.storeTripHistory
+        let shouldStoreTrip = false
+        if (persistenceMode.isOtpMiddleware) {
+          shouldStoreTrip = state.user?.loggedInUser?.storeTripHistory
+        } else if (persistenceMode.isLocalStorage) {
+          shouldStoreTrip = state.user?.localUser?.storeTripHistory
+        }
 
         const nonRealtimeFetch = fetch(
           constructRoutingQuery(state, true, {
@@ -224,10 +227,7 @@ export function routingQuery(searchId = null, updateSearchInReducer = false) {
             // For OTP Middleware users, if tracking is enabled,
             // refetch recent trip requests after a few seconds,
             // so that persistence of trip requests has time to complete.
-            if (
-              isUsingOtpMiddleware &&
-              state.user?.loggedInUser?.storeTripHistory
-            ) {
+            if (persistenceMode.isOtpMiddleware && shouldStoreTrip) {
               setTimeout(() => {
                 dispatch(fetchTripRequests())
               }, 5000)
diff --git a/lib/components/user/places/place-shortcut.js b/lib/components/user/places/place-shortcut.js
index f29c46159..5db0d2109 100644
--- a/lib/components/user/places/place-shortcut.js
+++ b/lib/components/user/places/place-shortcut.js
@@ -6,7 +6,7 @@ import React, { Component } from 'react'
 
 import * as mapActions from '../../../actions/map'
 import * as uiActions from '../../../actions/ui'
-import { convertToLegacyLocation, isOtpMiddleware } from '../../../util/user'
+import { convertToLegacyLocation, getPersistenceMode } from '../../../util/user'
 import { getFormattedPlaces } from '../../../util/i18n'
 import { isBlank } from '../../../util/ui'
 
@@ -37,11 +37,11 @@ class PlaceShortcut extends Component {
   }
 
   _onSelect = () => {
-    const { index, intl, isOtpMiddleware, place, routeTo } = this.props
+    const { index, intl, persistenceMode, place, routeTo } = this.props
     if (isBlank(place.address)) {
-      if (isOtpMiddleware) {
+      if (persistenceMode.isOtpMiddleware) {
         routeTo(`/account/places/${index}`)
-      } else {
+      } else if (persistenceMode.isLocalStorage) {
         window.alert(
           intl.formatMessage(
             { id: 'components.Place.enterAlert' },
@@ -89,7 +89,7 @@ const mapStateToProps = (state) => {
   const { config, currentQuery: query } = state.otp
   const { persistence } = config
   return {
-    isOtpMiddleware: isOtpMiddleware(persistence),
+    persistenceMode: getPersistenceMode(persistence),
     query
   }
 }
diff --git a/lib/util/user.js b/lib/util/user.js
index 43b783af1..28b32e761 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -157,7 +157,7 @@ export function getUserLocations(state) {
   const { persistence } = state.otp.config
   const { localUser, loggedInUser } = state.user
   const persistenceMode = getPersistenceMode(persistence)
-  if (persistenceMode.isOtpMiddleware) {
+  if (persistenceMode.isOtpMiddleware && loggedInUser) {
     saved = loggedInUser.savedLocations
       .filter((place) => !isBlank(place.address))
       .map(convertToLegacyLocation)

From a26a1d74f96c8a675361ddf0b58bb0e4b3c9323a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Feb 2022 07:22:23 -0800
Subject: [PATCH 161/270] refactor(util/state): remove hardcoded message update

---
 i18n/en-US.yml    | 2 +-
 lib/util/state.js | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index aa25fc56f..345338b0b 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -857,7 +857,7 @@ util:
     networkUnavailable: The {network} network is unavailable at this moment.
     noTripFound: No trip found.
     noTripFoundForMode: No trip found for {modes}.
-    noTripFoundReason: There may be no transit service within the maximum specified distance or at the specified time, or your start or end point might not be safely accessible. <strong>An itinerary may be found if you adjust some Transit Options & Preferences above.</strong>
+    noTripFoundReason: There may be no transit service within the maximum specified distance or at the specified time, or your start or end point might not be safely accessible.
     noTripFoundWithReason: "{noTripFound} {reason}"
     titleBarRouteId: "Route {routeId}"
     titleBarStopId: "Stop {stopId}"
diff --git a/lib/util/state.js b/lib/util/state.js
index a3308b884..dde8370b6 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -164,7 +164,12 @@ export function getErrorMessage(error, intl) {
         id="util.state.noTripFoundWithReason"
         values={{
           noTripFound: noTripFoundText,
-          reason: <FormattedMessage id="util.state.noTripFoundReason" values={{strong:Strong}}/>,
+          reason: (
+            <FormattedMessage
+              id="util.state.noTripFoundReason"
+              values={{ strong: Strong }}
+            />
+          ),
         }}
       />
     )

From 5f9795a0b3f3911ee4173702d7a4c11a97bcb022 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 1 Feb 2022 11:54:29 -0500
Subject: [PATCH 162/270] refactor: Address other PR comments.

---
 lib/components/form/user-settings.js | 4 +---
 lib/components/user/places/place.js  | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index c250643a1..d78f4593d 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -82,9 +82,7 @@ class UserSettings extends Component {
     const { intl, localUser, toggleTracking } = this.props
     const { recentPlaces, recentSearches, storeTripHistory } = localUser
     if (!storeTripHistory) return
-    const hasRecents =
-      (recentPlaces && recentPlaces.length > 0) ||
-      (recentSearches && recentSearches.length > 0)
+    const hasRecents = recentPlaces?.length > 0 || recentSearches?.length > 0
 
     // If user has recents and does not confirm deletion, return without doing
     // anything.
diff --git a/lib/components/user/places/place.js b/lib/components/user/places/place.js
index 40029b1db..9c68bc528 100644
--- a/lib/components/user/places/place.js
+++ b/lib/components/user/places/place.js
@@ -11,6 +11,11 @@ const Container = styled.li`
   align-items: stretch;
   display: flex;
 `
+
+// Definitions below are for customizable subcomponents referenced in
+// styled.js to define multiple flavors of the Place component,
+// without creating circular references between that file and this file.
+
 export const PlaceButton = styled(Button)`
   background: none;
   flex: 1 0 0;
@@ -67,7 +72,7 @@ const Place = ({
         to={to}
       >
         <PlaceButton onClick={onClick} title={title}>
-          {largeIcon && <Icon size="2x" type={icon} />}
+          {largeIcon && <Icon size={iconSize} type={icon} />}
           <PlaceContent>
             <PlaceText className="place-text">
               {!largeIcon && <Icon type={icon} />}

From bdec8ebe79b3d16daa73aa627089ada224466049 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 1 Feb 2022 12:48:22 -0500
Subject: [PATCH 163/270] fix: Minor fixes.

---
 lib/components/app/call-taker-panel.js | 2 +-
 lib/components/form/user-settings.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index bb98b54a4..d5c12cf0c 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -275,7 +275,7 @@ class CallTakerPanel extends Component {
           </div>
         </div>
         {!activeSearch && !showPlanTripButton && showUserSettings && (
-          <UserSettings style={{ margin: '0 0 0 10px', overflowY: 'auto' }} />
+          <UserSettings style={{ margin: '0 10px', overflowY: 'auto' }} />
         )}
         <div
           className="desktop-narrative-container"
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index d78f4593d..78aeeb0b1 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -271,7 +271,7 @@ class UserSettings extends Component {
             forgetSearch={forgetSearch}
             setQueryParam={setQueryParam}
             tripRequests={loggedInUserTripRequests}
-            user={localUser}
+            user={loggedInUser}
           />
         ) : (
           this._getLocalStorageOnlyContent()

From e07f3fdf69f8bc646fc7decb4b57310bae5bc1bb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Feb 2022 12:05:51 -0800
Subject: [PATCH 164/270] refactor: run autoformatter

---
 lib/components/narrative/trip-tools.js | 103 ++++++++++++-------------
 1 file changed, 51 insertions(+), 52 deletions(-)

diff --git a/lib/components/narrative/trip-tools.js b/lib/components/narrative/trip-tools.js
index 9b89a814b..fd5c7b01f 100644
--- a/lib/components/narrative/trip-tools.js
+++ b/lib/components/narrative/trip-tools.js
@@ -1,8 +1,8 @@
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
 import bowser from 'bowser'
 import copyToClipboard from 'copy-to-clipboard'
-import React, {Component} from 'react'
-import { connect } from 'react-redux'
-import { Button } from 'react-bootstrap'
+import React, { Component } from 'react'
 // import { DropdownButton, MenuItem } from 'react-bootstrap'
 import { FormattedMessage, injectIntl } from 'react-intl'
 
@@ -10,10 +10,10 @@ import Icon from '../util/icon'
 
 class TripTools extends Component {
   static defaultProps = {
-    buttonTypes: [ 'COPY_URL', 'PRINT', 'REPORT_ISSUE', 'START_OVER' ]
+    buttonTypes: ['COPY_URL', 'PRINT', 'REPORT_ISSUE', 'START_OVER']
   }
 
-  render () {
+  render() {
     const { buttonTypes, reactRouterConfig, reportConfig } = this.props
 
     const buttonComponents = []
@@ -38,8 +38,8 @@ class TripTools extends Component {
           buttonComponents.push(
             // FIXME: The Spanish string does not fit in button width.
             <LinkButton
-              icon='undo'
-              text={<FormattedMessage id='common.forms.startOver' />}
+              icon="undo"
+              text={<FormattedMessage id="common.forms.startOver" />}
               url={startOverUrl}
             />
           )
@@ -48,8 +48,12 @@ class TripTools extends Component {
     })
 
     return (
-      <div className='trip-tools'>
-        {buttonComponents.map((btn, i) => <div className='button-container' key={i}>{btn}</div>)}
+      <div className="trip-tools">
+        {buttonComponents.map((btn, i) => (
+          <div className="button-container" key={i}>
+            {btn}
+          </div>
+        ))}
       </div>
     )
   }
@@ -82,7 +86,7 @@ class ShareSaveDropdownButton extends Component {
 // Copy URL Button
 
 class CopyUrlButton extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.state = { showCopied: false }
   }
@@ -100,7 +104,10 @@ class CopyUrlButton extends Component {
         url = `${parts[0]}#/start/x/x/x/${routerId}${parts[1]}`
       } else {
         // Console logs are not internationalized.
-        console.warn('URL not formatted as expected, copied URL will not contain session routerId.', routerId)
+        console.warn(
+          'URL not formatted as expected, copied URL will not contain session routerId.',
+          routerId
+        )
       }
     }
     copyToClipboard(url)
@@ -108,27 +115,21 @@ class CopyUrlButton extends Component {
     window.setTimeout(this._resetState, 2000)
   }
 
-  render () {
+  render() {
     return (
       <div>
-        <Button
-          className='tool-button'
-          onClick={this._onClick}
-        >
-          {this.state.showCopied
-            ? (
-              <span>
-                <Icon type='check' withSpace />
-                <FormattedMessage id='components.TripTools.linkCopied' />
-              </span>
-            )
-            : (
-              <span>
-                <Icon type='clipboard' withSpace />
-                <FormattedMessage id='components.TripTools.copyLink' />
-              </span>
-            )
-          }
+        <Button className="tool-button" onClick={this._onClick}>
+          {this.state.showCopied ? (
+            <span>
+              <Icon type="check" withSpace />
+              <FormattedMessage id="components.TripTools.linkCopied" />
+            </span>
+          ) : (
+            <span>
+              <Icon type="clipboard" withSpace />
+              <FormattedMessage id="components.TripTools.copyLink" />
+            </span>
+          )}
         </Button>
       </div>
     )
@@ -144,15 +145,12 @@ class PrintButton extends Component {
     window.open(printUrl, '_blank')
   }
 
-  render () {
+  render() {
     return (
       <div>
-        <Button
-          className='tool-button'
-          onClick={this._onClick}
-        >
-          <Icon type='print' withSpace />
-          <FormattedMessage id='common.forms.print' />
+        <Button className="tool-button" onClick={this._onClick}>
+          <Icon type="print" withSpace />
+          <FormattedMessage id="common.forms.print" />
         </Button>
       </div>
     )
@@ -164,9 +162,11 @@ class PrintButton extends Component {
 class ReportIssueButtonBase extends Component {
   _onClick = () => {
     const { intl, mailto, subject: configuredSubject } = this.props
-    const subject = configuredSubject || intl.formatMessage({id: 'components.TripTools.reportEmailSubject'})
+    const subject =
+      configuredSubject ||
+      intl.formatMessage({ id: 'components.TripTools.reportEmailSubject' })
     const bodyLines = [
-      intl.formatMessage({id: 'components.TripTools.reportEmailTemplate'}),
+      intl.formatMessage({ id: 'components.TripTools.reportEmailTemplate' }),
       '',
       // Search data section is for support and is not translated.
       'SEARCH DATA:',
@@ -178,18 +178,20 @@ class ReportIssueButtonBase extends Component {
       ''
     ]
 
-    window.open(`mailto:${mailto}?subject=${subject}&body=${encodeURIComponent(bodyLines.join('\n'))}`, '_self')
+    window.open(
+      `mailto:${mailto}?subject=${subject}&body=${encodeURIComponent(
+        bodyLines.join('\n')
+      )}`,
+      '_self'
+    )
   }
 
-  render () {
+  render() {
     return (
-      <Button
-        className='tool-button'
-        onClick={this._onClick}
-      >
-        <Icon type='flag' withSpace />
+      <Button className="tool-button" onClick={this._onClick}>
+        <Icon type="flag" withSpace />
         {/* FIXME: Depending on translation, Spanish and French strings may not fit in button width. */}
-        <FormattedMessage id='components.TripTools.reportIssue' />
+        <FormattedMessage id="components.TripTools.reportIssue" />
       </Button>
     )
   }
@@ -206,14 +208,11 @@ class LinkButton extends Component {
     window.location.href = this.props.url
   }
 
-  render () {
+  render() {
     const { icon, text } = this.props
     return (
       <div>
-        <Button
-          className='tool-button'
-          onClick={this._onClick}
-        >
+        <Button className="tool-button" onClick={this._onClick}>
           {icon && <Icon type={icon} withSpace />}
           {text}
         </Button>

From 158482c7907ecc1d9c85f3bdf0229d7f2e33de70 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Feb 2022 12:10:04 -0800
Subject: [PATCH 165/270] refactor(trip-tools): modernize report issue email
 template

---
 i18n/en-US.yml                         | 12 ++++++++++--
 i18n/fr-FR.yml                         |  5 ++++-
 lib/components/narrative/trip-tools.js |  2 --
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 8216c7667..ead270933 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -580,8 +580,16 @@ components:
     reportEmailTemplate: >
       ***INSTRUCTIONS TO USER***
       This feature allows you to email a report to site administrators for review.
-      Please add any additional feedback for this trip under the 'Additional Comments'
-      section below and send using your regular email program."
+      Please fill out the prompts below and send using your regular email program.
+
+      *** PLEASE COMPLETE THE FOLLOWING ***
+
+      Issue encountered:
+
+      Type of trip you wanted to take (ex. walk + transit, bike + transit, car + transit):
+
+      *** TECHNICAL DETAILS ***
+
   # Used in both desktop and mobile
   TripViewer:
     accessible: Accessible
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 64908ebd7..ae228236e 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -565,7 +565,10 @@ components:
       *** À L'ATTENTION DE L'UTILISATEUR ***
       Vous pouvez communiquer votre problème par e-mail et en détail aux administrateurs de ce site.
       Veuillez ajouter toute remarque sur cet itinéraire dans la section 'Additional Comments'
-      ci-dessous, puis envoyez depuis votre logiciel de messagerie usuel."
+      ci-dessous, puis envoyez depuis votre logiciel de messagerie usuel.
+
+  #    TODO: UPDATE TRANSlATION
+
   # Used in both desktop and mobile
   TripViewer:
     accessible: Accessible
diff --git a/lib/components/narrative/trip-tools.js b/lib/components/narrative/trip-tools.js
index fd5c7b01f..2ada1c2fd 100644
--- a/lib/components/narrative/trip-tools.js
+++ b/lib/components/narrative/trip-tools.js
@@ -173,8 +173,6 @@ class ReportIssueButtonBase extends Component {
       'Address: ' + window.location.href,
       'Browser: ' + bowser.name + ' ' + bowser.version,
       'OS: ' + bowser.osname + ' ' + bowser.osversion,
-      '',
-      'ADDITIONAL COMMENTS:',
       ''
     ]
 

From c9d973b110be0a91b884b87146d00bd39fbbcec6 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Feb 2022 12:26:13 -0800
Subject: [PATCH 166/270] refactor(trip-tools): add prop types

---
 lib/components/narrative/trip-tools.js | 151 ++++++++++++-------------
 1 file changed, 74 insertions(+), 77 deletions(-)

diff --git a/lib/components/narrative/trip-tools.js b/lib/components/narrative/trip-tools.js
index 2ada1c2fd..2bc3d7dd9 100644
--- a/lib/components/narrative/trip-tools.js
+++ b/lib/components/narrative/trip-tools.js
@@ -1,88 +1,14 @@
+/* eslint-disable no-case-declarations */
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import bowser from 'bowser'
 import copyToClipboard from 'copy-to-clipboard'
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 // import { DropdownButton, MenuItem } from 'react-bootstrap'
 import { FormattedMessage, injectIntl } from 'react-intl'
 
 import Icon from '../util/icon'
-
-class TripTools extends Component {
-  static defaultProps = {
-    buttonTypes: ['COPY_URL', 'PRINT', 'REPORT_ISSUE', 'START_OVER']
-  }
-
-  render() {
-    const { buttonTypes, reactRouterConfig, reportConfig } = this.props
-
-    const buttonComponents = []
-    buttonTypes.forEach((type) => {
-      switch (type) {
-        case 'COPY_URL':
-          buttonComponents.push(<CopyUrlButton />)
-          break
-        case 'PRINT':
-          buttonComponents.push(<PrintButton />)
-          break
-        case 'REPORT_ISSUE':
-          if (!reportConfig || !reportConfig.mailto) break
-          buttonComponents.push(<ReportIssueButton {...reportConfig} />)
-          break
-        case 'START_OVER':
-          // Determine "home" URL
-          let startOverUrl = '/'
-          if (reactRouterConfig && reactRouterConfig.basename) {
-            startOverUrl += reactRouterConfig.basename
-          }
-          buttonComponents.push(
-            // FIXME: The Spanish string does not fit in button width.
-            <LinkButton
-              icon="undo"
-              text={<FormattedMessage id="common.forms.startOver" />}
-              url={startOverUrl}
-            />
-          )
-          break
-      }
-    })
-
-    return (
-      <div className="trip-tools">
-        {buttonComponents.map((btn, i) => (
-          <div className="button-container" key={i}>
-            {btn}
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
-
-// Share/Save Dropdown Component -- not used currently
-
-/*
-class ShareSaveDropdownButton extends Component {
-  _onCopyToClipboardClick = () => {
-    copyToClipboard(window.location.href)
-  }
-
-  render () {
-    return (
-      <DropdownButton
-        className='tool-button'
-        title={<span><i className='fa fa-share' /> Share/Save</span>}
-        id={'tool-share-dropdown'}
-      >
-        <MenuItem onClick={this._onCopyToClipboardClick}>
-          <i className='fa fa-clipboard' /> Copy Link to Clipboard
-        </MenuItem>
-      </DropdownButton>
-    )
-  }
-}
-*/
-
 // Copy URL Button
 
 class CopyUrlButton extends Component {
@@ -195,6 +121,12 @@ class ReportIssueButtonBase extends Component {
   }
 }
 
+ReportIssueButtonBase.propTypes = {
+  intl: PropTypes.object,
+  mailto: PropTypes.string,
+  subject: PropTypes.string
+}
+
 // The ReportIssueButton component above, with an intl prop
 // for retrieving messages shown outside of React rendering.
 const ReportIssueButton = injectIntl(ReportIssueButtonBase)
@@ -219,9 +151,74 @@ class LinkButton extends Component {
   }
 }
 
+LinkButton.propTypes = {
+  icon: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string
+}
+
+class TripTools extends Component {
+  static defaultProps = {
+    buttonTypes: ['COPY_URL', 'PRINT', 'REPORT_ISSUE', 'START_OVER']
+  }
+
+  render() {
+    const { buttonTypes, reactRouterConfig, reportConfig } = this.props
+
+    const buttonComponents = []
+    buttonTypes.forEach((type) => {
+      switch (type) {
+        case 'COPY_URL':
+          buttonComponents.push(<CopyUrlButton />)
+          break
+        case 'PRINT':
+          buttonComponents.push(<PrintButton />)
+          break
+        case 'REPORT_ISSUE':
+          if (!reportConfig || !reportConfig.mailto) break
+          buttonComponents.push(<ReportIssueButton {...reportConfig} />)
+          break
+        case 'START_OVER':
+          // Determine "home" URL
+          let startOverUrl = '/'
+          if (reactRouterConfig && reactRouterConfig.basename) {
+            startOverUrl += reactRouterConfig.basename
+          }
+          buttonComponents.push(
+            // FIXME: The Spanish string does not fit in button width.
+            <LinkButton
+              icon="undo"
+              text={<FormattedMessage id="common.forms.startOver" />}
+              url={startOverUrl}
+            />
+          )
+          break
+        default:
+          console.warn(`TripTools called with invalid button type ${type}!`)
+      }
+    })
+
+    return (
+      <div className="trip-tools">
+        {buttonComponents.map((btn, i) => (
+          <div className="button-container" key={i}>
+            {btn}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+TripTools.propTypes = {
+  buttonTypes: PropTypes.arrayOf(PropTypes.string),
+  reactRouterConfig: PropTypes.object,
+  reportConfig: PropTypes.object
+}
+
 // Connect main class to redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   return {
     reactRouterConfig: state.otp.config.reactRouter,
     reportConfig: state.otp.config.reportIssue

From e3a6acbbc031bbf4a171c96c3942adcfe42e29cd Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Tue, 1 Feb 2022 16:02:26 -0500
Subject: [PATCH 167/270] refactor(locale-selector, mobile navigation bar):
 Update the mobile navigation bar, address PR comme

---
 example-config.yml                       | 18 ++---
 i18n/{es-ES.yml => es.yml}               |  0
 i18n/{ko-KR.yml => ko.yml}               |  0
 i18n/{vi-VN.yml => vi.yml}               |  0
 i18n/{zh-CN.yml => zh.yml}               |  0
 lib/actions/ui.js                        | 35 +--------
 lib/components/app/desktop-nav.tsx       |  5 +-
 lib/components/app/locale-selector.tsx   | 64 ++++++++-------
 lib/components/mobile/navigation-bar.js  | 99 ++++++++++++++----------
 lib/components/user/nav-login-button.css | 18 +++--
 lib/util/i18n.js                         | 61 ++++++++-------
 11 files changed, 147 insertions(+), 153 deletions(-)
 rename i18n/{es-ES.yml => es.yml} (100%)
 rename i18n/{ko-KR.yml => ko.yml} (100%)
 rename i18n/{vi-VN.yml => vi.yml} (100%)
 rename i18n/{zh-CN.yml => zh.yml} (100%)

diff --git a/example-config.yml b/example-config.yml
index 388b8e97c..b84e98f05 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -338,6 +338,7 @@ itinerary:
 ### The nested structure should be the same as the language files under the i18n folder.
 ### You can also customize OTP error messages for itinerary searches based on OTP HTTP codes.
 ### A separate message can be set for each language or locale if necessary.
+### Languages defined may be region-specific (e.g. en-US) or language-specific (e.g. es, kr)
 ### The LocaleSelector component, which provides a dropdown for the user to change their locale, will
 ### only be rendered if more than one valid language (all languages must have "name" defined) is included
 ### in the language config. Locale icons (flags) are currently defined in locale-selector.tsx file. 
@@ -380,27 +381,18 @@ itinerary:
 #         log-my-commute: Mes trajets verts
 #         traveler-tools: Outils du voyageur
 
-#   ko-KR:
+#   ko:
 #     name: 한국인
 
-#   vi-VN:
+#   vi:
 #     name: Tiếng Việt
 
-#   zh-CN:
+#   zh:
 #     name: 中国人
 
-#   es-ES: 
+#   es: 
 #     name: Español
 
-#   ko-KR:
-#     name: 한국인
-
-#   vi-VN: 
-#     name: Tiếng Việt
-
-#   zh-CN:
-#     name: 中国人
-
 ### Localization section to provide language/locale settings
 #localization:
 #  # An ambient currency should be defined here (defaults to USD).
diff --git a/i18n/es-ES.yml b/i18n/es.yml
similarity index 100%
rename from i18n/es-ES.yml
rename to i18n/es.yml
diff --git a/i18n/ko-KR.yml b/i18n/ko.yml
similarity index 100%
rename from i18n/ko-KR.yml
rename to i18n/ko.yml
diff --git a/i18n/vi-VN.yml b/i18n/vi.yml
similarity index 100%
rename from i18n/vi-VN.yml
rename to i18n/vi.yml
diff --git a/i18n/zh-CN.yml b/i18n/zh.yml
similarity index 100%
rename from i18n/zh-CN.yml
rename to i18n/zh.yml
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 6ecf6c8d3..22f0b8714 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -3,11 +3,7 @@ import { matchPath } from 'react-router'
 import { push } from 'connected-react-router'
 import coreUtils from '@opentripplanner/core-utils'
 
-import {
-  getConfigLocales,
-  getDefaultLocale,
-  loadLocaleData
-} from '../util/i18n'
+import { getDefaultLocale, loadLocaleData } from '../util/i18n'
 import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
 import { getPathFromParts } from '../util/ui'
 
@@ -27,25 +23,13 @@ export const MainPanelContent = {
 }
 
 export const MobileScreens = {
-  // eslint-disable-next-line sort-keys
   RESULTS_SUMMARY: 8,
-
-  // eslint-disable-next-line sort-keys
   SEARCH_FORM: 3,
-
-  // eslint-disable-next-line sort-keys
   SET_DATETIME: 7,
-
   SET_FROM_LOCATION: 4,
-
-  // eslint-disable-next-line sort-keys
   SET_INITIAL_LOCATION: 2,
-
-  // eslint-disable-next-line sort-keys
   SET_OPTIONS: 6,
-
   SET_TO_LOCATION: 5,
-
   WELCOME_SCREEN: 1
 }
 
@@ -68,19 +52,12 @@ export const ItineraryView = {
 
 const setPanel = createAction('SET_MAIN_PANEL_CONTENT')
 export const setMobileScreen = createAction('SET_MOBILE_SCREEN')
-
 export const clearPanel = createAction('CLEAR_MAIN_PANEL')
-
 const viewStop = createAction('SET_VIEWED_STOP')
-
 export const setHoveredStop = createAction('SET_HOVERED_STOP')
-
 export const setViewedTrip = createAction('SET_VIEWED_TRIP')
-
 const viewRoute = createAction('SET_VIEWED_ROUTE')
-
 export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
-
 const setPreviousItineraryView = createAction('SET_PREVIOUS_ITINERARY_VIEW')
 
 /**
@@ -361,16 +338,8 @@ export function setLocale(locale) {
     const { loggedInUser } = getState().user
 
     const { language: customMessages } = config
-    // TODO: Should we get the locales from the config every
-    // time we set the locale or should we destructure once into the
-    // store.
-    const configLocales = getConfigLocales(customMessages)
     const effectiveLocale = locale || getDefaultLocale(config, loggedInUser)
-    const messages = await loadLocaleData(
-      effectiveLocale,
-      customMessages,
-      configLocales
-    )
+    const messages = await loadLocaleData(effectiveLocale, customMessages)
 
     // Update the redux state
     dispatch(updateLocale({ locale: effectiveLocale, messages }))
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index 5b1b9341f..e5c60106d 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -74,10 +74,7 @@ const DesktopNav = ({ otpConfig }: otpConfigType) => {
             Object.keys(configLanguages).filter(
               (key) => key !== 'allLanguages' && configLanguages[key].name
             ).length > 1 && (
-              <LocaleSelector
-                configLanguages={configLanguages}
-                style={{ maxWidth: 60 }}
-              />
+              <LocaleSelector configLanguages={configLanguages} />
             )}
           {showLogin && (
             <NavLoginButtonAuth0 id="login-control" links={accountLinks} />
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index 677a08986..a81f7e1ae 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -1,4 +1,4 @@
-import { CN, ES, FR, KR, US, VN } from 'country-flag-icons/react/3x2'
+import * as flags from 'country-flag-icons/react/3x2'
 import { connect, ConnectedProps } from 'react-redux'
 import { MenuItem, NavDropdown } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
@@ -8,21 +8,6 @@ import styled from 'styled-components'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 
-/**
- * Renders flag icons for supported languages
- * using emojis would be a simpler solution, but they are not available on Windows
- * Exporting this in the config.js causes the a11y tests to fail. A better solution
- * will need to be found if further customization is required.
- */
-const FLAG_ICON_MAPPING: Record<string, React.ReactElement> = {
-  'en-US': <US style={{ width: 15 }} />,
-  'es-ES': <ES style={{ width: 15 }} />,
-  'fr-FR': <FR style={{ width: 15 }} />,
-  'ko-KR': <KR style={{ width: 15 }} />,
-  'vi-VN': <VN style={{ width: 15 }} />,
-  'zh-CN': <CN style={{ width: 15 }} />
-}
-
 const FlagContainer = styled.span`
   &::after {
     content: '';
@@ -46,6 +31,8 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     loggedInUser,
     setLocale
   } = props
+
+  const CurrentLocaleFlag = flags[configLanguages[currentLocale].flag]
   const intl = useIntl()
 
   const handleLocaleSelection = (e: MouseEvent<Element>, locale: string) => {
@@ -59,25 +46,46 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     }
     setLocale(locale)
 
-    // Hack: Reload the page (IntlProvider is at too high a level to listen to the redux store)
-    // TODO: move IntlProvider to Responsive Webapp for reload.
     document.location.reload()
   }
 
   return (
-    <NavDropdown id="locale-selector" title={FLAG_ICON_MAPPING[currentLocale]}>
-      {Object.keys(configLanguages).map(
-        (locale) =>
-          locale !== 'allLanguages' &&
-          locale !== currentLocale && (
-            <MenuItem
-              onClick={(e: MouseEvent) => handleLocaleSelection(e, locale)}
-            >
-              <FlagContainer>{FLAG_ICON_MAPPING[locale]}</FlagContainer>
+    <NavDropdown
+      id="locale-selector"
+      pullRight
+      title={<CurrentLocaleFlag style={{ width: 15 }} />}
+    >
+      {Object.keys(configLanguages).map((locale) => {
+        const Flag = flags[configLanguages[locale].flag]
+        if (locale === currentLocale)
+          return (
+            <MenuItem>
+              <FlagContainer>
+                <span
+                  aria-label="checkbox"
+                  role="img"
+                  style={{ float: 'left' }}
+                >
+                  ☑️
+                </span>
+              </FlagContainer>
               {configLanguages[locale].name}
             </MenuItem>
           )
-      )}
+        else
+          return (
+            locale !== 'allLanguages' && (
+              <MenuItem
+                onClick={(e: MouseEvent) => handleLocaleSelection(e, locale)}
+              >
+                <FlagContainer>
+                  <Flag style={{ width: 15 }} />
+                </FlagContainer>
+                {configLanguages[locale].name}
+              </MenuItem>
+            )
+          )
+      })}
     </NavDropdown>
   )
 }
diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
index 69d680e16..ffc6ca2d2 100644
--- a/lib/components/mobile/navigation-bar.js
+++ b/lib/components/mobile/navigation-bar.js
@@ -1,20 +1,25 @@
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { Navbar } from 'react-bootstrap'
 import { connect } from 'react-redux'
+import { Navbar } from 'react-bootstrap'
+import PropTypes, { any } from 'prop-types'
+import React, { Component } from 'react'
 
-import { setMobileScreen } from '../../actions/ui'
-import AppMenu from '../app/app-menu'
-import NavLoginButtonAuth0 from '../../components/user/nav-login-button-auth0'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { ComponentContext } from '../../util/contexts'
+import { setMobileScreen } from '../../actions/ui'
+import AppMenu from '../app/app-menu'
 import Icon from '../util/icon'
+import LocaleSelector from '../app/locale-selector'
+import NavLoginButtonAuth0 from '../../components/user/nav-login-button-auth0'
 
 class MobileNavigationBar extends Component {
   static propTypes = {
+    auth0Config: PropTypes.object,
     backScreen: PropTypes.number,
+    configLanguages: PropTypes.object,
+    defaultMobileTitle: PropTypes.string,
     headerAction: PropTypes.element,
     headerText: PropTypes.element,
+    onBackClicked: PropTypes.func,
     setMobileScreen: PropTypes.func,
     showBackButton: PropTypes.bool
   }
@@ -27,9 +32,10 @@ class MobileNavigationBar extends Component {
     else if (typeof onBackClicked === 'function') onBackClicked()
   }
 
-  render () {
+  render() {
     const {
       auth0Config,
+      configLanguages,
       defaultMobileTitle,
       headerAction,
       headerText,
@@ -37,50 +43,58 @@ class MobileNavigationBar extends Component {
     } = this.props
 
     return (
-      <Navbar fixedTop fluid>
-
+      <Navbar className="mobile-navbar-container" fixedTop fluid>
         <Navbar.Header>
           <Navbar.Brand>
-            {showBackButton
-              ? (
-                <div className='mobile-back'>
-                  <Icon
-                    fixedWidth={false}
-                    name='arrow-left'
-                    onClick={this._backButtonPressed}
-                  />
-                </div>
-              )
-              : <AppMenu />
-            }
+            {showBackButton ? (
+              <div className="mobile-back">
+                <Icon
+                  fixedWidth={false}
+                  name="arrow-left"
+                  onClick={this._backButtonPressed}
+                />
+              </div>
+            ) : (
+              <AppMenu />
+            )}
           </Navbar.Brand>
         </Navbar.Header>
 
-        <div className='mobile-header'>
-          {headerText
-            ? <div className='mobile-header-text'>{headerText}</div>
-            : <div>{defaultMobileTitle}</div>
-          }
+        <div className="mobile-header">
+          {headerText ? (
+            <div className="mobile-header-text">{headerText}</div>
+          ) : (
+            <div>{defaultMobileTitle}</div>
+          )}
         </div>
 
         {headerAction && (
-          <div className='mobile-close'>
-            <div className='mobile-header-action'>{headerAction}</div>
+          <div className="mobile-close">
+            <div className="mobile-header-action">{headerAction}</div>
           </div>
         )}
 
-        {/**
-          * HACK: Normally, NavLoginButtonAuth0 should be inside a <Nav> element,
-          * however, in mobile mode, react-bootstrap's <Nav> causes the
-          * submenus of this component to be displayed full-screen-width,
-          * and that behavior is not desired here.
-          */}
-        {auth0Config && (
-          <NavLoginButtonAuth0
-            id='login-control'
-            links={accountLinks}
-          />
-        )}
+        <div className="locale-selector-and-login">
+          {configLanguages &&
+            // Ensure that > 1 valid language is defined
+            Object.keys(configLanguages).filter(
+              (key) => key !== 'allLanguages' && configLanguages[key].name
+            ).length > 1 && (
+              <LocaleSelector
+                className="locale-selector"
+                configLanguages={configLanguages}
+              />
+            )}
+          {/**
+           * HACK: Normally, NavLoginButtonAuth0 should be inside a <Nav> element,
+           * however, in mobile mode, react-bootstrap's <Nav> causes the
+           * submenus of this component to be displayed full-screen-width,
+           * and that behavior is not desired here.
+           */}
+          {auth0Config && (
+            <NavLoginButtonAuth0 id="login-control" links={accountLinks} />
+          )}
+        </div>
       </Navbar>
     )
   }
@@ -88,9 +102,10 @@ class MobileNavigationBar extends Component {
 
 // connect to the redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   return {
-    auth0Config: getAuth0Config(state.otp.config.persistence)
+    auth0Config: getAuth0Config(state.otp.config.persistence),
+    configLanguages: state.otp.config.language
   }
 }
 
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index 9e45154d7..3c1cda2d8 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -8,24 +8,30 @@
   * In desktop and mobile modes, we change the link color to white for consistency with the AppMenu component.
   */
 
-.otp.mobile .navbar .container-fluid > li {
-  display: block;
-  padding: 14px;
+.otp.mobile .navbar .mobile-navbar-container { 
+  
+}
+
+.otp.mobile .navbar .container-fluid .locale-selector-and-login {
   position: fixed;
   right: 0;
   top: 0;
 }
+.otp.mobile .navbar .container-fluid .locale-selector-and-login > li {
+  display: inline-block;
+  padding: 14px;
+}
 .otp.mobile .navbar li.dropdown.open {
   background-color: #080808;
 }
 .navbar-inverse .navbar-nav > li > a,
-.otp.mobile .navbar .container-fluid > li > a,
-.otp.mobile .navbar .container-fluid > li.dropdown.open > a {
+.otp.mobile .navbar .container-fluid .locale-selector-and-login > li > a,
+.otp.mobile .navbar .container-fluid .locale-selector-and-login > li.dropdown.open > a {
   color: #fff;
   text-decoration: none;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
-.otp.mobile .navbar .container-fluid > li > a:hover {
+.otp.mobile .navbar .container-fluid .locale-selector-and-login > li > a:hover {
   color: #ddd;
   text-decoration: none;
 }
diff --git a/lib/util/i18n.js b/lib/util/i18n.js
index b642139f2..114048971 100644
--- a/lib/util/i18n.js
+++ b/lib/util/i18n.js
@@ -19,7 +19,30 @@ function getMatchingLocaleString(
   const language = configLocales[lang]
   if (!language) return defaultLocale
   const defaultRegion = Object.keys(language)[0]
-  return language[region] || language[defaultRegion]
+  return language[region] || typeof language === 'string'
+    ? language // Allow returning w/o region code.
+    : language[defaultRegion]
+}
+
+/**
+ * Gets the language and region codes used within the configuration file
+ * @param {Object} configLanguages The configured languages for the implementation.
+ * @returns {Object} configLanguages destructured into language and region.
+ */
+export function getConfigLocales(configLanguages) {
+  const locales = {}
+
+  // We need to loop through the config language section and detect all the regions
+  Object.keys(configLanguages).forEach((key) => {
+    if (key === 'allLanguages') return
+    const [lang, region] = key.split('-')
+    if (!locales[lang]) locales[lang] = {}
+    // If translations are not region-specific, store as language code, i.e. es: "es"
+    if (!region) locales[lang] = key
+    // Otherwise store the region under the language
+    else locales[lang][region] = key
+  })
+  return locales
 }
 
 /*
@@ -30,24 +53,25 @@ function getMatchingLocaleString(
  *   id => string.
  * FIXME: Load languages on demand using fetch.
  */
-export async function loadLocaleData(locale, customMessages, configLocales) {
+export async function loadLocaleData(locale, customMessages) {
+  const configLocales = getConfigLocales(customMessages)
   const matchedLocale = getMatchingLocaleString(locale, 'en-US', configLocales)
   let messages
   switch (matchedLocale) {
-    case 'es-ES':
-      messages = await import('../../i18n/es-ES.yml')
+    case 'es': // Spanish translation is not specific to a region
+      messages = await import('../../i18n/es.yml')
       break
     case 'fr-FR':
       messages = await import('../../i18n/fr-FR.yml')
       break
-    case 'ko-KR':
-      messages = await import('../../i18n/ko-KR.yml')
+    case 'ko': // Korean translation is not specific to a region
+      messages = await import('../../i18n/ko.yml')
       break
-    case 'vi-VN':
-      messages = await import('../../i18n/vi-VN.yml')
+    case 'vi': // Vietnamese translation is not specific to a region
+      messages = await import('../../i18n/vi.yml')
       break
-    case 'zh-CN':
-      messages = await import('../../i18n/zh-CN.yml')
+    case 'zh': // Chinese translation is not specific to a region
+      messages = await import('../../i18n/zh.yml')
       break
     default:
       messages = await import('../../i18n/en-US.yml')
@@ -65,23 +89,6 @@ export async function loadLocaleData(locale, customMessages, configLocales) {
   return mergedMessages
 }
 
-/**
- * Gets the language and region codes used within the configuration file
- * @param {Object} configLanguages The configured languages for the implementation.
- * @returns {Object} configLanguages destructured into language and region.
- */
-export function getConfigLocales(configLanguages) {
-  const locales = {}
-
-  // We need to loop through the config language section and detect all the regions
-  Object.keys(configLanguages).forEach((key) => {
-    const [lang, region] = key.split('-')
-    if (!locales[lang]) locales[lang] = {}
-    locales[lang][region] = key
-  })
-  return locales
-}
-
 /**
  * Gets the localization > defaultLocale configuration setting, or 'en-US' if not set.
  */

From 2ba2f5eeb9da864347789e418be2bc16ab16ce6b Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Tue, 1 Feb 2022 17:05:14 -0500
Subject: [PATCH 168/270] refactor(LocaleSelector): Make check box conditional,
 center in flex box

---
 lib/components/app/locale-selector.tsx | 42 +++++++++++---------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index a81f7e1ae..1b64b853c 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -7,12 +7,18 @@ import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
+import Icon from '../util/icon'
 
 const FlagContainer = styled.span`
   &::after {
     content: '';
     margin: 0 0.125em;
   }
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 15px;
 `
 
 type PropsFromRedux = ConnectedProps<typeof connector>
@@ -37,7 +43,10 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
 
   const handleLocaleSelection = (e: MouseEvent<Element>, locale: string) => {
     e.stopPropagation()
-
+    if (locale === currentLocale) {
+      e.preventDefault()
+      return
+    }
     window.localStorage.setItem('lang', locale)
 
     if (loggedInUser) {
@@ -57,34 +66,19 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     >
       {Object.keys(configLanguages).map((locale) => {
         const Flag = flags[configLanguages[locale].flag]
-        if (locale === currentLocale)
-          return (
-            <MenuItem>
+        return (
+          locale !== 'allLanguages' && (
+            <MenuItem
+              onClick={(e: MouseEvent) => handleLocaleSelection(e, locale)}
+            >
               <FlagContainer>
-                <span
-                  aria-label="checkbox"
-                  role="img"
-                  style={{ float: 'left' }}
-                >
-                  ☑️
-                </span>
+                {locale === currentLocale && <Icon type="check-square" />}
+                {locale !== currentLocale && <Flag />}
               </FlagContainer>
               {configLanguages[locale].name}
             </MenuItem>
           )
-        else
-          return (
-            locale !== 'allLanguages' && (
-              <MenuItem
-                onClick={(e: MouseEvent) => handleLocaleSelection(e, locale)}
-              >
-                <FlagContainer>
-                  <Flag style={{ width: 15 }} />
-                </FlagContainer>
-                {configLanguages[locale].name}
-              </MenuItem>
-            )
-          )
+        )
       })}
     </NavDropdown>
   )

From bbeea82be3edae6023df1f15544fc1da5685c8a9 Mon Sep 17 00:00:00 2001
From: Daniel Heppner <daniel.heppner@ibigroup.com>
Date: Wed, 2 Feb 2022 23:58:20 -0800
Subject: [PATCH 169/270] refactor(call-taker): make plan button more prominent

---
 lib/components/admin/call-taker.css    |  4 ++++
 lib/components/app/call-taker-panel.js | 10 ++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/lib/components/admin/call-taker.css b/lib/components/admin/call-taker.css
index 917ec1eb4..fc2d511ce 100644
--- a/lib/components/admin/call-taker.css
+++ b/lib/components/admin/call-taker.css
@@ -20,3 +20,7 @@
   margin-bottom: 5px;
   height: 24px;
 }
+
+.otp .search-plan-button-container {
+  padding: 1rem;
+}
\ No newline at end of file
diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index caabef5d4..8175376d7 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -227,13 +227,15 @@ class CallTakerPanel extends Component {
                 this.setState({ transitModes })
               }}
             />
+          </div>
+          <div className="search-plan-button-container">
             <Button
-              bsSize="small"
-              bsStyle="default"
+              bsSize="default"
+              bsStyle="primary"
               onClick={this._planTrip}
               style={{
-                fontSize: '13px',
-                padding: '1px 10px'
+                fontWeight: 'bold',
+                width: '100%'
               }}
             >
               Plan

From c4a51ebebff30034a1d49761592b78e89083fd00 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 3 Feb 2022 13:48:00 -0800
Subject: [PATCH 170/270] refactor: accomodate location-field
 internationalization

---
 i18n/en-US.yml                                | 14 ++++++
 lib/components/form/connect-location-field.js | 44 +++++++------------
 .../form/connected-location-field.js          | 10 ++---
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 8216c7667..e05da249c 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -664,6 +664,20 @@ otpUi:
     watts500robustEscooter: Robust E-scooter (18 mph)
     # Note to translator: This text is width-constrained.
     wheelchair: Prefer Wheelchair Accessible Routes
+  LocationField:
+    beingTypingPrompt: Begin typing to search for locations
+    clearLocation: Clear location
+    currentLocationUnavailable: Current location not available ({error})
+    fetchingLocation: Fetching location...
+    geocoderUnreachable: Could not reach geocoder
+    myPlaces: My Places
+    nearby: Nearby Stops
+    noResultsFound: No results found for '{input}'
+    other: Other
+    recentlySearched: Recently Searched
+    stations: Stations
+    stops: Stops
+    useCurrentLocation: Use Current Location
   SettingsSelectorPanel:
     bikeOnly: Bike Only
     escooterOnly: E-scooter Only
diff --git a/lib/components/form/connect-location-field.js b/lib/components/form/connect-location-field.js
index 0a91ae0e8..5d2c38989 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -1,5 +1,5 @@
-import { injectIntl } from 'react-intl'
 import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
 
 import * as apiActions from '../../actions/api'
 import * as locationActions from '../../actions/location'
@@ -15,9 +15,12 @@ import { getActiveSearch, getShowUserSettings } from '../../util/state'
  *                  the active query
  * @returns The connected component.
  */
-export default function connectLocationField (StyledLocationField, options = {}) {
+export default function connectLocationField(
+  StyledLocationField,
+  options = {}
+) {
   // By default, set actions to empty list and do not include location.
-  const {actions = {}, includeLocation = false, intlActions = {}} = options
+  const { actions = {}, includeLocation = false } = options
   const mapStateToProps = (state, ownProps) => {
     const { config, currentQuery, location, transitIndex, user } = state.otp
     const { currentPosition, nearbyStops, sessionSearches } = location
@@ -26,8 +29,8 @@ export default function connectLocationField (StyledLocationField, options = {})
 
     const geocoderConfig = config.geocoder
     if (currentPosition?.coords) {
-      const {latitude: lat, longitude: lon} = currentPosition.coords
-      geocoderConfig.focusPoint = {lat, lon}
+      const { latitude: lat, longitude: lon } = currentPosition.coords
+      geocoderConfig.focusPoint = { lat, lon }
     }
 
     const stateToProps = {
@@ -50,28 +53,15 @@ export default function connectLocationField (StyledLocationField, options = {})
     return stateToProps
   }
 
-  const mapDispatchToProps = (dispatch, ownProps) => {
-    const allBaseActions = {
-      addLocationSearch: locationActions.addLocationSearch,
-      findNearbyStops: apiActions.findNearbyStops,
-      ...actions
-    }
-
-    const allIntlActions = {
-      getCurrentPosition: locationActions.getCurrentPosition,
-      ...intlActions
-    }
-
-    const dispatchActions = {}
-
-    Object.entries(allBaseActions).forEach(([key, fn]) => {
-      dispatchActions[key] = (...args) => dispatch(fn(...args))
-    })
-    Object.entries(allIntlActions).forEach(([key, fn]) => {
-      dispatchActions[key] = (...args) => dispatch(fn(ownProps.intl, ...args))
-    })
-    return dispatchActions
+  const mapDispatchToProps = {
+    addLocationSearch: locationActions.addLocationSearch,
+    findNearbyStops: apiActions.findNearbyStops,
+    getCurrentPosition: locationActions.getCurrentPosition,
+    ...actions
   }
 
-  return connect(mapStateToProps, mapDispatchToProps)(injectIntl(StyledLocationField))
+  return connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(injectIntl(StyledLocationField))
 }
diff --git a/lib/components/form/connected-location-field.js b/lib/components/form/connected-location-field.js
index ac52fe42f..e7026b59b 100644
--- a/lib/components/form/connected-location-field.js
+++ b/lib/components/form/connected-location-field.js
@@ -1,4 +1,3 @@
-import LocationField from '@opentripplanner/location-field'
 import {
   DropdownContainer,
   FormGroup,
@@ -7,6 +6,7 @@ import {
   InputGroupAddon,
   MenuItemA
 } from '@opentripplanner/location-field/lib/styled'
+import LocationField from '@opentripplanner/location-field'
 import styled from 'styled-components'
 
 import * as mapActions from '../../actions/map'
@@ -55,10 +55,8 @@ const StyledLocationField = styled(LocationField)`
 
 export default connectLocationField(StyledLocationField, {
   actions: {
-    clearLocation: mapActions.clearLocation
-  },
-  includeLocation: true,
-  intlActions: {
+    clearLocation: mapActions.clearLocation,
     onLocationSelected: mapActions.onLocationSelected
-  }
+  },
+  includeLocation: true
 })

From fd8ea13b983737f2cea4b19a37043ed7c19a813b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 3 Feb 2022 16:09:13 -0800
Subject: [PATCH 171/270] refactor: add newlines to email template

---
 i18n/en-US.yml                         | 12 ++++--------
 lib/components/narrative/trip-tools.js |  5 ++++-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index ead270933..8c497b40b 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -581,14 +581,10 @@ components:
       ***INSTRUCTIONS TO USER***
       This feature allows you to email a report to site administrators for review.
       Please fill out the prompts below and send using your regular email program.
-
-      *** PLEASE COMPLETE THE FOLLOWING ***
-
-      Issue encountered:
-
-      Type of trip you wanted to take (ex. walk + transit, bike + transit, car + transit):
-
-      *** TECHNICAL DETAILS ***
+      {br}*** PLEASE COMPLETE THE FOLLOWING ***
+      {br}Issue encountered:
+      {br}Type of trip you wanted to take (ex. walk + transit, bike + transit, car + transit):
+      {br}*** TECHNICAL DETAILS ***
 
   # Used in both desktop and mobile
   TripViewer:
diff --git a/lib/components/narrative/trip-tools.js b/lib/components/narrative/trip-tools.js
index 2bc3d7dd9..6f1ef0020 100644
--- a/lib/components/narrative/trip-tools.js
+++ b/lib/components/narrative/trip-tools.js
@@ -92,7 +92,10 @@ class ReportIssueButtonBase extends Component {
       configuredSubject ||
       intl.formatMessage({ id: 'components.TripTools.reportEmailSubject' })
     const bodyLines = [
-      intl.formatMessage({ id: 'components.TripTools.reportEmailTemplate' }),
+      intl.formatMessage(
+        { id: 'components.TripTools.reportEmailTemplate' },
+        { br: '\n' }
+      ),
       '',
       // Search data section is for support and is not translated.
       'SEARCH DATA:',

From 3ca258322fac410ed188c991763349ab23e34889 Mon Sep 17 00:00:00 2001
From: Daniel Heppner <daniel.heppner@ibigroup.com>
Date: Thu, 3 Feb 2022 21:08:59 -0800
Subject: [PATCH 172/270] refactor(call-taker): remove button styling

---
 lib/components/app/call-taker-panel.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 8175376d7..d795f7d4d 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -230,8 +230,6 @@ class CallTakerPanel extends Component {
           </div>
           <div className="search-plan-button-container">
             <Button
-              bsSize="default"
-              bsStyle="primary"
               onClick={this._planTrip}
               style={{
                 fontWeight: 'bold',

From 04ea9e95455ae4749e8a0178eab11d5ac6df28ac Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 4 Feb 2022 11:13:43 -0500
Subject: [PATCH 173/270] Revert "refactor: add newlines to email template"

This reverts commit fd8ea13b983737f2cea4b19a37043ed7c19a813b.
---
 i18n/en-US.yml                         | 12 ++++++++----
 lib/components/narrative/trip-tools.js |  5 +----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 8c497b40b..ead270933 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -581,10 +581,14 @@ components:
       ***INSTRUCTIONS TO USER***
       This feature allows you to email a report to site administrators for review.
       Please fill out the prompts below and send using your regular email program.
-      {br}*** PLEASE COMPLETE THE FOLLOWING ***
-      {br}Issue encountered:
-      {br}Type of trip you wanted to take (ex. walk + transit, bike + transit, car + transit):
-      {br}*** TECHNICAL DETAILS ***
+
+      *** PLEASE COMPLETE THE FOLLOWING ***
+
+      Issue encountered:
+
+      Type of trip you wanted to take (ex. walk + transit, bike + transit, car + transit):
+
+      *** TECHNICAL DETAILS ***
 
   # Used in both desktop and mobile
   TripViewer:
diff --git a/lib/components/narrative/trip-tools.js b/lib/components/narrative/trip-tools.js
index 6f1ef0020..2bc3d7dd9 100644
--- a/lib/components/narrative/trip-tools.js
+++ b/lib/components/narrative/trip-tools.js
@@ -92,10 +92,7 @@ class ReportIssueButtonBase extends Component {
       configuredSubject ||
       intl.formatMessage({ id: 'components.TripTools.reportEmailSubject' })
     const bodyLines = [
-      intl.formatMessage(
-        { id: 'components.TripTools.reportEmailTemplate' },
-        { br: '\n' }
-      ),
+      intl.formatMessage({ id: 'components.TripTools.reportEmailTemplate' }),
       '',
       // Search data section is for support and is not translated.
       'SEARCH DATA:',

From 96d72fab0a2db4d8716949d0e01ec86e85e6b37a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 4 Feb 2022 11:36:31 -0500
Subject: [PATCH 174/270] improvement(i18n): Improve report email template.

---
 i18n/en-US.yml |  5 ++---
 i18n/fr-FR.yml | 16 ++++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index ead270933..24cc85cb1 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -577,8 +577,8 @@ components:
     linkCopied: Copied
     reportIssue: Report Issue
     reportEmailSubject: Reporting an Issue with OpenTripPlanner
-    reportEmailTemplate: >
-      ***INSTRUCTIONS TO USER***
+    reportEmailTemplate: |+
+      *** INSTRUCTIONS TO USER ***
       This feature allows you to email a report to site administrators for review.
       Please fill out the prompts below and send using your regular email program.
 
@@ -589,7 +589,6 @@ components:
       Type of trip you wanted to take (ex. walk + transit, bike + transit, car + transit):
 
       *** TECHNICAL DETAILS ***
-
   # Used in both desktop and mobile
   TripViewer:
     accessible: Accessible
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index ae228236e..52ce58fdb 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -561,14 +561,18 @@ components:
     linkCopied: Copié
     reportIssue: Un problème ? # "Signaler un problème" does not fit.
     reportEmailSubject: Signaler un problème avec OpenTripPlanner
-    reportEmailTemplate: >
-      *** À L'ATTENTION DE L'UTILISATEUR ***
-      Vous pouvez communiquer votre problème par e-mail et en détail aux administrateurs de ce site.
-      Veuillez ajouter toute remarque sur cet itinéraire dans la section 'Additional Comments'
-      ci-dessous, puis envoyez depuis votre logiciel de messagerie usuel.
+    reportEmailTemplate: |+
+      *** CONSIGNES POUR L'UTILISATEUR ***
+      Cet email signalera votre problème aux administrateurs de ce site.
+      Veuillez remplir les détails ci-dessous, puis envoyez depuis votre logiciel de messagerie habituel.
 
-  #    TODO: UPDATE TRANSlATION
+      *** VEUILLEZ REMPLIR CI-DESSOUS ***
 
+      Problème rencontré :
+
+      Type de trajet recherché (ex. à pied + transports, vélo + transports, voiture + transports) :
+
+      *** DÉTAILS TECHNIQUES ***
   # Used in both desktop and mobile
   TripViewer:
     accessible: Accessible

From 64bf9eab0ac11a2ae58fca2d35a1fa7cf5d47972 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Feb 2022 08:07:55 -0800
Subject: [PATCH 175/270] chore(deps): update itinerary-body

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 81a2998a0..d92a209f7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@opentripplanner/geocoder": "^1.1.1",
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
-    "@opentripplanner/itinerary-body": "^2.7.0",
+    "@opentripplanner/itinerary-body": "^2.9.0",
     "@opentripplanner/location-field": "^1.11.1",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
diff --git a/yarn.lock b/yarn.lock
index 7019c6546..37ddee735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2532,10 +2532,10 @@
     "@opentripplanner/core-utils" "^4.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-2.7.0.tgz#ba5ae119bc97deb30d68936d15fc683bbd15e865"
-  integrity sha512-9i3uXPTssyZPr+4a+2QX5QywF+8b11Km3RRDpZFcr4bwTDllfX21mvt36miqhZ/l6mYmloMzybQM+XIJWlQHtA==
+"@opentripplanner/itinerary-body@^2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-2.9.0.tgz#85623aa9e3605ba425b929d3eb949b5bcf36935a"
+  integrity sha512-aCwRwiq32uhWMBS0uMp5C3vEyNEkA/5C7sPBWgJRhytAR5HsSfdbGkUeM6EUbY+9Ki3QldWR4BHpNd7wqWvF9Q==
   dependencies:
     "@opentripplanner/core-utils" "^4.5.0"
     "@opentripplanner/humanize-distance" "^1.1.0"

From 1b6a0254de19361c10191e5d8c59aa9dd801fdf5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 8 Feb 2022 13:56:37 -0500
Subject: [PATCH 176/270] refactor(util/user): Refactor persistence check.

---
 lib/util/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/util/user.js b/lib/util/user.js
index 28b32e761..cb278f7e5 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -91,7 +91,7 @@ export function positionHomeAndWorkFirst(userData, homeName, workName) {
  * - persistence.strategy is defined.
  */
 function getPersistenceStrategy(persistence) {
-  return persistence && persistence.enabled && persistence.strategy
+  return persistence?.enabled && persistence?.strategy
 }
 
 /**

From 5e363e393de0502c385885d4aefd95d2d61cc484 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Tue, 8 Feb 2022 14:53:59 -0500
Subject: [PATCH 177/270] docs(Changelog): Address PR comments

---
 CHANGELOG.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b0531598..70337691d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,9 +23,9 @@
 ## [3.3.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.3.0) (2021-07-22)
 
 - Field trip module
-- Add save button
-- Add delete button
-- Allow configuration of capacity
+  - Add save button
+  - Add delete button
+  - Allow configuration of capacity
 
 ## [3.4.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v3.4.0) (2021-08-18)
 
@@ -60,4 +60,4 @@
 - Fix crashes reported to us
 - Improve screen reader experience
 - Add user setting for planning accessible trips by default
-- Support internationalization of most component
+- Support internationalization of most components

From e159605901f46508372528b9394f19b8b8ba22f2 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 8 Feb 2022 15:35:32 -0500
Subject: [PATCH 178/270] Revert "fix(default-itinerary): show detailsHint at
 correct spot"

This reverts commit be719772537a753b6e7adc2f4741032a487efc99.
---
 lib/components/narrative/default/default-itinerary.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 1f74183ab..08713e2c0 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -282,6 +282,11 @@ class DefaultItinerary extends NarrativeItinerary {
             })}
           </ul>
           <FieldTripGroupSize itinerary={itinerary} />
+          {active && !expanded && (
+            <DetailsHint>
+              <FormattedMessage id='components.DefaultItinerary.clickDetails' />
+            </DetailsHint>
+          )}
         </button>
         {active && expanded && (
           <>
@@ -295,11 +300,6 @@ class DefaultItinerary extends NarrativeItinerary {
             />
           </>
         )}
-        {active && !expanded && (
-          <DetailsHint>
-            <FormattedMessage id='components.DefaultItinerary.clickDetails' />
-          </DetailsHint>
-        )}
       </div>
     )
   }

From d7e93168441de5535dab383fe9bd5b9f7af297d2 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Feb 2022 12:56:20 -0800
Subject: [PATCH 179/270] chore(deps): update trip-form

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 81a2998a0..9f9237221 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
     "@opentripplanner/transitive-overlay": "^1.1.2",
     "@opentripplanner/trip-details": "^2.0.0",
-    "@opentripplanner/trip-form": "^1.10.0",
+    "@opentripplanner/trip-form": "^1.10.1",
     "@opentripplanner/trip-viewer-overlay": "^1.1.1",
     "@opentripplanner/vehicle-rental-overlay": "^1.2.1",
     "blob-stream": "^0.1.3",
diff --git a/yarn.lock b/yarn.lock
index 7019c6546..7658147ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2649,10 +2649,10 @@
     flat "^5.0.2"
     velocity-react "^1.4.3"
 
-"@opentripplanner/trip-form@^1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-1.10.0.tgz#d58b8cf4890c58dcdd1f219cb537dd4333d5cf55"
-  integrity sha512-skk6NLz33RTi8TYlXI1vhWqhDJNUlpFlyzKhqF7VwBShLqw4633DH7CvObv9ho95ULwH2tYX+uuSDxMqV1F0NQ==
+"@opentripplanner/trip-form@^1.10.1":
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-1.10.1.tgz#6941e9fe35616427a17e65d60ee140474ff0f111"
+  integrity sha512-AR7OAjQhY49AlaEUvqBfji3WEycHXvkIPHSxidmEYsFk+TUYVeqOcRPZuspepiYjdCdus85IGiubY3bGOwPNyg==
   dependencies:
     "@opentripplanner/core-utils" "^4.5.0"
     "@opentripplanner/icons" "^1.2.1"

From c9d83562a050b9c40eb891f00087d7d8be547d24 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 8 Feb 2022 17:26:28 -0500
Subject: [PATCH 180/270] fix(itinerary.css): Fix CSS layout for batch
 itinerary entry.

---
 lib/components/narrative/default/itinerary.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/lib/components/narrative/default/itinerary.css b/lib/components/narrative/default/itinerary.css
index 1a38c9e27..cdcf245ee 100644
--- a/lib/components/narrative/default/itinerary.css
+++ b/lib/components/narrative/default/itinerary.css
@@ -32,19 +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;
+  display: inline-block;
 }
 
 .otp .option.default-itin > .header > .itinerary-attributes {
-  display: inline;
   float: right;
 }
 

From 6b6a08aed41ad5bec6f8c754a33bc6dd8492c0b8 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 9 Feb 2022 08:50:07 -0800
Subject: [PATCH 181/270] chore(deps): upgrade location-field

---
 package.json |  2 +-
 yarn.lock    | 34 +++++++++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 431dfc8b6..91168b0b9 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
     "@opentripplanner/itinerary-body": "^2.7.0",
-    "@opentripplanner/location-field": "^1.11.1",
+    "@opentripplanner/location-field": "1.12.0-alpha.1",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
diff --git a/yarn.lock b/yarn.lock
index 7658147ba..2805be7e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2464,7 +2464,7 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/core-utils@^4.7.1":
+"@opentripplanner/core-utils@^4.7.0", "@opentripplanner/core-utils@^4.7.1":
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.7.1.tgz#72e708d3818f6764726b489192d7501e86d012d3"
   integrity sha512-AGtNEqqNLYMp+elLiQKVf6QcP4KIoMugN7oZ4+G1p5a1eMMtP5wrxk/2IidCkkz2c+wacljoPZ2pWF630gvj7w==
@@ -2511,6 +2511,16 @@
     isomorphic-mapzen-search "^1.6.0"
     lodash.memoize "^4.1.2"
 
+"@opentripplanner/geocoder@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-1.2.1.tgz#5ba3a3c7664f387b6f1cf7959b91ad77170bf2b7"
+  integrity sha512-3RLeRQis9ptIhqeBfBxuPI04/WeGhiYcY5aJONZm9005eFhX4QVesGQpT/qcfC7Wjp55Pnikroh0fMcl+oFvFA==
+  dependencies:
+    "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
+    "@conveyal/lonlat" "^1.4.1"
+    isomorphic-mapzen-search "^1.6.1"
+    lodash.memoize "^4.1.2"
+
 "@opentripplanner/humanize-distance@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-1.1.0.tgz#aa5ecdd70f33cfbdd214c76da4ba799a8ab473a5"
@@ -2549,17 +2559,18 @@
     react-resize-detector "^4.2.1"
     velocity-react "^1.4.3"
 
-"@opentripplanner/location-field@^1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.11.1.tgz#78ed05d1191f2aed3a7253841627ed39c2425575"
-  integrity sha512-zVBSp9K693UJZrU0yLUqGsZHIBGQv0Y9VTKPYzHtBOrLjV6rnbAClRFWzl75eVXL/OIP0uf79SagAinePRwfWA==
+"@opentripplanner/location-field@1.12.0-alpha.1":
+  version "1.12.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.12.0-alpha.1.tgz#13aa1fa08f957e9f66d54f6591130c3a3b790499"
+  integrity sha512-X63dzJaTj402Ni/IQH71fQonnbQwz8WITRysFzgelMcyt2m0dFs6IaCK6NsuLZ9l/kQk4GCRUYjVlku8NsJ4tA==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@opentripplanner/core-utils" "^4.5.0"
-    "@opentripplanner/geocoder" "^1.1.2"
+    "@opentripplanner/core-utils" "^4.7.0"
+    "@opentripplanner/geocoder" "^1.2.0"
     "@opentripplanner/humanize-distance" "^1.1.0"
     "@opentripplanner/location-icon" "^1.4.0"
     "@styled-icons/fa-solid" "^10.34.0"
+    flat "^5.0.2"
     throttle-debounce "^2.1.0"
 
 "@opentripplanner/location-icon@^1.3.0", "@opentripplanner/location-icon@^1.4.0":
@@ -11250,6 +11261,15 @@ isomorphic-mapzen-search@^1.6.0:
     isomorphic-fetch "^3.0.0"
     qs "^6.3.0"
 
+isomorphic-mapzen-search@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-mapzen-search/-/isomorphic-mapzen-search-1.6.1.tgz#5310e8b845ba70ae4fdd2604c3964264939abe53"
+  integrity sha512-MWVko9xX8nhJ2zWx7Zx+9pGQkWd+iy5YIRhT372Rp11/anZ8u5WmOAAxsVA2t2UFmtYEkvNImXCKoFlNg63J+w==
+  dependencies:
+    "@conveyal/lonlat" "^1.4.1"
+    isomorphic-fetch "^3.0.0"
+    qs "^6.3.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"

From ff79e9fa59aa799efb1f7bfd73734e0d1c242ffb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 9 Feb 2022 11:33:58 -0800
Subject: [PATCH 182/270] refactor(i18n/en-US): support no results found for
 blank string

---
 i18n/en-US.yml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 58beab1c4..7b41bbad4 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -682,7 +682,11 @@ otpUi:
     geocoderUnreachable: Could not reach geocoder
     myPlaces: My Places
     nearby: Nearby Stops
-    noResultsFound: No results found for '{input}'
+    noResultsFound: >
+      No results found for {input, select,
+        null {your query}
+        other {{input}}
+      }
     other: Other
     recentlySearched: Recently Searched
     stations: Stations

From 96b811144430565208c813dc7979514b938f804d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 9 Feb 2022 11:35:29 -0800
Subject: [PATCH 183/270] chore(deps): update geocoder

---
 package.json | 2 +-
 yarn.lock    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 91168b0b9..bc33826c5 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "@opentripplanner/core-utils": "^4.7.1",
     "@opentripplanner/endpoints-overlay": "^1.3.0",
     "@opentripplanner/from-to-location-picker": "^1.3.0",
-    "@opentripplanner/geocoder": "^1.1.1",
+    "@opentripplanner/geocoder": "^1.2.1",
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
     "@opentripplanner/itinerary-body": "^2.7.0",
diff --git a/yarn.lock b/yarn.lock
index 2805be7e0..0591b051d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2511,7 +2511,7 @@
     isomorphic-mapzen-search "^1.6.0"
     lodash.memoize "^4.1.2"
 
-"@opentripplanner/geocoder@^1.2.0":
+"@opentripplanner/geocoder@^1.2.0", "@opentripplanner/geocoder@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-1.2.1.tgz#5ba3a3c7664f387b6f1cf7959b91ad77170bf2b7"
   integrity sha512-3RLeRQis9ptIhqeBfBxuPI04/WeGhiYcY5aJONZm9005eFhX4QVesGQpT/qcfC7Wjp55Pnikroh0fMcl+oFvFA==

From 2d7521c240f999b7045d792793a8061dc5edadcb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 9 Feb 2022 11:38:11 -0800
Subject: [PATCH 184/270] chore(deps): update caniuse-lite

---
 yarn.lock | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 0591b051d..41795aa9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6106,15 +6106,10 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001252.tgz#1701676abaea2c0cdd741c0f6c44f5b372c30939"
   integrity sha512-+Vyv92BCj8QTH3pxlxmhXdwqAD+OngU5Ev7OiXG/cfNhJIP3lSE5wxIwW2TFpRj02PE/mAZF8po6/ZTYEa9/tg==
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981:
-  version "1.0.30001279"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz"
-  integrity sha512-VfEHpzHEXj6/CxggTwSFoZBBYGQfQv9Cf42KPlO79sWXCD1QNKWKsKzFeWL7QpZHJQYAvocqV6Rty1yJMkqWLQ==
-
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001251:
-  version "1.0.30001252"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz#cb16e4e3dafe948fc4a9bb3307aea054b912019a"
-  integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001251:
+  version "1.0.30001310"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001310.tgz"
+  integrity sha512-cb9xTV8k9HTIUA3GnPUJCk0meUnrHL5gy5QePfDjxHyNBcnzPzrHFv5GqfP7ue5b1ZyzZL0RJboD6hQlPXjhjg==
 
 capture-exit@^2.0.0:
   version "2.0.0"

From 6402500daba21889bec29da4cabf5ea99a4d39b3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 9 Feb 2022 14:59:22 -0500
Subject: [PATCH 185/270] fix(DefaultItinerary): Fix layout with flex
 indicator.

---
 .../narrative/default/default-itinerary.js    | 96 ++++++++++---------
 .../narrative/default/itinerary.css           | 20 ++--
 2 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 08713e2c0..6e0b507dc 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -58,6 +58,11 @@ const DetailsHint = styled.div`
   text-align: center;
 `
 
+const ItinerarySummaryWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
 /**
  * Obtains the description of an itinerary in the given locale.
  */
@@ -236,52 +241,55 @@ class DefaultItinerary extends NarrativeItinerary {
           // _onHeaderClick comes from super component (NarrativeItinerary).
           onClick={this._onHeaderClick}
         >
-          <div className='title'>
-            <ItineraryDescription itinerary={itinerary} />
-            <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
-            {itineraryHasAccessibilityScores(itinerary) && (
-              <AccessibilityRating
-                gradationMap={accessibilityScoreGradationMap}
-                large
-                score={getAccessibilityScoreForItinerary(itinerary)}
+          {/* FIXME: semantics - replace the divs with span (we are inside a button) */}
+          <ItinerarySummaryWrapper>
+            <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}
               />
             )}
-          </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)
-              const bSelected = this._isSortingOnAttribute(b)
-              if (aSelected) return -1
-              if (bSelected) return 1
-              return a.order - b.order
-            }).map((attribute) => {
-              const isSelected = this._isSortingOnAttribute(attribute)
-              const options = attribute.id === 'arrivalTime' ? timeOptions : {}
-              if (isSelected) {
-                options.isSelected = true
-                options.selection = this.props.sort.type
-              }
-              options.LegIcon = LegIcon
-              options.configCosts = configCosts
-              options.currency = currency
-              return (
-                <li
-                  className={`${attribute.id}${isSelected ? ' main' : ''}`}
-                  key={attribute.id}
-                >
-                  {attribute.render(itinerary, options, defaultFareKey)}
-                </li>
-              )
-            })}
-          </ul>
-          <FieldTripGroupSize itinerary={itinerary} />
+            <ul className='list-unstyled itinerary-attributes'>
+              {ITINERARY_ATTRIBUTES.sort((a, b) => {
+                const aSelected = this._isSortingOnAttribute(a)
+                const bSelected = this._isSortingOnAttribute(b)
+                if (aSelected) return -1
+                if (bSelected) return 1
+                return a.order - b.order
+              }).map((attribute) => {
+                const isSelected = this._isSortingOnAttribute(attribute)
+                const options = attribute.id === 'arrivalTime' ? timeOptions : {}
+                if (isSelected) {
+                  options.isSelected = true
+                  options.selection = this.props.sort.type
+                }
+                options.LegIcon = LegIcon
+                options.configCosts = configCosts
+                options.currency = currency
+                return (
+                  <li
+                    className={`${attribute.id}${isSelected ? ' main' : ''}`}
+                    key={attribute.id}
+                  >
+                    {attribute.render(itinerary, options, defaultFareKey)}
+                  </li>
+                )
+              })}
+            </ul>
+            <FieldTripGroupSize itinerary={itinerary} />
+          </ItinerarySummaryWrapper>
           {active && !expanded && (
             <DetailsHint>
               <FormattedMessage id='components.DefaultItinerary.clickDetails' />
diff --git a/lib/components/narrative/default/itinerary.css b/lib/components/narrative/default/itinerary.css
index cdcf245ee..88fb4bdee 100644
--- a/lib/components/narrative/default/itinerary.css
+++ b/lib/components/narrative/default/itinerary.css
@@ -34,44 +34,44 @@
   cursor: pointer;
 }
 
-.otp .option.default-itin > .header > .title {
+.otp .option.default-itin > .header .title {
+  flex: 2;
   font-weight: 500;
   font-size: large;
-  display: inline-block;
 }
 
-.otp .option.default-itin > .header > .itinerary-attributes {
+.otp .option.default-itin > .header .itinerary-attributes {
   float: right;
 }
 
-.otp .option.default-itin > .header > .itinerary-attributes > li {
+.otp .option.default-itin > .header .itinerary-attributes > li {
   font-size: small;
 }
 
-.otp .option.default-itin > .header > .itinerary-attributes > li.main {
+.otp .option.default-itin > .header .itinerary-attributes > li.main {
   font-weight: 500;
   font-size: x-large;
 }
 
-.otp .option.default-itin > .header > .title > .summary {
+.otp .option.default-itin > .header .title > .summary {
   /* text-align: center; */
   margin: 0px 0px;
 }
 
-.otp .option.default-itin > .header > .title > .summary > .summary-block {
+.otp .option.default-itin > .header .title > .summary > .summary-block {
   display: inline-block;
   vertical-align: middle;
 }
-.otp .option.default-itin > .header > .title > .summary > .summary-block > svg {
+.otp .option.default-itin > .header .title > .summary > .summary-block > svg {
   margin-bottom: 2px;
 }
 
-.otp .option.default-itin > .header > .title > .summary > .mode-block {
+.otp .option.default-itin > .header .title > .summary > .mode-block {
   height: 18px;
   width: 18px;
 }
 
-.otp .option.default-itin > .header > .title > .summary > .arrow-block {
+.otp .option.default-itin > .header .title > .summary > .arrow-block {
   padding-top: 4px;
   font-size: 13px;
 }

From f3c36c21a72afc47984f3ce28eca0deae1dc3fc9 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 10 Feb 2022 14:38:35 -0800
Subject: [PATCH 186/270] docs: update changelog for 4.0

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70337691d..334230c95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,3 +61,14 @@
 - Improve screen reader experience
 - Add user setting for planning accessible trips by default
 - Support internationalization of most components
+
+## [4.0.0](https://github.com/opentripplanner/otp-react-redux/releases/tag/v4.0.0) (2022-02-10)
+
+- Migrate to webpack-based build system
+- Enhance rendering of flex routes
+- Clean up and modernize call taker interface
+- Internationalize and modernize codebase of `trip-form` component
+- Internationalize `location-field` component
+- GTFS Flex support in stop viewer, route viewer, and trip viewer
+- Improve styling of batch itinerary viewer
+- Support showing recently searched and saved places in main panel

From 9aacb8d447d50643e1ed910c018b8c0f76d24f55 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 11 Feb 2022 08:44:13 -0800
Subject: [PATCH 187/270] refactor: run autoformatter

---
 lib/components/viewers/stop-schedule-table.js | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/lib/components/viewers/stop-schedule-table.js b/lib/components/viewers/stop-schedule-table.js
index 99a9138bb..0fa627ca1 100644
--- a/lib/components/viewers/stop-schedule-table.js
+++ b/lib/components/viewers/stop-schedule-table.js
@@ -1,14 +1,14 @@
+import { FormattedMessage, FormattedTime } from 'react-intl'
 import moment from 'moment'
 import React, { Component, createRef } from 'react'
-import { FormattedMessage, FormattedTime } from 'react-intl'
 import styled from 'styled-components'
 
-import Loading from '../narrative/loading'
-import {FETCH_STATUS} from '../../util/constants'
+import { FETCH_STATUS } from '../../util/constants'
 import {
   getFirstDepartureFromNow,
   mergeAndSortStopTimes
 } from '../../util/viewer'
+import Loading from '../narrative/loading'
 
 // Styles for the schedule table and its contents.
 const StyledTable = styled.table`
@@ -27,7 +27,8 @@ const StyledTable = styled.table`
     padding: 2px 0 2px 10px;
     vertical-align: top;
   }
-  td:first-child, th:first-child {
+  td:first-child,
+  th:first-child {
     padding-left: 0;
   }
 `
@@ -69,16 +70,16 @@ class StopScheduleTable extends Component {
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this._scrollToFirstDeparture()
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     // Should only happen if user changes date and a new stopData is passed.
     this._scrollToFirstDeparture()
   }
 
-  render () {
+  render() {
     const { date, showBlockIds, stopData } = this.props
     // Show loading spinner if times are still being fetched.
     if (stopData.fetchStatus === FETCH_STATUS.FETCHING) {
@@ -89,7 +90,8 @@ class StopScheduleTable extends Component {
     const today = moment().startOf('day').format('YYYY-MM-DD')
     // Find the next stop time that is departing.
     // We will scroll to that stop time entry (if showing schedules for today).
-    const shouldHighlightFirstDeparture = mergedStopTimes.length && date === today
+    const shouldHighlightFirstDeparture =
+      mergedStopTimes.length && date === today
     const highlightedStopTime = shouldHighlightFirstDeparture
       ? getFirstDepartureFromNow(mergedStopTimes)
       : null
@@ -99,11 +101,19 @@ class StopScheduleTable extends Component {
         <thead>
           <tr>
             {showBlockIds && (
-              <th><FormattedMessage id='components.StopScheduleTable.block' /></th>
+              <th>
+                <FormattedMessage id="components.StopScheduleTable.block" />
+              </th>
             )}
-            <th><FormattedMessage id='components.StopScheduleTable.route' /></th>
-            <th><FormattedMessage id='components.StopScheduleTable.destination' /></th>
-            <th><FormattedMessage id='components.StopScheduleTable.departure' /></th>
+            <th>
+              <FormattedMessage id="components.StopScheduleTable.route" />
+            </th>
+            <th>
+              <FormattedMessage id="components.StopScheduleTable.destination" />
+            </th>
+            <th>
+              <FormattedMessage id="components.StopScheduleTable.departure" />
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -124,20 +134,22 @@ class StopScheduleTable extends Component {
             const routeName = route.shortName ? route.shortName : route.longName
 
             // Convert to milliseconds for FormattedTime
-            const departureTimestamp = moment().startOf('day').add(stopTime.scheduledDeparture, 's').valueOf()
+            const departureTimestamp = moment()
+              .startOf('day')
+              .add(stopTime.scheduledDeparture, 's')
+              .valueOf()
             // Add ref to scroll to the first stop time departing from now.
             const refProp = scrollToRow ? this.targetDepartureRef : null
 
             return (
               <tr className={className} key={index} ref={refProp}>
-                {showBlockIds && <BlockCell title={blockId}>{blockId}</BlockCell>}
+                {showBlockIds && (
+                  <BlockCell title={blockId}>{blockId}</BlockCell>
+                )}
                 <RouteCell>{routeName}</RouteCell>
                 <td>{headsign}</td>
                 <TimeCell>
-                  <FormattedTime
-                    timeStyle='short'
-                    value={departureTimestamp}
-                  />
+                  <FormattedTime timeStyle="short" value={departureTimestamp} />
                 </TimeCell>
               </tr>
             )

From 0e7808f9d76ef43a13d3297b2d07c4554f871f48 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 11 Feb 2022 08:49:04 -0800
Subject: [PATCH 188/270] refactor(stop-schedule-table): rudimentary typescript

---
 ...edule-table.js => stop-schedule-table.tsx} | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)
 rename lib/components/viewers/{stop-schedule-table.js => stop-schedule-table.tsx} (89%)

diff --git a/lib/components/viewers/stop-schedule-table.js b/lib/components/viewers/stop-schedule-table.tsx
similarity index 89%
rename from lib/components/viewers/stop-schedule-table.js
rename to lib/components/viewers/stop-schedule-table.tsx
index 0fa627ca1..9163540d4 100644
--- a/lib/components/viewers/stop-schedule-table.js
+++ b/lib/components/viewers/stop-schedule-table.tsx
@@ -54,7 +54,13 @@ const TimeCell = styled.td`
  * Table showing scheduled departure times for the specified stop organized
  * chronologically.
  */
-class StopScheduleTable extends Component {
+class StopScheduleTable extends Component<{
+  date: any
+  findStopTimesForStop: () => void
+  showBlockIds: boolean
+  // TODO TYPESCRIPT shared types
+  stopData: any
+}> {
   /**
    * Link to the DOM for the next departure row, so we can scroll to it if needed.
    */
@@ -63,23 +69,25 @@ class StopScheduleTable extends Component {
   /**
    * Scroll to the first stop time that is departing from now.
    */
-  _scrollToFirstDeparture = () => {
+  _scrollToFirstDeparture = (): void => {
     const { current } = this.targetDepartureRef
     if (current) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore TYPESCRIPT TODO: what is this type supposed to be?
       current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this._scrollToFirstDeparture()
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(): void {
     // Should only happen if user changes date and a new stopData is passed.
     this._scrollToFirstDeparture()
   }
 
-  render() {
+  render(): JSX.Element {
     const { date, showBlockIds, stopData } = this.props
     // Show loading spinner if times are still being fetched.
     if (stopData.fetchStatus === FETCH_STATUS.FETCHING) {
@@ -121,7 +129,7 @@ class StopScheduleTable extends Component {
             const { blockId, headsign, route } = stopTime
             // Highlight if this row is the imminent departure and schedule is shown for today.
             const highlightRow = stopTime === highlightedStopTime
-            const className = highlightRow ? 'highlighted-item' : null
+            const className = highlightRow ? 'highlighted-item' : ''
             // This is a bit of a hack to account for the sticky table
             // header interfering with the scrollIntoView. If the next stop time
             // is the imminent departure, we'll set the scrollTo to this row (the
@@ -139,9 +147,11 @@ class StopScheduleTable extends Component {
               .add(stopTime.scheduledDeparture, 's')
               .valueOf()
             // Add ref to scroll to the first stop time departing from now.
-            const refProp = scrollToRow ? this.targetDepartureRef : null
+            const refProp = scrollToRow ? this.targetDepartureRef : undefined
 
             return (
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore TYEPSCRIPT TODO: ref
               <tr className={className} key={index} ref={refProp}>
                 {showBlockIds && (
                   <BlockCell title={blockId}>{blockId}</BlockCell>

From 1a21887ff0869ab3448d7cca4a25dc904c1362f7 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 11 Feb 2022 09:30:48 -0800
Subject: [PATCH 189/270] refactor(stop-schedule-table): show full day schedule

---
 lib/components/viewers/stop-schedule-table.tsx | 6 +++++-
 lib/components/viewers/stop-viewer.js          | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/components/viewers/stop-schedule-table.tsx b/lib/components/viewers/stop-schedule-table.tsx
index 9163540d4..077bea2bb 100644
--- a/lib/components/viewers/stop-schedule-table.tsx
+++ b/lib/components/viewers/stop-schedule-table.tsx
@@ -56,7 +56,8 @@ const TimeCell = styled.td`
  */
 class StopScheduleTable extends Component<{
   date: any
-  findStopTimesForStop: () => void
+  // TODO TYPESCRIPT shared types
+  findStopTimesForStop: (options: any) => void
   showBlockIds: boolean
   // TODO TYPESCRIPT shared types
   stopData: any
@@ -80,6 +81,9 @@ class StopScheduleTable extends Component<{
 
   componentDidMount(): void {
     this._scrollToFirstDeparture()
+
+    const { findStopTimesForStop, stopData } = this.props
+    findStopTimesForStop({ numberOfDepartures: 50, stopId: stopData.id })
   }
 
   componentDidUpdate(): void {
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 78f449680..7cca18519 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -311,6 +311,7 @@ class StopViewer extends Component {
       contents = (
         <StopScheduleTable
           date={date}
+          findStopTimesForStop={findStopTimesForStop}
           homeTimezone={homeTimezone}
           showBlockIds={showBlockIds}
           stopData={stopData}

From 526667339af8cacf54daa6f2bc15120e6cdcaf99 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 16 Feb 2022 09:24:04 -0800
Subject: [PATCH 190/270] =?UTF-8?q?fix(route-viewer):=20don=E2=80=99t=20zo?=
 =?UTF-8?q?om=20to=20itinerary=20when=20route=20viewer=20is=20active?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/actions/api.js                            | 1 +
 lib/actions/ui.js                             | 2 +-
 lib/components/map/bounds-updating-overlay.js | 4 ++++
 lib/components/viewers/route-viewer.js        | 1 -
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index e7beda1f7..8c2523e54 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -1030,6 +1030,7 @@ export function findGeometryForPattern(params) {
         findGeometryForPatternResponse,
         findGeometryForPatternError,
         {
+          noThrottle: true,
           rewritePayload: (payload) => ({
             geometry: payload,
             patternId,
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 659363fa8..adf8cafef 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -75,8 +75,8 @@ export function matchContentToUrl (location) {
           dispatch(setViewedRoute({ patternId, routeId: id }))
         } else {
           dispatch(setViewedRoute(null))
-          dispatch(setMainPanelContent(MainPanelContent.ROUTE_VIEWER))
         }
+        dispatch(setMainPanelContent(MainPanelContent.ROUTE_VIEWER))
         break
       case 'stop':
         if (id) {
diff --git a/lib/components/map/bounds-updating-overlay.js b/lib/components/map/bounds-updating-overlay.js
index ae97c29c6..8a529e938 100644
--- a/lib/components/map/bounds-updating-overlay.js
+++ b/lib/components/map/bounds-updating-overlay.js
@@ -86,6 +86,9 @@ class BoundsUpdatingOverlay extends MapLayer {
     const { map } = newProps.leaflet
     if (!map) return
 
+    const itineraryShown = newProps.mainPanelContent === null
+    if (!itineraryShown) return
+
     // Fit map to to entire itinerary if active itinerary bounds changed
     const newFrom = newProps.query && newProps.query.from
     const newItinBounds =
@@ -195,6 +198,7 @@ const mapStateToProps = (state) => {
     activeStep: activeSearch && activeSearch.activeStep,
     itinerary: getActiveItinerary(state),
     itineraryView: urlParams.ui_itineraryView,
+    mainPanelContent: state.otp.ui.mainPanelContent,
     mapConfig: state.otp.config.map,
     popupLocation: state.otp.ui.mapPopupLocation,
     query: state.otp.currentQuery
diff --git a/lib/components/viewers/route-viewer.js b/lib/components/viewers/route-viewer.js
index 1f2ef3bf9..ddcbe9975 100644
--- a/lib/components/viewers/route-viewer.js
+++ b/lib/components/viewers/route-viewer.js
@@ -79,7 +79,6 @@ class RouteViewer extends Component {
   /** Used to scroll to actively viewed route on load */
   componentDidUpdate() {
     const { routes } = this.props
-    console.log(routes)
     const { initialRender } = this.state
 
     // Wait until more than the one route is present.

From c7d495b662b9e7b74739aeeb34e574b814af674e Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 16 Feb 2022 09:52:55 -0800
Subject: [PATCH 191/270] refactor: run autoformatter

---
 lib/actions/ui.js | 86 +++++++++++++++++++++++++++--------------------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index adf8cafef..4d3f45638 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -1,21 +1,19 @@
-import { push } from 'connected-react-router'
-import coreUtils from '@opentripplanner/core-utils'
+/* eslint-disable no-case-declarations */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { createAction } from 'redux-actions'
 import { matchPath } from 'react-router'
+import { push } from 'connected-react-router'
+import coreUtils from '@opentripplanner/core-utils'
 
-import { getUiUrlParams, getModesForActiveAgencyFilter } from '../util/state'
 import { getDefaultLocale, loadLocaleData } from '../util/i18n'
+import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
 import { getPathFromParts } from '../util/ui'
 
-import { findRoute, setUrlSearch } from './api'
-import { setMapCenter, setMapZoom, setRouterId } from './config'
-import {
-  clearActiveSearch,
-  parseUrlQueryString,
-  setActiveSearch
-} from './form'
+import { clearActiveSearch, parseUrlQueryString, setActiveSearch } from './form'
 import { clearLocation } from './map'
+import { findRoute, setUrlSearch } from './api'
 import { setActiveItinerary } from './narrative'
+import { setMapCenter, setMapZoom, setRouterId } from './config'
 
 const updateLocale = createAction('UPDATE_LOCALE')
 
@@ -28,7 +26,7 @@ const updateLocale = createAction('UPDATE_LOCALE')
  * @param  {string} replaceSearch optional search string to replace current one
  * @param  {func}   routingMethod the connected-react-router method to execute (defaults to push).
  */
-export function routeTo (url, replaceSearch, routingMethod = push) {
+export function routeTo(url, replaceSearch, routingMethod = push) {
   return function (dispatch, getState) {
     // Get search to preserve when routing to new path.
     const { router } = getState()
@@ -47,7 +45,7 @@ export function routeTo (url, replaceSearch, routingMethod = push) {
  * Checks URL and redirects app to appropriate content (e.g., viewed
  * route or stop).
  */
-export function matchContentToUrl (location) {
+export function matchContentToUrl(location) {
   // eslint-disable-next-line complexity
   return function (dispatch, getState) {
     // This is a bit of a hack to make up for the fact that react-router does
@@ -93,7 +91,8 @@ export function matchContentToUrl (location) {
         if (!lat || !lon) {
           // Attempt to parse path if lat/lon not found. (Legacy UI otp.js used
           // slashes in the pathname to specify lat, lon, etc.)
-          [,, lat, lon, zoom, routerId] = idToParams(location.pathname, '/')
+          // eslint-disable-next-line prettier/prettier
+          [, , lat, lon, zoom, routerId] = idToParams(location.pathname, '/')
         }
         console.log(lat, lon, zoom, routerId)
         // Update map location/zoom and optionally override router ID.
@@ -115,15 +114,15 @@ export function matchContentToUrl (location) {
  * Split the path id into its parts (according to specified delimiter). Parse
  * numbers if detected.
  */
-function idToParams (id, delimiter = ',') {
-  return id.split(delimiter).map(s => isNaN(s) ? s : +s)
+function idToParams(id, delimiter = ',') {
+  return id.split(delimiter).map((s) => (isNaN(s) ? s : +s))
 }
 
 /**
  * Event listener for responsive webapp that handles a back button press and
  * sets the active search and itinerary according to the URL query params.
  */
-export function handleBackButtonPress (e) {
+export function handleBackButtonPress(e) {
   return function (dispatch, getState) {
     const state = getState()
     const { activeSearchId } = state.otp
@@ -152,7 +151,9 @@ export function handleBackButtonPress (e) {
         dispatch(clearLocation({ type: 'from' }))
         dispatch(clearLocation({ type: 'to' }))
       } else if (previousSearchId) {
-        console.warn(`No search found in state history for search ID: ${previousSearchId}. Replanning...`)
+        console.warn(
+          `No search found in state history for search ID: ${previousSearchId}. Replanning...`
+        )
         // Set query to the params found in the URL and perform routing query
         // for search ID.
         // Also, we don't want to update the URL here because that will funk with
@@ -170,11 +171,13 @@ export const setMobileScreen = createAction('SET_MOBILE_SCREEN')
  * of MainPanelContent) and routes the application to the correct path.
  * @param {number} payload MainPanelContent value
  */
-export function setMainPanelContent (payload) {
+export function setMainPanelContent(payload) {
   return function (dispatch, getState) {
     const { otp, router } = getState()
     if (otp.ui.mainPanelContent === payload) {
-      console.warn(`Attempt to route from ${otp.ui.mainPanelContent} to ${payload}. Doing nothing`)
+      console.warn(
+        `Attempt to route from ${otp.ui.mainPanelContent} to ${payload}. Doing nothing`
+      )
       // Do nothing if the panel is already set. This will guard against over
       // enthusiastic routing and overwriting current/nested states.
       return
@@ -203,7 +206,7 @@ export const clearPanel = createAction('CLEAR_MAIN_PANEL')
 
 // Stop/Route/Trip Viewer actions
 
-export function setViewedStop (payload) {
+export function setViewedStop(payload) {
   return function (dispatch, getState) {
     dispatch(viewStop(payload))
     // payload.stopId may be undefined, which is ok as will be ignored by getPathFromParts
@@ -218,7 +221,7 @@ export const setHoveredStop = createAction('SET_HOVERED_STOP')
 
 export const setViewedTrip = createAction('SET_VIEWED_TRIP')
 
-export function setViewedRoute (payload) {
+export function setViewedRoute(payload) {
   return function (dispatch, getState) {
     dispatch(viewRoute(payload))
 
@@ -245,19 +248,26 @@ export const MainPanelContent = {
 }
 
 export const MobileScreens = {
-  WELCOME_SCREEN: 1,
   // eslint-disable-next-line sort-keys
-  SET_INITIAL_LOCATION: 2,
+  RESULTS_SUMMARY: 8,
+
   // eslint-disable-next-line sort-keys
   SEARCH_FORM: 3,
-  SET_FROM_LOCATION: 4,
-  SET_TO_LOCATION: 5,
-  // eslint-disable-next-line sort-keys
-  SET_OPTIONS: 6,
+
   // eslint-disable-next-line sort-keys
   SET_DATETIME: 7,
+
+  SET_FROM_LOCATION: 4,
+
   // eslint-disable-next-line sort-keys
-  RESULTS_SUMMARY: 8
+  SET_INITIAL_LOCATION: 2,
+
+  // eslint-disable-next-line sort-keys
+  SET_OPTIONS: 6,
+
+  SET_TO_LOCATION: 5,
+
+  WELCOME_SCREEN: 1
 }
 
 /**
@@ -283,7 +293,7 @@ const setPreviousItineraryView = createAction('SET_PREVIOUS_ITINERARY_VIEW')
  * Sets the itinerary view state (see values above) in the URL params
  * (currently only used in batch results).
  */
-export function setItineraryView (value) {
+export function setItineraryView(value) {
   return function (dispatch, getState) {
     const urlParams = coreUtils.query.getUrlParams()
     const prevItineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
@@ -305,10 +315,10 @@ export function setItineraryView (value) {
 }
 
 /**
-  * Switch the mobile batch results view between full map view and the split state
-  * (itinerary list or itinerary leg view) that was in place prior.
-  */
-export function toggleBatchResultsMap () {
+ * Switch the mobile batch results view between full map view and the split state
+ * (itinerary list or itinerary leg view) that was in place prior.
+ */
+export function toggleBatchResultsMap() {
   return function (dispatch, getState) {
     const urlParams = coreUtils.query.getUrlParams()
     const itineraryView = urlParams.ui_itineraryView || ItineraryView.LIST
@@ -327,7 +337,7 @@ export function toggleBatchResultsMap () {
 /**
  * Takes the user back to the mobile search screen in mobile views.
  */
-export function showMobileSearchScreen () {
+export function showMobileSearchScreen() {
   return function (dispatch, getState) {
     // Reset itinerary view state to show the list of results *before* clearing the search.
     // (Otherwise, if the map is expanded, the search is not cleared.)
@@ -343,7 +353,7 @@ export function showMobileSearchScreen () {
  * set in the configuration.
  * Also update the lang attribute on the root <html> element for accessibility.
  */
-export function setLocale (locale) {
+export function setLocale(locale) {
   return async function (dispatch, getState) {
     const { config } = getState().otp
     const { language: customMessages } = config
@@ -365,7 +375,7 @@ const updateRouteViewerFilter = createAction('UPDATE_ROUTE_VIEWER_FILTER')
  * Updates the route viewer filter
  * @param {*} filter Object which includes either agency, mode, and/or search
  */
-export function setRouteViewerFilter (filter) {
+export function setRouteViewerFilter(filter) {
   return async function (dispatch, getState) {
     dispatch(updateRouteViewerFilter(filter))
 
@@ -375,7 +385,9 @@ export function setRouteViewerFilter (filter) {
     if (
       filter.agency &&
       activeModeFilter &&
-      !getModesForActiveAgencyFilter(getState()).includes(activeModeFilter.toUpperCase())
+      !getModesForActiveAgencyFilter(getState()).includes(
+        activeModeFilter.toUpperCase()
+      )
     ) {
       // If invalid mode is selected, reset mode
       dispatch(updateRouteViewerFilter({ mode: null }))

From fe479080ef009ce790e01b66b91c67b86f2515c0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 16 Feb 2022 11:33:59 -0800
Subject: [PATCH 192/270] refactor: don't highlight stops no longer active

---
 lib/actions/api.js                      |  5 ++++-
 lib/actions/ui.js                       |  4 +++-
 lib/components/viewers/route-details.js |  6 +++++-
 lib/reducers/create-otp-reducer.js      | 10 +---------
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 8c2523e54..b4041e4ee 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -15,7 +15,7 @@ import { convertToPlace, getPersistenceMode } from '../util/user'
 import { getSecureFetchOptions } from '../util/middleware'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
 
-import { ItineraryView, setItineraryView } from './ui'
+import { ItineraryView, setItineraryView, setViewedStop } from './ui'
 import { rememberPlace } from './user'
 import { setMapZoom } from './config'
 import { zoomToStop } from './map'
@@ -747,6 +747,7 @@ export function findRoutes(params) {
     findRoutesError,
     {
       postprocess: (payload, dispatch) => {
+        dispatch(setViewedStop(null))
         return dispatch(findRoutesV2())
       },
       rewritePayload: (payload, dispatch, getState) => {
@@ -841,6 +842,8 @@ export const findRouteError = createAction('FIND_ROUTE_ERROR')
 
 export function findRoute(params) {
   return async function (dispatch, getState) {
+    dispatch(setViewedStop(null))
+
     const state = getState()
     const { routeId } = params
     const route = state?.otp?.transitIndex?.routes?.[routeId]
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 4d3f45638..27650014d 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -209,7 +209,9 @@ export const clearPanel = createAction('CLEAR_MAIN_PANEL')
 export function setViewedStop(payload) {
   return function (dispatch, getState) {
     dispatch(viewStop(payload))
-    // payload.stopId may be undefined, which is ok as will be ignored by getPathFromParts
+
+    if (!payload?.stopId) return
+
     const path = getPathFromParts('stop', payload?.stopId)
     dispatch(routeTo(path))
   }
diff --git a/lib/components/viewers/route-details.js b/lib/components/viewers/route-details.js
index 07ec12c2b..98b55ef55 100644
--- a/lib/components/viewers/route-details.js
+++ b/lib/components/viewers/route-details.js
@@ -52,7 +52,11 @@ class RouteDetails extends Component {
   }
 
   componentDidUpdate = (prevProps) => {
-    if (prevProps.pattern?.id !== this.props.pattern?.id) {
+    if (
+      prevProps.pattern?.id !== this.props.pattern?.id ||
+      !this.props.pattern?.stops ||
+      this.props.pattern?.stops?.length === 0
+    ) {
       this.getStops()
     }
   }
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index fb8d682f6..0afdc3d88 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -811,17 +811,9 @@ function createOtpReducer(config) {
           })
         }
         // If patterns for route is undefined set it
-        if (!state.transitIndex.routes[routeId].patterns) {
-          return update(state, {
-            transitIndex: {
-              routes: { [routeId]: { patterns: { $set: patterns } } }
-            }
-          })
-        }
-        // If the route patterns already exist, only merge in new data
         return update(state, {
           transitIndex: {
-            routes: { [routeId]: { $merge: patterns } }
+            routes: { [routeId]: { patterns: { $set: patterns } } }
           }
         })
       case 'FIND_GEOMETRY_FOR_PATTERN_RESPONSE':

From 19c0a15760f368317d47dba30e52989ac34b3b14 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 16 Feb 2022 11:47:14 -0800
Subject: [PATCH 193/270] refactor: avoid crash in rare slow URL update cases

---
 lib/actions/api.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index b4041e4ee..e7408d62d 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -1059,11 +1059,13 @@ export function findStopsForPattern(params) {
     const state = getState()
     const route = state?.otp?.transitIndex?.routes?.[params.routeId]
     // If a route was fetched from GraphQL, it already has patterns
-    if (route && route.v2) {
+    if (route && route?.v2) {
       return
     }
 
     const { patternId, routeId } = params
+    if (!patternId || !routeId) return
+
     return dispatch(
       createQueryAction(
         `index/patterns/${params.patternId}/stops`,

From ee2c0d2b00546d574bbd9811f1fc80d643a00955 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 16 Feb 2022 12:32:56 -0800
Subject: [PATCH 194/270] refactor(pattern viewer): avoid crash when stops not
 loaded

---
 lib/reducers/create-otp-reducer.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 0afdc3d88..d001d73e4 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -609,7 +609,7 @@ function createOtpReducer(config) {
           overlay: {
             transit: {
               pending: { $set: false },
-              stops: { $set: action.payload.stops }
+              stops: { $set: action?.payload?.stops }
             }
           }
         })
@@ -707,7 +707,9 @@ function createOtpReducer(config) {
         return update(state, {
           transitIndex: {
             trips: {
-              [action.payload.tripId]: { stops: { $set: action.payload.stops } }
+              [action.payload.tripId]: {
+                stops: { $set: action.payload?.stops }
+              }
             }
           }
         })
@@ -718,7 +720,7 @@ function createOtpReducer(config) {
               [action.payload.routeId]: {
                 patterns: {
                   [action.payload.patternId]: {
-                    stops: { $set: action.payload.stops }
+                    stops: { $set: action.payload?.stops }
                   }
                 }
               }

From 6bee32cada1cdd244569e64761a7815775223a7c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 17 Feb 2022 08:59:08 -0800
Subject: [PATCH 195/270] refactor: don't crash on missing stop times

---
 lib/reducers/create-otp-reducer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index d001d73e4..210a69a41 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -728,6 +728,9 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOP_TIMES_FOR_TRIP_RESPONSE':
+        if (!action.payload.tripId) return state
+        if (!action.payload.stopTimes) return state
+
         return update(state, {
           transitIndex: {
             trips: {

From 41747c570d977698e4a4e46ebd2d795939707c60 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 17 Feb 2022 09:47:30 -0800
Subject: [PATCH 196/270] chore(deps): upgrade route-viewer-overlay

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 3c9fad6cc..dd1871b1b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.2.0",
+    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.1",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
diff --git a/yarn.lock b/yarn.lock
index 7019c6546..3383a1774 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2588,10 +2588,10 @@
     "@opentripplanner/humanize-distance" "^1.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.0.tgz#b1a8954fa9f3cad15f1ee06b665813e8f4539448"
-  integrity sha512-W0jRot7pWWll33NdXDkG/lV+hgVfybqAx1C7at0CcAHTLWk9l92HmPhbXaZExYJYL2ZY9szWvNIAehCmbxIuxQ==
+"@opentripplanner/route-viewer-overlay@^1.2.1-alpha.1":
+  version "1.2.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.1-alpha.1.tgz#77dea0c1030f67d1447f4bab1c8dc888cb5486bd"
+  integrity sha512-tqUREK+Su5DhvkEUnF9ADMhB/q1lafoKU0GgO6XJkKFBYkQUMXY3LIpG3BsMU4suSsDwTg3NMhJXnJKQH+QI4w==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/core-utils" "^4.5.0"

From 660968b1298a5ae1b7c7d3507c0fbf6289b96f95 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 17 Feb 2022 09:55:37 -0800
Subject: [PATCH 197/270] refactor: correctly avoid missing stopTimes crash

---
 lib/reducers/create-otp-reducer.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 210a69a41..ec5fc60fd 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -714,13 +714,16 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOPS_FOR_PATTERN_RESPONSE':
+        if (!action.payload?.stops || action.payload.stops.length === 0)
+          return state
+
         return update(state, {
           transitIndex: {
             routes: {
               [action.payload.routeId]: {
                 patterns: {
                   [action.payload.patternId]: {
-                    stops: { $set: action.payload?.stops }
+                    stops: { $set: action.payload.stops }
                   }
                 }
               }

From c3e1186424d31b9357b0ef8af9d6de8d471ed250 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 18 Feb 2022 08:39:17 -0800
Subject: [PATCH 198/270] chore(deps): graduate to final version of
 location-field 1.12

---
 i18n/en-US.yml | 2 +-
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 7b41bbad4..77c5977bd 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -679,7 +679,7 @@ otpUi:
     clearLocation: Clear location
     currentLocationUnavailable: Current location not available ({error})
     fetchingLocation: Fetching location...
-    geocoderUnreachable: Could not reach geocoder
+    geocoderUnreachable: Could not reach geocoder{error, select, undefined {} other { ({error})}}
     myPlaces: My Places
     nearby: Nearby Stops
     noResultsFound: >
diff --git a/package.json b/package.json
index bc33826c5..788e4c073 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
     "@opentripplanner/itinerary-body": "^2.7.0",
-    "@opentripplanner/location-field": "1.12.0-alpha.1",
+    "@opentripplanner/location-field": "1.12.0",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",

From 3117e5951661c17f2b810ef47f229b99a986cf1d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 18 Feb 2022 08:52:28 -0800
Subject: [PATCH 199/270] chore(lockfile): update

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 41795aa9d..1396f3c36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2559,10 +2559,10 @@
     react-resize-detector "^4.2.1"
     velocity-react "^1.4.3"
 
-"@opentripplanner/location-field@1.12.0-alpha.1":
-  version "1.12.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.12.0-alpha.1.tgz#13aa1fa08f957e9f66d54f6591130c3a3b790499"
-  integrity sha512-X63dzJaTj402Ni/IQH71fQonnbQwz8WITRysFzgelMcyt2m0dFs6IaCK6NsuLZ9l/kQk4GCRUYjVlku8NsJ4tA==
+"@opentripplanner/location-field@1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.12.0.tgz#29a2b2394c92c6ba2867eeebe099d3e82a49faa4"
+  integrity sha512-VueroM7SLLxnURTdFSBjnjAk9KXVb8as+nzYHNrlMx2XJqQS4I4qvTXhMjr8xjd4tRaGez6Zp3xB3bEtXeDAiw==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
     "@opentripplanner/core-utils" "^4.7.0"

From a610d8611951c8bccefe2e5a4921d88ca4b0b480 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Fri, 18 Feb 2022 16:43:48 -0500
Subject: [PATCH 200/270] refactor(FlexIndicator): Update the flex indicator
 css

---
 lib/components/narrative/default/flex-indicator.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/components/narrative/default/flex-indicator.tsx b/lib/components/narrative/default/flex-indicator.tsx
index 93a015e9e..e98a2df47 100644
--- a/lib/components/narrative/default/flex-indicator.tsx
+++ b/lib/components/narrative/default/flex-indicator.tsx
@@ -37,18 +37,19 @@ const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
   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' : '90px')};
+  height: ${(props) => (props.shrink ? '40px' : '70px')};
+  align-items: center;
   margin-right: 1em;
-  max-width: ${(props) => (props.shrink ? '60px' : '160px')};
+  max-width: ${(props) => (props.shrink ? '60px' : '180px')};
   padding-right: 0.25em;
-  padding-top: 0.25em;
 
   /* "Flex Service" text */
   h4 {
-    grid-column: 3 / span 2;
+    grid-column: 2 / span 3;
     grid-row: 1;
     margin: 0;
-    padding-top: 2px;
+    margin-left: 1ch;
+    padding-top: 0.25em;
     text-align: left;
   }
 
@@ -77,7 +78,6 @@ const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
     display: block;
     grid-row: 1 / span 2;
     height: inherit;
-    margin-top: -0.25em;
     position: relative;
     width: 20px;
   }

From e4192a740eca211bfdc4a1c46d4fa5315e0d906b Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Fri, 18 Feb 2022 16:45:34 -0500
Subject: [PATCH 201/270] feat(Flex Itineraries, Config): Add config param to
 disable flex arc display

---
 example-config.yml | 2 ++
 lib/util/state.js  | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/example-config.yml b/example-config.yml
index 123383bcd..02fbd1b04 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -112,6 +112,7 @@ map:
   ###   styles.segment_labels: styles attributes recognized by transitive.js.
   ###                         For examples of applicable style attributes, see
   ###                         https://github.com/conveyal/transitive.js/blob/master/stories/Transitive.stories.js#L47.
+  ### - disableFlexArc: optional parameter to disable rendering flex itinerary legs as an arc. 
   # transitive:
   #   labeledModes:
   #     - BUS
@@ -127,6 +128,7 @@ map:
   #       color: "#FFE0D0"
   #       font-family: Hind, sans-serif
   #       font-size: 18px
+  #   disableFlexArc: true
 
 # it is possible to leave out a geocoder config entirely. In that case only
 # GPS coordinates will be used when finding the origin/destination.
diff --git a/lib/util/state.js b/lib/util/state.js
index d3b1f6360..83c1a245c 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -605,6 +605,7 @@ export const getTransitiveData = createSelector(
   itineraryResponseExists,
   getItineraryToRender,
   (state) => state.otp.config.companies,
+  (state) => state.otp.config.map.transitive?.disableFlexArc,
   (state, props) => props.getTransitiveRouteLabel,
   (
     hasResponse,
@@ -612,6 +613,7 @@ export const getTransitiveData = createSelector(
     hasItineraryResponse,
     itineraryToRender,
     companies,
+    disableFlexArc,
     getTransitiveRouteLabel
   ) => {
     if (hasResponse) {
@@ -620,7 +622,8 @@ export const getTransitiveData = createSelector(
           ? coreUtils.map.itineraryToTransitive(
               itineraryToRender,
               companies,
-              getTransitiveRouteLabel
+              getTransitiveRouteLabel,
+              disableFlexArc
             )
           : null
       } else if (otpResponse) {

From d7dabe462b94f812497943a46e7aa882b85c4ebb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 22 Feb 2022 11:27:17 -0800
Subject: [PATCH 202/270] fix: support mobile stop viewer deep linking

---
 lib/actions/form.js                           | 2 +-
 lib/components/map/bounds-updating-overlay.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/actions/form.js b/lib/actions/form.js
index a385b30a7..92b8075d1 100644
--- a/lib/actions/form.js
+++ b/lib/actions/form.js
@@ -137,7 +137,7 @@ export function formChanged (oldQuery, newQuery) {
     // Only clear the main panel if a single location changed. This prevents
     // clearing the panel on load if the app is focused on a stop viewer but a
     // search query should also be visible.
-    if (oneLocationChanged) {
+    if (oneLocationChanged && !isMobile) {
       dispatch(setMainPanelContent(null))
     }
     if (!shouldReplanTrip) {
diff --git a/lib/components/map/bounds-updating-overlay.js b/lib/components/map/bounds-updating-overlay.js
index 8a529e938..93c32d0c3 100644
--- a/lib/components/map/bounds-updating-overlay.js
+++ b/lib/components/map/bounds-updating-overlay.js
@@ -109,8 +109,9 @@ class BoundsUpdatingOverlay extends MapLayer {
     // Also refit map if itineraryView prop has changed.
     const itineraryViewChanged =
       oldProps.itineraryView !== newProps.itineraryView
+    const isMobile = coreUtils.ui.isMobile()
 
-    if (oldMapConfig !== newMapConfig) {
+    if (oldMapConfig !== newMapConfig && !isMobile) {
       setTimeout(() => {
         map.invalidateSize(true)
         map.setZoom(newMapConfig.initZoom || 13)

From cae12e386d3792cef4508a8fab64fb4796c657a0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 22 Feb 2022 11:27:35 -0800
Subject: [PATCH 203/270] chore: run autoformatter

---
 lib/actions/form.js | 63 +++++++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/lib/actions/form.js b/lib/actions/form.js
index 92b8075d1..d7dec2149 100644
--- a/lib/actions/form.js
+++ b/lib/actions/form.js
@@ -1,20 +1,20 @@
+import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
 import debounce from 'lodash.debounce'
 import isEqual from 'lodash.isequal'
 import moment from 'moment'
 import qs from 'qs'
-import { createAction } from 'redux-actions'
 
 import { queryIsValid } from '../util/state'
 
-import { routingQuery } from './api'
-import { setLocation } from './map'
 import {
   MobileScreens,
   routeTo,
   setMainPanelContent,
   setMobileScreen
 } from './ui'
+import { routingQuery } from './api'
+import { setLocation } from './map'
 
 const {
   getDefaultQuery,
@@ -34,7 +34,7 @@ export const storeDefaultSettings = createAction('STORE_DEFAULT_SETTINGS')
  * @param {Boolean} [full=false] if set to true, the from/to locations and URL
  *  query parameters will also be reset.
  */
-export function resetForm (full = false) {
+export function resetForm(full = false) {
   return function (dispatch, getState) {
     const state = getState()
     const { transitModes } = state.otp.config.modes
@@ -51,15 +51,15 @@ export function resetForm (full = false) {
       const options = getTripOptionsFromQuery(defaultQuery)
       // Default mode is currently WALK,TRANSIT. We need to update this value
       // here to match the list of modes, otherwise the form will break.
-      options.mode = ['WALK', ...transitModes.map(m => m.mode)].join(',')
+      options.mode = ['WALK', ...transitModes.map((m) => m.mode)].join(',')
       dispatch(settingQueryParam(options))
     }
     if (full) {
       // If fully resetting form, also clear the active search, from/to
       // locations, and query params.
       dispatch(clearActiveSearch())
-      dispatch(setLocation({location: null, locationType: 'from'}))
-      dispatch(setLocation({location: null, locationType: 'to'}))
+      dispatch(setLocation({ location: null, locationType: 'from' }))
+      dispatch(setLocation({ location: null, locationType: 'to' }))
       // Get query params. Delete everything except sessionId.
       const params = getUrlParams()
       for (const key in params) {
@@ -75,7 +75,7 @@ export function resetForm (full = false) {
  * parameter-specific actions. If a search ID is provided, a routing query (OTP
  * search) will be kicked off immediately.
  */
-export function setQueryParam (payload, searchId) {
+export function setQueryParam(payload, searchId) {
   return function (dispatch, getState) {
     dispatch(settingQueryParam(payload))
     if (searchId) dispatch(routingQuery(searchId))
@@ -93,18 +93,19 @@ export function setQueryParam (payload, searchId) {
  *                         query made during a call taker session, to prevent
  *                         a search from being added to the current call)
  */
-export function parseUrlQueryString (params = getUrlParams(), source) {
+export function parseUrlQueryString(params = getUrlParams(), source) {
   return function (dispatch, getState) {
     // Filter out the OTP (i.e. non-UI) params and set the initial query
     const planParams = {}
-    Object.keys(params).forEach(key => {
+    Object.keys(params).forEach((key) => {
       if (!key.startsWith('ui_')) planParams[key] = params[key]
     })
     let searchId = params.ui_activeSearch || coreUtils.storage.randId()
     if (source) searchId += source
     // Convert strings to numbers/objects and dispatch
-    planParamsToQueryAsync(planParams, getState().otp.config)
-      .then(query => dispatch(setQueryParam(query, searchId)))
+    planParamsToQueryAsync(planParams, getState().otp.config).then((query) =>
+      dispatch(setQueryParam(query, searchId))
+    )
   }
 }
 
@@ -117,18 +118,14 @@ let lastDebouncePlanTimeMs
  * (based on autoPlan strategies) as well as updating the UI state (esp. for
  * mobile).
  */
-export function formChanged (oldQuery, newQuery) {
+export function formChanged(oldQuery, newQuery) {
   return function (dispatch, getState) {
     const state = getState()
     const { config, currentQuery, ui } = state.otp
     const { autoPlan, debouncePlanTimeMs } = config
     const isMobile = coreUtils.ui.isMobile()
-    const {
-      fromChanged,
-      oneLocationChanged,
-      shouldReplanTrip,
-      toChanged
-    } = checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery)
+    const { fromChanged, oneLocationChanged, shouldReplanTrip, toChanged } =
+      checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery)
     // If departArrive is set to 'NOW', update the query time to current
     if (currentQuery.departArrive === 'NOW') {
       const now = moment().format(coreUtils.time.OTP_API_TIME_FORMAT)
@@ -156,7 +153,10 @@ export function formChanged (oldQuery, newQuery) {
       // If replanning trip and query is valid,
       // check if debouncing function needs to be (re)created.
       if (!debouncedPlanTrip || lastDebouncePlanTimeMs !== debouncePlanTimeMs) {
-        debouncedPlanTrip = debounce(() => dispatch(routingQuery()), debouncePlanTimeMs)
+        debouncedPlanTrip = debounce(
+          () => dispatch(routingQuery()),
+          debouncePlanTimeMs
+        )
         lastDebouncePlanTimeMs = debouncePlanTimeMs
       }
       debouncedPlanTrip()
@@ -169,15 +169,15 @@ export function formChanged (oldQuery, newQuery) {
  * whether the mobile view is active, and the old/new queries. Response type is
  * an object containing various booleans.
  */
-export function checkShouldReplanTrip (autoPlan, isMobile, oldQuery, newQuery) {
+export function checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) {
   // Determine if either from/to location has changed
   const fromChanged = !isEqual(oldQuery.from, newQuery.from)
   const toChanged = !isEqual(oldQuery.to, newQuery.to)
-  const oneLocationChanged = (fromChanged && !toChanged) || (!fromChanged && toChanged)
+  const oneLocationChanged =
+    (fromChanged && !toChanged) || (!fromChanged && toChanged)
   // Check whether a trip should be auto-replanned
-  const strategy = isMobile && autoPlan?.mobile
-    ? autoPlan?.mobile
-    : autoPlan?.default
+  const strategy =
+    isMobile && autoPlan?.mobile ? autoPlan?.mobile : autoPlan?.default
   const shouldReplanTrip = evaluateAutoPlanStrategy(
     strategy,
     fromChanged,
@@ -198,7 +198,12 @@ export function checkShouldReplanTrip (autoPlan, isMobile, oldQuery, newQuery) {
  * some query param has already changed. If further checking of query params is
  * needed, additional strategies should be added.
  */
-const evaluateAutoPlanStrategy = (strategy, fromChanged, toChanged, oneLocationChanged) => {
+const evaluateAutoPlanStrategy = (
+  strategy,
+  fromChanged,
+  toChanged,
+  oneLocationChanged
+) => {
   switch (strategy) {
     case 'ONE_LOCATION_CHANGED':
       if (oneLocationChanged) return true
@@ -206,7 +211,9 @@ const evaluateAutoPlanStrategy = (strategy, fromChanged, toChanged, oneLocationC
     case 'BOTH_LOCATIONS_CHANGED':
       if (fromChanged && toChanged) return true
       break
-    case 'ANY': return true
-    default: return false
+    case 'ANY':
+      return true
+    default:
+      return false
   }
 }

From 5c899de0f016b3fe03b3ac499e395703a21aeb40 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 22 Feb 2022 11:31:05 -0800
Subject: [PATCH 204/270] fix(switch-button): automatically re-plan after
 clicking

---
 lib/actions/map.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 7a50e30ad..3413b82bc 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -120,16 +120,16 @@ export function onLocationSelected(
 }
 
 export function switchLocations() {
-  return function (dispatch, getState) {
+  return async function (dispatch, getState) {
     const { from, to } = getState().otp.currentQuery
     // First, reverse the locations.
-    dispatch(
+    await dispatch(
       settingLocation({
         location: to,
         locationType: 'from'
       })
     )
-    dispatch(
+    await dispatch(
       settingLocation({
         location: from,
         locationType: 'to'

From 0d1907dc5435293c6080ea2e324b5292b712247d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 22 Feb 2022 11:33:15 -0800
Subject: [PATCH 205/270] refactor(actions/form): resolve autoformatter until
 typescripted

---
 lib/actions/form.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/actions/form.js b/lib/actions/form.js
index d7dec2149..3168c7641 100644
--- a/lib/actions/form.js
+++ b/lib/actions/form.js
@@ -1,3 +1,5 @@
+// TODO: Typescript
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
 import debounce from 'lodash.debounce'

From f68f92513ae1214fa5cea5e9cdd287fcd36cc78a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 22 Feb 2022 14:43:00 -0800
Subject: [PATCH 206/270] refactor(example-config): clarify mapillary api key

---
 example-config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example-config.yml b/example-config.yml
index 7115a99ae..ec5f97ae0 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -411,5 +411,6 @@ dateTime:
 #   hideRouteShapesWithinFlexZones: true
 
 # API key to make Mapillary API calls. These are used to show street imagery.
+# Mapillary calls these "Client Tokens". They can be created at https://www.mapillary.com/dashboard/developers
 # mapillary:
 #   key: <Mapillary Key>

From ae340238753a61bdf9e0eb704339aa93c4001376 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 23 Feb 2022 12:05:10 -0800
Subject: [PATCH 207/270] fix(formatted-date-time-preview): don't crash on
 missing route mode

---
 lib/components/util/formatted-date-time-preview.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/util/formatted-date-time-preview.js b/lib/components/util/formatted-date-time-preview.js
index 1cd1fc37b..f7fe00237 100644
--- a/lib/components/util/formatted-date-time-preview.js
+++ b/lib/components/util/formatted-date-time-preview.js
@@ -41,6 +41,7 @@ const FormattedDateTimePreview = ({
       />
     )
   }
+  return null
 }
 
 FormattedDateTimePreview.propTypes = {

From 0dda39dfe0bfa0eb7b0e0d38cebee91a599de56e Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 23 Feb 2022 16:23:35 -0500
Subject: [PATCH 208/270] refactor(Locale-selector): Address PR comments

---
 example-config.yml                     | 17 ++++++++++++-----
 i18n/es.yml                            |  2 +-
 i18n/{fr-FR.yml => fr.yml}             |  2 +-
 i18n/ko.yml                            |  2 +-
 i18n/vi.yml                            |  2 +-
 i18n/zh.yml                            |  2 +-
 lib/components/app/locale-selector.tsx |  2 +-
 lib/util/i18n.js                       |  4 ++--
 8 files changed, 20 insertions(+), 13 deletions(-)
 rename i18n/{fr-FR.yml => fr.yml} (99%)

diff --git a/example-config.yml b/example-config.yml
index b84e98f05..a438733c7 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -341,7 +341,7 @@ itinerary:
 ### Languages defined may be region-specific (e.g. en-US) or language-specific (e.g. es, kr)
 ### The LocaleSelector component, which provides a dropdown for the user to change their locale, will
 ### only be rendered if more than one valid language (all languages must have "name" defined) is included
-### in the language config. Locale icons (flags) are currently defined in locale-selector.tsx file. 
+### in the language config. Locale icons (flags) are rendered based on the country code provided below (i.e. flag: US)
 
 # language:
 #   allLanguages
@@ -349,7 +349,6 @@ itinerary:
 #       accessModes:
 #         bikeshare: Relay Bike
 #   en-US:
-#     name: English (US)
 #     common:
 #       accessModes:
 #         bikeshare: Blue Bike
@@ -371,8 +370,10 @@ itinerary:
 #         modes: "CAR_HAIL, CAR_RENT"
 #       480:
 #         msg: No available transit routes or rideshare/carshare service at origin.
-#   fr-FR:
-#     name: French (France)
+#     flag: US
+#     name: English (US)
+#
+#   fr:
 #     config:
 #       # App (hamburger) menu items
 #       menuItems:
@@ -380,17 +381,23 @@ itinerary:
 #         give-us-feedback: Donnez votre avis
 #         log-my-commute: Mes trajets verts
 #         traveler-tools: Outils du voyageur
+#     flag: FR
+#     name: French
 
 #   ko:
+#     flag: KR
 #     name: 한국인
 
 #   vi:
+#     flag: VN
 #     name: Tiếng Việt
 
 #   zh:
+#     flag: CN
 #     name: 中国人
 
-#   es: 
+#   es:
+#     flag: ES
 #     name: Español
 
 ### Localization section to provide language/locale settings
diff --git a/i18n/es.yml b/i18n/es.yml
index aa1f5b318..061b63be9 100644
--- a/i18n/es.yml
+++ b/i18n/es.yml
@@ -1,4 +1,4 @@
-_id: es-ES
+_id: es
 _name: Spanish
 
 # This file contains localized strings (a.k.a. messages) for the language indicated above:
diff --git a/i18n/fr-FR.yml b/i18n/fr.yml
similarity index 99%
rename from i18n/fr-FR.yml
rename to i18n/fr.yml
index 06a99cb15..4c2c366ef 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr.yml
@@ -1,4 +1,4 @@
-_id: fr-FR
+_id: fr
 _name: Exemple de traduction pour OTP-react-redux en français !
 
 # Noteworthy items for translating into French:
diff --git a/i18n/ko.yml b/i18n/ko.yml
index 4d2a193d5..619aeef8d 100644
--- a/i18n/ko.yml
+++ b/i18n/ko.yml
@@ -1,4 +1,4 @@
-_id: ko-KR
+_id: ko
 _name: Korean
 
 # This file contains localized strings (a.k.a. messages) for the language indicated above:
diff --git a/i18n/vi.yml b/i18n/vi.yml
index ae5072697..db73f48f2 100644
--- a/i18n/vi.yml
+++ b/i18n/vi.yml
@@ -1,4 +1,4 @@
-_id: vi-VN
+_id: vi
 _name: Vietnamese
 
 # This file contains localized strings (a.k.a. messages) for the language indicated above:
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 8836f0976..7a10dbd77 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -1,4 +1,4 @@
-_id: zh-CN
+_id: zh
 _name: Chinese
 
 # This file contains localized strings (a.k.a. messages) for the language indicated above:
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index 1b64b853c..db9b9ab4b 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -15,9 +15,9 @@ const FlagContainer = styled.span`
     margin: 0 0.125em;
   }
 
+  align-items: center;
   display: inline-flex;
   justify-content: center;
-  align-items: center;
   width: 15px;
 `
 
diff --git a/lib/util/i18n.js b/lib/util/i18n.js
index 114048971..9522409d9 100644
--- a/lib/util/i18n.js
+++ b/lib/util/i18n.js
@@ -61,8 +61,8 @@ export async function loadLocaleData(locale, customMessages) {
     case 'es': // Spanish translation is not specific to a region
       messages = await import('../../i18n/es.yml')
       break
-    case 'fr-FR':
-      messages = await import('../../i18n/fr-FR.yml')
+    case 'fr':
+      messages = await import('../../i18n/fr.yml')
       break
     case 'ko': // Korean translation is not specific to a region
       messages = await import('../../i18n/ko.yml')

From e2e718ed16a873c8552bf78e40f9509e017332dc Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 24 Feb 2022 08:47:03 -0800
Subject: [PATCH 209/270] refactor: more resilient payload checking

---
 lib/reducers/create-otp-reducer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index ec5fc60fd..3794c5058 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -731,8 +731,8 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOP_TIMES_FOR_TRIP_RESPONSE':
-        if (!action.payload.tripId) return state
-        if (!action.payload.stopTimes) return state
+        if (!action.payload?.tripId) return state
+        if (!action.payload?.stopTimes) return state
 
         return update(state, {
           transitIndex: {

From df135f9c0b78a8e5e2e3e361954f5351ee9b205c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 25 Feb 2022 12:03:42 -0500
Subject: [PATCH 210/270] fix(StopViewer): Fetch all day departures when
 switching to schedule view.

---
 .../viewers/__snapshots__/stop-viewer.js.snap | 10 +++---
 .../viewers/stop-schedule-table.tsx           |  5 ---
 lib/components/viewers/stop-viewer.js         | 35 ++++++++++++-------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
index dd3959953..770d46901 100644
--- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
@@ -581,7 +581,7 @@ exports[`components > viewers > stop viewer should render countdown times after
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "scheduleView": false,
+                          "isShowingSchedule": false,
                         }
                       }
                     >
@@ -2752,7 +2752,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "scheduleView": false,
+                          "isShowingSchedule": false,
                         }
                       }
                     >
@@ -4446,7 +4446,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "scheduleView": false,
+                          "isShowingSchedule": false,
                         }
                       }
                     >
@@ -7342,7 +7342,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "scheduleView": false,
+                          "isShowingSchedule": false,
                         }
                       }
                     >
@@ -12810,7 +12810,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "scheduleView": false,
+                          "isShowingSchedule": false,
                         }
                       }
                     >
diff --git a/lib/components/viewers/stop-schedule-table.tsx b/lib/components/viewers/stop-schedule-table.tsx
index 077bea2bb..90035f8bd 100644
--- a/lib/components/viewers/stop-schedule-table.tsx
+++ b/lib/components/viewers/stop-schedule-table.tsx
@@ -56,8 +56,6 @@ const TimeCell = styled.td`
  */
 class StopScheduleTable extends Component<{
   date: any
-  // TODO TYPESCRIPT shared types
-  findStopTimesForStop: (options: any) => void
   showBlockIds: boolean
   // TODO TYPESCRIPT shared types
   stopData: any
@@ -81,9 +79,6 @@ class StopScheduleTable extends Component<{
 
   componentDidMount(): void {
     this._scrollToFirstDeparture()
-
-    const { findStopTimesForStop, stopData } = this.props
-    findStopTimesForStop({ numberOfDepartures: 50, stopId: stopData.id })
   }
 
   componentDidUpdate(): void {
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 7cca18519..eca35c3ed 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -28,7 +28,7 @@ const { getUserTimezone, OTP_API_DATE_FORMAT } = coreUtils.time
 
 const defaultState = {
   date: moment().format(OTP_API_DATE_FORMAT),
-  scheduleView: false
+  isShowingSchedule: false
 }
 
 // A scrollable container for the contents of the stop viewer body.
@@ -89,13 +89,13 @@ class StopViewer extends Component {
   }
 
   _toggleScheduleView = () => {
-    const { date, scheduleView: isShowingScheduleView } = this.state
+    const { date, isShowingSchedule } = this.state
 
     // If not currently showing schedule view, fetch schedules for current date.
     // Otherwise fetch next arrivals.
-    if (isShowingScheduleView) this._findStopTimesForDate(date)
+    if (isShowingSchedule) this._findStopTimesForDate(date)
 
-    this.setState({ scheduleView: !isShowingScheduleView })
+    this.setState({ isShowingSchedule: !isShowingSchedule })
   }
 
   _isFavorite = () =>
@@ -104,13 +104,22 @@ class StopViewer extends Component {
       (s) => s.id === this.props.stopData.id
     ) !== -1
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     const { fetchStopInfo, viewedStop } = this.props
+    const { date, isShowingSchedule } = this.state
 
     if (prevProps.viewedStop?.stopId !== viewedStop?.stopId) {
       // Reset state to default if stop changes (i.e., show next arrivals).
       this.setState(defaultState)
       fetchStopInfo(viewedStop)
+    } else if (
+      isShowingSchedule &&
+      isShowingSchedule !== prevState.isShowingSchedule
+    ) {
+      // If the viewing mode has changed to schedule view,
+      // then fetch all departures for the current day
+      // (otherwise only a few are shown).
+      this._findStopTimesForDate(date)
     }
   }
 
@@ -174,7 +183,7 @@ class StopViewer extends Component {
    */
   _renderControls = () => {
     const { homeTimezone, intl, stopData } = this.props
-    const { scheduleView } = this.state
+    const { isShowingSchedule } = this.state
     const userTimeZone = getUserTimezone()
     const inHomeTimezone = homeTimezone && homeTimezone === userTimeZone
 
@@ -228,10 +237,13 @@ class StopViewer extends Component {
               onClick={this._toggleScheduleView}
               style={{ fontSize: 'small' }}
             >
-              <Icon type={scheduleView ? 'clock-o' : 'calendar'} withSpace />
+              <Icon
+                type={isShowingSchedule ? 'clock-o' : 'calendar'}
+                withSpace
+              />
               <FormattedMessage
                 id="components.StopViewer.viewTypeBtnText"
-                values={{ scheduleView }}
+                values={{ isShowingSchedule }}
               />
             </button>
           )}
@@ -243,7 +255,7 @@ class StopViewer extends Component {
           onFromClick={this._onClickPlanFrom}
           onToClick={this._onClickPlanTo}
         />
-        {scheduleView && (
+        {isShowingSchedule && (
           <input
             className="pull-right"
             onChange={this.handleDateChange}
@@ -279,7 +291,7 @@ class StopViewer extends Component {
       transitOperators,
       viewedStop
     } = this.props
-    const { date, scheduleView } = this.state
+    const { date, isShowingSchedule } = this.state
     const { showBlockIds } = stopViewerConfig
     const hasStopTimesAndRoutes = !!(
       stopData &&
@@ -307,11 +319,10 @@ class StopViewer extends Component {
           </div>
         )
       }
-    } else if (scheduleView) {
+    } else if (isShowingSchedule) {
       contents = (
         <StopScheduleTable
           date={date}
-          findStopTimesForStop={findStopTimesForStop}
           homeTimezone={homeTimezone}
           showBlockIds={showBlockIds}
           stopData={stopData}

From a6e9e2b4ec09fa88f6e82a27da0e3ef0e13f8ca1 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 25 Feb 2022 12:56:37 -0500
Subject: [PATCH 211/270] fix(StopViewer): Fix some layout and messages.

---
 .../viewers/__snapshots__/stop-viewer.js.snap | 10 +++----
 i18n/fr-FR.yml                                | 18 ++++++-------
 lib/components/viewers/stop-viewer.js         | 27 ++++++++-----------
 lib/components/viewers/viewers.css            | 10 +++++++
 4 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
index 770d46901..dd3959953 100644
--- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap
@@ -581,7 +581,7 @@ exports[`components > viewers > stop viewer should render countdown times after
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "isShowingSchedule": false,
+                          "scheduleView": false,
                         }
                       }
                     >
@@ -2752,7 +2752,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "isShowingSchedule": false,
+                          "scheduleView": false,
                         }
                       }
                     >
@@ -4446,7 +4446,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "isShowingSchedule": false,
+                          "scheduleView": false,
                         }
                       }
                     >
@@ -7342,7 +7342,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "isShowingSchedule": false,
+                          "scheduleView": false,
                         }
                       }
                     >
@@ -12810,7 +12810,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                       id="components.StopViewer.viewTypeBtnText"
                       values={
                         Object {
-                          "isShowingSchedule": false,
+                          "scheduleView": false,
                         }
                       }
                     >
diff --git a/i18n/fr-FR.yml b/i18n/fr-FR.yml
index 09a51b3ea..e9fdd786a 100644
--- a/i18n/fr-FR.yml
+++ b/i18n/fr-FR.yml
@@ -274,8 +274,8 @@ components:
         other {Étendre}
       } tous les départs pour la ligne {routeName}
     departure: Départ
-    routeName: "<strong>{routeName}</strong> vers {headsign}"
-    routeShort: "Vers {headsign}"
+    routeName: "<strong>{routeName}</strong> Direction {headsign}"
+    routeShort: "Direction {headsign}"
     status: État
   PhoneNumberEditor:
     changeNumber: Changer de numéro
@@ -335,7 +335,7 @@ components:
     showExtraStops: "Afficher {count} arrêts à proximité"
   RelatedStopsPanel:
     relatedStops: Arrêts à proximité
-    viewDetails: Afficher les détails
+    viewDetails: Détails
     noArrivalFound: Aucun passage prévu
   ResultsError:
     backToSearch: Retour à la recherche
@@ -405,7 +405,7 @@ components:
   StopScheduleTable:
     block: Bloc
     departure: Départ
-    destination: Destination
+    destination: Direction
     route: Ligne
   StopTimeCell:
     imminentArrival: >
@@ -415,17 +415,17 @@ components:
       }
   # Used in both desktop and mobile
   StopViewer:
-    displayStopId: "<strong>Arrêt n°</strong>{stopId}"
+    displayStopId: "<strong>Arrêt n°</strong> {stopId}"
     flexStop: Cet arrêt fait partie d'une zone 'Flex' et est desservi à la demande. Une réservation préalable peut être exigée pour obtenir la desserte.
     header: Info arrêt
     loadingText: Chargement de l'arrêt...
-    noStopsFound: Aucun passage n'a été trouvé pour cette date.
-    planTrip: "Planifer un trajet :"
+    noStopsFound: Aucun horaire pour la date choisie.
+    planTrip: "Faire un trajet :"
     timezoneWarning: "Les horaires sont affichés dans le fuseau <strong>{timezoneCode}</strong>."
     viewTypeBtnText: >
       {scheduleView, select,
-        true {Afficher les prochains passages}
-        other {Afficher les horaires}
+        true {Prochains passages}
+        other {Horaires}
       }
     zoomToStop: Zoomer sur l'arrêt
 
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index eca35c3ed..7200f4c88 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -243,10 +243,20 @@ class StopViewer extends Component {
               />
               <FormattedMessage
                 id="components.StopViewer.viewTypeBtnText"
-                values={{ isShowingSchedule }}
+                values={{ scheduleView: isShowingSchedule }}
               />
             </button>
           )}
+          {isShowingSchedule && (
+            <input
+              className="pull-right"
+              onChange={this.handleDateChange}
+              onKeyDown={this.props.onKeyDown}
+              required
+              type="date"
+              value={this.state.date}
+            />
+          )}
         </div>
         <b>
           <FormattedMessage id="components.StopViewer.planTrip" />
@@ -255,21 +265,6 @@ class StopViewer extends Component {
           onFromClick={this._onClickPlanFrom}
           onToClick={this._onClickPlanTo}
         />
-        {isShowingSchedule && (
-          <input
-            className="pull-right"
-            onChange={this.handleDateChange}
-            onKeyDown={this.props.onKeyDown}
-            required
-            style={{
-              border: 'none',
-              outline: 'none',
-              width: '125px'
-            }}
-            type="date"
-            value={this.state.date}
-          />
-        )}
 
         {timezoneWarning}
       </div>
diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css
index ae9aed413..469f46876 100644
--- a/lib/components/viewers/viewers.css
+++ b/lib/components/viewers/viewers.css
@@ -34,10 +34,20 @@
   animation-name: yellowfade;
 }
 
+.otp .stop-viewer-body input[type="date"] {
+  border: none;
+  clear: right;
+  outline: none;
+  width: 125px;
+}
 /* Remove arrows on date input */
 .otp .stop-viewer-body input[type="date"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
+/* For Chromium browsers, remove extra space between date and the calendar icon. */
+.otp .stop-viewer-body input[type="date"]::-webkit-calendar-picker-indicator {
+  margin: 0;
+}
 
 .otp .route-viewer-body,
 .otp .stop-viewer-body,

From e484fb0f4de1f02d02a2c254c0e0c3a38a44a609 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 25 Feb 2022 13:34:50 -0500
Subject: [PATCH 212/270] fix(BatchPreferences): Remove unused commands for
 trip preferences.

---
 lib/components/form/batch-preferences.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/lib/components/form/batch-preferences.tsx b/lib/components/form/batch-preferences.tsx
index 1aa4697bc..90c4fe1a0 100644
--- a/lib/components/form/batch-preferences.tsx
+++ b/lib/components/form/batch-preferences.tsx
@@ -5,11 +5,9 @@ import { connect } from 'react-redux'
 import React, { Component } from 'react'
 
 import { ComponentContext } from '../../util/contexts'
-import { getShowUserSettings } from '../../util/state'
 import { setQueryParam } from '../../actions/form'
 
 import { StyledBatchPreferences } from './batch-styled'
-import UserTripSettings from './user-trip-settings'
 
 // TODO: Central type source
 export type Combination = {
@@ -31,7 +29,6 @@ class BatchPreferences extends Component<{
   config: any
   query: any
   setQueryParam: (newQueryParam: any) => void
-  showUserSettings: boolean
 }> {
   static contextType = ComponentContext
 
@@ -55,14 +52,12 @@ class BatchPreferences extends Component<{
   }
 
   render() {
-    const { config, query, showUserSettings } = this.props
+    const { config, query } = this.props
     const { ModeIcon } = this.context
 
     return (
       <div className="settings-selector-panel">
         <div className="modes-panel">
-          {showUserSettings && <UserTripSettings />}
-
           <StyledBatchPreferences
             ModeIcon={ModeIcon}
             onQueryParamChange={this.onQueryParamChange}
@@ -138,8 +133,7 @@ const mapStateToProps = (state: {
   const { config, currentQuery } = state.otp
   return {
     config,
-    query: currentQuery,
-    showUserSettings: getShowUserSettings(state)
+    query: currentQuery
   }
 }
 

From e095bcefa7968c538d4cf274cb513060f2661e01 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Fri, 25 Feb 2022 15:36:19 -0500
Subject: [PATCH 213/270] refactor(locale-selector, snapshots): provide
 fallback if currentLocale is not defined, update css t

---
 __tests__/actions/__snapshots__/api.js.snap | 4 ++--
 lib/components/app/locale-selector.tsx      | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/__tests__/actions/__snapshots__/api.js.snap b/__tests__/actions/__snapshots__/api.js.snap
index 226cc8217..b3280c7a3 100644
--- a/__tests__/actions/__snapshots__/api.js.snap
+++ b/__tests__/actions/__snapshots__/api.js.snap
@@ -35,7 +35,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read properties of undefined (reading 'trackRecent')],
+        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
         "requestId": "abcd1239",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234",
@@ -110,7 +110,7 @@ Array [
   Array [
     Object {
       "payload": Object {
-        "error": [TypeError: Cannot read properties of undefined (reading 'trackRecent')],
+        "error": [TypeError: Cannot read property 'trackRecent' of undefined],
         "requestId": "abcd1236",
         "searchId": "abcd1234",
         "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234",
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index db9b9ab4b..4de2013c3 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -38,7 +38,10 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     setLocale
   } = props
 
-  const CurrentLocaleFlag = flags[configLanguages[currentLocale].flag]
+  // If the currentLocale does not exist, avoid error by rendering US flag
+  const CurrentLocaleFlag = configLanguages[currentLocale]
+    ? flags[configLanguages[currentLocale].flag]
+    : flags[configLanguages['en-US'].flag]
   const intl = useIntl()
 
   const handleLocaleSelection = (e: MouseEvent<Element>, locale: string) => {
@@ -73,7 +76,7 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
             >
               <FlagContainer>
                 {locale === currentLocale && <Icon type="check-square" />}
-                {locale !== currentLocale && <Flag />}
+                {locale !== currentLocale && <Flag style={{ width: 15 }} />}
               </FlagContainer>
               {configLanguages[locale].name}
             </MenuItem>

From 430102ed73db853efdfde3606436dcb56b9c122d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 28 Feb 2022 07:46:55 -0800
Subject: [PATCH 214/270] refactor(components/stop-viewer): add slight
 indication that date selector can be clicked

---
 lib/components/viewers/viewers.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css
index 469f46876..397cf7a67 100644
--- a/lib/components/viewers/viewers.css
+++ b/lib/components/viewers/viewers.css
@@ -37,6 +37,7 @@
 .otp .stop-viewer-body input[type="date"] {
   border: none;
   clear: right;
+  cursor: pointer;
   outline: none;
   width: 125px;
 }

From 1da36d19fbd6109249facc2d9a6c42fb3b4dc9e6 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 28 Feb 2022 07:57:21 -0800
Subject: [PATCH 215/270] refactor: add rudimentary StopData type

---
 lib/components/util/types.ts                  | 71 +++++++++++++++++++
 .../viewers/stop-schedule-table.tsx           |  7 +-
 2 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 lib/components/util/types.ts

diff --git a/lib/components/util/types.ts b/lib/components/util/types.ts
new file mode 100644
index 000000000..7dc74f0d9
--- /dev/null
+++ b/lib/components/util/types.ts
@@ -0,0 +1,71 @@
+// TYPESCRIPT TODO: move this to a larger shared types file, preferably within otp-ui
+export interface StopData {
+  bikeRental: BikeRental
+  fetchStatus: number
+  id: string
+  lat: number
+  locationType: number
+  lon: number
+  name: string
+  nearbyStops: string[]
+  parkAndRideLocations: any[]
+  routes: Route[]
+  stopTimes: StopTime[]
+  stopTimesLastUpdated: number
+  vehicleRental: VehicleRental
+  vehicleType: number
+  vehicleTypeSet: boolean
+  wheelchairBoarding: number
+}
+
+export interface BikeRental {
+  stations: any[]
+}
+
+export interface Route {
+  agencyId: string
+  agencyName: string
+  id: string
+  longName: string
+  mode: string
+  sortOrder: number
+}
+
+export interface StopTime {
+  pattern: Pattern
+  times: Time[]
+}
+
+export interface Pattern {
+  desc: string
+  headsign: string
+  id: string
+}
+
+export interface Time {
+  arrivalDelay: number
+  continuousDropOff: number
+  continuousPickup: number
+  departureDelay: number
+  headsign: string
+  realtime: boolean
+  realtimeArrival: number
+  realtimeDeparture: number
+  realtimeState: string
+  scheduledArrival: number
+  scheduledDeparture: number
+  serviceAreaRadius: number
+  serviceDay: number
+  stopCount: number
+  stopId: string
+  stopIndex: number
+  timepoint: boolean
+  tripId: string
+}
+
+export interface VehicleRental {
+  errorsByNetwork: { [key: string]: { message?: string; severity?: string } }
+  systemInformationDataByNetwork: {
+    [key: string]: { message?: string; severity?: string }
+  }
+}
diff --git a/lib/components/viewers/stop-schedule-table.tsx b/lib/components/viewers/stop-schedule-table.tsx
index 90035f8bd..09a78c06c 100644
--- a/lib/components/viewers/stop-schedule-table.tsx
+++ b/lib/components/viewers/stop-schedule-table.tsx
@@ -9,6 +9,7 @@ import {
   mergeAndSortStopTimes
 } from '../../util/viewer'
 import Loading from '../narrative/loading'
+import type { StopData } from '../util/types'
 
 // Styles for the schedule table and its contents.
 const StyledTable = styled.table`
@@ -55,10 +56,10 @@ const TimeCell = styled.td`
  * chronologically.
  */
 class StopScheduleTable extends Component<{
-  date: any
+  date: string
   showBlockIds: boolean
-  // TODO TYPESCRIPT shared types
-  stopData: any
+  // TODO TYPESCRIPT: move this type to a shared type
+  stopData: StopData
 }> {
   /**
    * Link to the DOM for the next departure row, so we can scroll to it if needed.

From b369a4e8ee5ff73a1dbc87df4a757b2d975548bd Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 28 Feb 2022 07:58:10 -0800
Subject: [PATCH 216/270] refactor(stop-schedule-table): correct ref type

---
 lib/components/viewers/stop-schedule-table.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/components/viewers/stop-schedule-table.tsx b/lib/components/viewers/stop-schedule-table.tsx
index 09a78c06c..ef112d9b5 100644
--- a/lib/components/viewers/stop-schedule-table.tsx
+++ b/lib/components/viewers/stop-schedule-table.tsx
@@ -64,7 +64,7 @@ class StopScheduleTable extends Component<{
   /**
    * Link to the DOM for the next departure row, so we can scroll to it if needed.
    */
-  targetDepartureRef = createRef()
+  targetDepartureRef = createRef<HTMLElement>()
 
   /**
    * Scroll to the first stop time that is departing from now.
@@ -72,8 +72,6 @@ class StopScheduleTable extends Component<{
   _scrollToFirstDeparture = (): void => {
     const { current } = this.targetDepartureRef
     if (current) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore TYPESCRIPT TODO: what is this type supposed to be?
       current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
   }

From 3ec8f1a4cd86cbbe18503b4afe79666d8955be50 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 28 Feb 2022 08:26:22 -0800
Subject: [PATCH 217/270] refactor(flex-indicator): move one step closer to
 full typescript

---
 lib/components/narrative/default/flex-indicator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/narrative/default/flex-indicator.tsx b/lib/components/narrative/default/flex-indicator.tsx
index 93a015e9e..ba8372d95 100644
--- a/lib/components/narrative/default/flex-indicator.tsx
+++ b/lib/components/narrative/default/flex-indicator.tsx
@@ -1,5 +1,5 @@
-// Craco will require this. FIXME: remove line once migrated to craco
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore TODO: migrate to typescript
 import { barberPole } from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
 import { FormattedMessage } from 'react-intl'
 import React from 'react'

From 884f8f31636d7a2a2b1f4525cfcfb9e51c24082b Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 28 Feb 2022 12:05:42 -0500
Subject: [PATCH 218/270] style(flex-indicator): Sort CSS attributes

---
 lib/components/narrative/default/flex-indicator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/narrative/default/flex-indicator.tsx b/lib/components/narrative/default/flex-indicator.tsx
index e98a2df47..0b29a922f 100644
--- a/lib/components/narrative/default/flex-indicator.tsx
+++ b/lib/components/narrative/default/flex-indicator.tsx
@@ -29,6 +29,7 @@ const FlexNotice = ({
 )
 
 const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
+  align-items: center;
   background: ${FLEX_COLOR_LIGHT};
   border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;
@@ -38,7 +39,6 @@ const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
   grid-template-rows: 1fr 2fr;
   grid-column-gap: ${(props) => (props.shrink ? '8px' : 'inherit')};
   height: ${(props) => (props.shrink ? '40px' : '70px')};
-  align-items: center;
   margin-right: 1em;
   max-width: ${(props) => (props.shrink ? '60px' : '180px')};
   padding-right: 0.25em;

From f43e11a66b8654b1bb26b944d8634534a327749c Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 28 Feb 2022 12:35:46 -0500
Subject: [PATCH 219/270] style(nav-login-button): Remove empty CSS rule

---
 lib/components/user/nav-login-button.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index 3c1cda2d8..48b649dee 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -8,10 +8,6 @@
   * In desktop and mobile modes, we change the link color to white for consistency with the AppMenu component.
   */
 
-.otp.mobile .navbar .mobile-navbar-container { 
-  
-}
-
 .otp.mobile .navbar .container-fluid .locale-selector-and-login {
   position: fixed;
   right: 0;

From cc37c63c9f983ff42c12279f68a290be3fb39e63 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 28 Feb 2022 15:06:11 -0800
Subject: [PATCH 220/270] fix: support otp1 server without crash

---
 lib/actions/api.js                    | 596 +++++---------------------
 lib/components/viewers/trip-viewer.js |  10 -
 lib/reducers/create-otp-reducer.js    |   4 +-
 3 files changed, 115 insertions(+), 495 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index e7408d62d..77f47832c 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -15,9 +15,8 @@ import { convertToPlace, getPersistenceMode } from '../util/user'
 import { getSecureFetchOptions } from '../util/middleware'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
 
+import { fetchTripRequests, rememberPlace } from './user'
 import { ItineraryView, setItineraryView, setViewedStop } from './ui'
-import { rememberPlace } from './user'
-import { setMapZoom } from './config'
 import { zoomToStop } from './map'
 
 if (typeof fetch === 'undefined') require('isomorphic-fetch')
@@ -245,16 +244,13 @@ function getJsonAndCheckResponse(res) {
 function getOtpFetchOptions(state, includeToken = false) {
   let apiBaseUrl, apiKey, token
 
-  const { api: apiV1, api_v2: apiV2, persistence } = state.otp.config
+  const { api, persistence } = state.otp.config
   if (persistence && persistence.otp_middleware) {
     // Prettier does not understand the syntax on this line
     // eslint-disable-next-line prettier/prettier
     ({ apiBaseUrl, apiKey } = persistence.otp_middleware)
   }
 
-  // Use only the v2 api if only a v2 api is presented
-  const api = apiV1 || apiV2
-
   const isOtpServerSameAsMiddleware = apiBaseUrl === api.host
   if (isOtpServerSameAsMiddleware) {
     if (includeToken && state.user) {
@@ -277,18 +273,11 @@ function constructRoutingQuery(
 ) {
   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)
-
-  // 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')) || !config.api
-
-  const api = (rt && rt.api) || (useOtp2 && config.api_v2) || config.api
+  const api = (rt && rt.api) || config.api
   const planEndpoint = `${api.host}${api.port ? ':' + api.port : ''}${
     api.path
   }/plan`
@@ -366,17 +355,11 @@ export function vehicleRentalQuery(
 const findStopResponse = createAction('FIND_STOP_RESPONSE')
 const findStopError = createAction('FIND_STOP_ERROR')
 
-// Finds a stop using the v1 endpoint, and retries using the v2 endpoint if that fails.
-// We can't check for the v2 flag on a stop because we don't have the entire stop object
 export function findStop(params) {
   return createQueryAction(
     `index/stops/${params.stopId}`,
     findStopResponse,
-    () => {
-      // The error doesn't have to be fired since the graphql fetch
-      // also returns an error
-      return fetchGraphQLOnlyStopInfo(params.stopId)
-    },
+    findStopError,
     {
       noThrottle: true,
       postprocess: (payload, dispatch) => {
@@ -389,18 +372,11 @@ export function findStop(params) {
 }
 
 export function fetchStopInfo(stop) {
-  if (stop.v2) {
-    return fetchGraphQLOnlyStopInfo(stop)
-  }
   return async function (dispatch, getState) {
     await dispatch(findStop({ stopId: stop.stopId }))
     const state = getState()
     const { nearbyRadius: radius } = state.otp.config.stopViewer
-    const fetchedStop = state.otp.transitIndex.stops[stop.stopId]
-    if (!fetchedStop) {
-      return
-    }
-
+    const fetchedStop = state.otp.transitIndex.stops?.[stop?.stopId]
     const { lat, lon } = fetchedStop
     if (radius > 0) {
       dispatch(
@@ -420,48 +396,6 @@ export function fetchStopInfo(stop) {
     }
   }
 }
-export function fetchGraphQLOnlyStopInfo(stopId) {
-  if (!stopId) return
-  return createGraphQLQueryAction(
-    `{
-      stop(id: "${stopId}") {
-        id: gtfsId
-        lat
-        lon
-        locationType
-        name
-        wheelchairBoarding
-        zoneId
-        geometries {
-          geoJson
-        }
-        routes {
-          color
-        }
-      }
-    }
-  `,
-    {},
-    findStopResponse,
-    findStopError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        if (payload?.data?.stop?.geometries) {
-          dispatch(setMapZoom(10))
-        }
-      },
-      rewritePayload: (payload) => {
-        if (payload.errors) {
-          return findRouteError(payload.errors)
-        }
-        const { stop } = payload.data
-        const color = stop.routes?.length > 0 && `#${stop.routes[0].color}`
-        return { ...stop, color, v2: true }
-      }
-    }
-  )
-}
 
 export const findNearbyAmenitiesResponse = createAction(
   'FIND_NEARBY_AMENITIES_RESPONSE'
@@ -546,59 +480,6 @@ export function findTrip(params) {
   )
 }
 
-/**
- * Attempt an OTP-2 GraphQL request for the same trip before failing, since
- * the OTP-2 rest api doesn't return the needed fields.
- *
- * TODO: for now, this matches the OTP-1 output. In the future this should be
- * reduced to only include what is needed, and fields not renamed.
- */
-export function findGraphQLTrip(params) {
-  return createGraphQLQueryAction(
-    `{
-        trip(id: "${params.tripId}") {
-          id: gtfsId
-          route {
-            id: gtfsId
-            agency {
-              id: gtfsId
-              name
-              url
-              timezone
-              lang
-              phone
-              fareUrl
-            }
-            shortName
-            longName
-            type
-            url
-            color
-            textColor
-            routeBikesAllowed: bikesAllowed
-            bikesAllowed
-          }
-          serviceId
-          tripHeadsign
-          directionId
-          blockId
-          shapeId
-          wheelchairAccessible
-          bikesAllowed
-          tripBikesAllowed: bikesAllowed
-        }
-      }`,
-    {},
-    findTripResponse,
-    findTripError,
-    {
-      rewritePayload: (payload) => {
-        return payload.data.trip
-      }
-    }
-  )
-}
-
 // Stops for trip query
 
 export const findStopsForTripResponse = createAction(
@@ -716,13 +597,6 @@ export function findStopTimesForStop(params) {
         findStopTimesForStopError,
         {
           noThrottle: true,
-          postprocess: (payload, dispatch) => {
-            // if the payload doesn't contain any stoptimes but does contain routes,
-            // try grabbing stop data from graphql
-            if (payload.length === 0) {
-              dispatch(fetchGraphQLOnlyStopInfo(stopId))
-            }
-          },
           rewritePayload: (stopTimes) => {
             return {
               stopId,
@@ -748,18 +622,10 @@ export function findRoutes(params) {
     {
       postprocess: (payload, dispatch) => {
         dispatch(setViewedStop(null))
-        return dispatch(findRoutesV2())
       },
-      rewritePayload: (payload, dispatch, getState) => {
-        const { otp } = getState()
-        const { api: apiV1, api_v2: apiV2 } = otp.config
-        const usingV2Only = !apiV1 && !!apiV2
+      rewritePayload: (payload) => {
         const routes = {}
         payload.forEach((rte) => {
-          // If coming from a v2 server,
-          // force V2 flag to ensure follow-up requests are graphQL
-          rte.v2 = usingV2Only
-
           routes[rte.id] = rte
         })
         return routes
@@ -769,65 +635,6 @@ export function findRoutes(params) {
   )
 }
 
-export function findRoutesV2() {
-  return createGraphQLQueryAction(
-    `{ 
-      routes {
-        id: gtfsId
-        shortName
-        longName
-        mode
-        color
-        agency {
-          name
-          gtfsId
-        }
-      } 
-    }`,
-    {},
-    findRoutesResponse,
-    findRoutesError,
-    {
-      noThrottle: true,
-      // Rewrite to match OTP-1 response object
-      // If OTP-1 is removed, this can probably be removed as well
-      rewritePayload: (payload, dispatch, getState) => {
-        const existingRouteIds = new Map()
-        const state = getState()
-        Object.keys(state?.otp?.transitIndex?.routes).forEach((routeId) => {
-          // Strip out the agency part of the route ID which can sometimes differ
-          let strippedRouteId = routeId.split(':')
-          strippedRouteId = strippedRouteId[strippedRouteId.length - 1]
-
-          existingRouteIds.set(strippedRouteId, true)
-        })
-
-        const routes = {}
-        payload?.data?.routes?.forEach((rte) => {
-          // Strip out the agency part of the route ID which can sometimes differ
-          let strippedRouteId = rte.id.split(':')
-          strippedRouteId = strippedRouteId[strippedRouteId.length - 1]
-          if (existingRouteIds.get(strippedRouteId)) {
-            return
-          }
-
-          rte.agencyName = rte.agency.name
-          // OTP-2 includes the feed ID in the agency ID. Stripping it
-          // matches OTP-1 behavior
-          rte.agencyId = rte.agency.gtfsId.split(':')[0]
-
-          // Mark this route as a v2 route so that future requests relating to it
-          // will be made to the v2 endpoint
-          rte.v2 = true
-
-          routes[rte.id] = rte
-        })
-        return routes
-      },
-      serviceId: 'routes'
-    }
-  )
-}
 // Patterns for Route lookup query
 // TODO: replace with GraphQL query for route => patterns => geometry
 const findPatternsForRouteResponse = createAction(
@@ -841,171 +648,58 @@ export const findRouteResponse = createAction('FIND_ROUTE_RESPONSE')
 export const findRouteError = createAction('FIND_ROUTE_ERROR')
 
 export function findRoute(params) {
-  return async function (dispatch, getState) {
-    dispatch(setViewedStop(null))
-
-    const state = getState()
-    const { routeId } = params
-    const route = state?.otp?.transitIndex?.routes?.[routeId]
-    // This can sometimes result in extra requests, but given that requests are
-    // already being sprayed, this is a safe and clean solution for now
-    if (!route) {
-      await dispatch(findRoutes())
+  return createQueryAction(
+    `index/routes/${params.routeId}`,
+    findRouteResponse,
+    findRouteError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        // load patterns
+        dispatch(findPatternsForRoute({ routeId: params.routeId }))
+        dispatch(setViewedStop(null))
+      }
     }
+  )
+}
 
-    if (route?.v2) {
-      return dispatch(
-        createGraphQLQueryAction(
-          `{
-            route(id: "${route.id}") {
-              id: gtfsId
-              desc
-              agency {
-                id: gtfsId
-                name
-                url
-                timezone
-                lang
-                phone
-              }
-              longName
-              type
-              color
-              textColor
-              bikesAllowed
-              routeBikesAllowed: bikesAllowed
-          
-              patterns {
-                id
-                name
-                patternGeometry {
-                  points
-                  length
-                }
-
-                stops {
-                  code
-                  id: gtfsId
-                  lat
-                  lon
-                  name
-                  locationType
-                  geometries {
-                    geoJson
-                  }
-                  routes {
-                    color
-                  }
-                }
-              }
-            }
-          }
-          `,
-          {},
-          findRouteResponse,
-          findRouteError,
-          {
-            noThrottle: true,
-            rewritePayload: (payload) => {
-              if (payload.errors) {
-                return dispatch(findRouteError(payload.errors))
-              }
-              const { route } = payload.data
-              // Ensure this isn't overwritten
-              route.v2 = true
-
-              const routePatterns = {}
-              route.patterns.forEach((pattern) => {
-                pattern.stops = pattern.stops.map((stop) => {
-                  const color =
-                    stop.routes?.length > 0 && `#${stop.routes[0].color}`
-                  if (stop.routes) delete stop.routes
-                  return { ...stop, color, v2: true }
-                })
-                routePatterns[pattern.id] = {
-                  ...pattern,
-                  desc: pattern.name,
-                  geometry: pattern.patternGeometry
-                }
+export function findPatternsForRoute(params) {
+  return createQueryAction(
+    `index/routes/${params.routeId}/patterns?includeGeometry=true`,
+    findPatternsForRouteResponse,
+    findPatternsForRouteError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        // load geometry for each pattern
+        payload.forEach((ptn) => {
+          // Some OTP instances don't support includeGeometry.
+          // We need to manually fetch geometry in these cases.
+          if (!ptn.geometry) {
+            dispatch(
+              findGeometryForPattern({
+                patternId: ptn.id,
+                routeId: params.routeId
               })
-              route.patterns = routePatterns
-
-              return route
-            }
+            )
           }
-        )
-      )
-    }
+        })
+      },
 
-    return dispatch(
-      createQueryAction(
-        `index/routes/${routeId}`,
-        findRouteResponse,
-        findRouteError,
-        {
-          noThrottle: true,
-          postprocess: (payload, dispatch) => {
-            // load patterns
-            dispatch(findPatternsForRoute({ routeId }))
-          }
-        }
-      )
-    )
-  }
-}
+      rewritePayload: (payload) => {
+        // convert pattern array to ID-mapped object
+        const patterns = {}
+        payload.forEach((ptn) => {
+          patterns[ptn.id] = ptn
+        })
 
-export function findPatternsForRoute(params) {
-  return function (dispatch, getState) {
-    const state = getState()
-    const { routeId } = params
-    const route = state?.otp?.transitIndex?.routes?.[routeId]
-    // If a route was fetched from GraphQL, it already has patterns
-    if (route && route.v2) {
-      if (!route.patterns) {
-        return dispatch(findRoute(params))
+        return {
+          patterns,
+          routeId: params.routeId
+        }
       }
-      return
     }
-
-    return dispatch(
-      createQueryAction(
-        `index/routes/${routeId}/patterns?includeGeometry=true`,
-        findPatternsForRouteResponse,
-        findPatternsForRouteError,
-        {
-          noThrottle: true,
-          postprocess: (payload, dispatch) => {
-            // load geometry for each pattern
-            payload.forEach((ptn) => {
-              // Some OTP instances don't support includeGeometry.
-              // We need to manually fetch geometry in these cases.
-              if (!ptn.geometry) {
-                dispatch(
-                  findGeometryForPattern({
-                    patternId: ptn.id,
-                    routeId
-                  })
-                )
-              }
-            })
-          },
-
-          rewritePayload: (payload) => {
-            // convert pattern array to ID-mapped object
-            const patterns = {}
-            payload.forEach((ptn) => {
-              patterns[ptn.id] = ptn
-            })
-
-            return {
-              patterns,
-              routeId
-            }
-          }
-        }
-      )
-    )
-  }
+  )
 }
 
 // Geometry for Pattern lookup query
@@ -1018,31 +712,21 @@ const findGeometryForPatternError = createAction(
 )
 
 export function findGeometryForPattern(params) {
-  return function (dispatch, getState) {
-    const state = getState()
-    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
-    // If a route was fetched from GraphQL, it already has geometry
-    if (route && route.v2) {
-      return
-    }
-
-    const { patternId, routeId } = params
-    return dispatch(
-      createQueryAction(
-        `index/patterns/${params.patternId}/geometry`,
-        findGeometryForPatternResponse,
-        findGeometryForPatternError,
-        {
-          noThrottle: true,
-          rewritePayload: (payload) => ({
-            geometry: payload,
-            patternId,
-            routeId
-          })
+  return createQueryAction(
+    `index/patterns/${params.patternId}/geometry`,
+    findGeometryForPatternResponse,
+    findGeometryForPatternError,
+    {
+      noThrottle: true,
+      rewritePayload: (payload) => {
+        return {
+          geometry: payload,
+          patternId: params.patternId,
+          routeId: params.routeId
         }
-      )
-    )
-  }
+      }
+    }
+  )
 }
 
 // Stops for pattern query
@@ -1055,33 +739,21 @@ export const findStopsForPatternError = createAction(
 )
 
 export function findStopsForPattern(params) {
-  return function (dispatch, getState) {
-    const state = getState()
-    const route = state?.otp?.transitIndex?.routes?.[params.routeId]
-    // If a route was fetched from GraphQL, it already has patterns
-    if (route && route?.v2) {
-      return
-    }
-
-    const { patternId, routeId } = params
-    if (!patternId || !routeId) return
-
-    return dispatch(
-      createQueryAction(
-        `index/patterns/${params.patternId}/stops`,
-        findStopsForPatternResponse,
-        findStopsForPatternError,
-        {
-          noThrottle: true,
-          rewritePayload: (payload) => ({
-            patternId,
-            routeId,
-            stops: payload
-          })
+  return createQueryAction(
+    `index/patterns/${params.patternId}/stops`,
+    findStopsForPatternResponse,
+    findStopsForPatternError,
+    {
+      noThrottle: true,
+      rewritePayload: (payload) => {
+        return {
+          patternId: params.patternId,
+          routeId: params.routeId,
+          stops: payload
         }
-      )
-    )
-  }
+      }
+    }
+  )
 }
 
 // TNC ETA estimate lookup query
@@ -1155,9 +827,8 @@ export function findNearbyStops(params, focusStopId) {
     {
       noThrottle: true,
       postprocess: (stops, dispatch, getState) => {
-        if (params.max && stops.length > params.max) {
+        if (params.max && stops.length > params.max)
           stops = stops.slice(0, params.max)
-        }
       },
       rewritePayload: (stops) => {
         if (stops) {
@@ -1171,9 +842,8 @@ export function findNearbyStops(params, focusStopId) {
           stops.sort((a, b) => {
             return a.distance - b.distance
           })
-          if (params.max && stops.length > params.max) {
+          if (params.max && stops.length > params.max)
             stops = stops.slice(0, params.max)
-          }
         }
         return { focusStopId, stops }
       },
@@ -1233,27 +903,19 @@ const receivedVehiclePositionsError = createAction(
 )
 
 export function getVehiclePositionsForRoute(routeId) {
-  return function (dispatch, getState) {
-    const state = getState()
-    const route = state?.otp?.transitIndex?.routes?.[routeId]
-    // If a route was fetched from GraphQL, it doesn't support realtime vehicle positions
-    if (route?.v2) {
-      return
-    }
-    return dispatch(
-      createQueryAction(
-        `index/routes/${routeId}/vehicles`,
-        receivedVehiclePositions,
-        receivedVehiclePositionsError,
-        {
-          rewritePayload: (payload) => ({
-            routeId,
-            vehicles: payload
-          })
+  return createQueryAction(
+    `index/routes/${routeId}/vehicles`,
+    receivedVehiclePositions,
+    receivedVehiclePositionsError,
+    {
+      rewritePayload: (payload) => {
+        return {
+          routeId: routeId,
+          vehicles: payload
         }
-      )
-    )
-  }
+      }
+    }
+  )
 }
 
 const throttledUrls = {}
@@ -1333,17 +995,7 @@ function createQueryAction(
 
     let payload
     try {
-      // Need to merge headers to support graphQL POST request with an api key
-      const mergedHeaders = {
-        ...getOtpFetchOptions(state)?.headers,
-        ...options.fetchOptions?.headers
-      }
-
-      const response = await fetch(url, {
-        ...getOtpFetchOptions(state),
-        ...options.fetchOptions,
-        headers: mergedHeaders
-      })
+      const response = await fetch(url, getOtpFetchOptions(state))
       if (response.status >= 400) {
         const error = new Error('Received error from server')
         error.response = response
@@ -1351,22 +1003,11 @@ function createQueryAction(
       }
       payload = await response.json()
     } catch (err) {
-      // 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
-          })
-        )
-      }
       return dispatch(errorAction(err))
     }
 
     if (typeof options.rewritePayload === 'function') {
-      dispatch(
-        responseAction(options.rewritePayload(payload, dispatch, getState))
-      )
+      dispatch(responseAction(options.rewritePayload(payload)))
     } else {
       dispatch(responseAction(payload))
     }
@@ -1395,41 +1036,30 @@ function makeApiUrl(config, endpoint, options) {
     console.log('Using alt service for ' + options.serviceId)
     url = config.alternateTransitIndex.apiRoot + endpoint
   } else {
-    const api =
-      // v2 is either selected or used when there is no alternative
-      (options.v2 && config.api_v2) || config.api || config.api_v2
-
-    // Don't crash if no api is defined (such as in the unit test env)
-    if (!api?.host) return null
-
+    const api = config.api
     url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
   }
   return url
 }
 
-/**
- * Generic helper for crafting GraphQL queries.
- */
-function createGraphQLQueryAction(
-  query,
-  variables,
-  responseAction,
-  errorAction,
-  options
-) {
-  const endpoint = 'index/graphql'
-  const fetchOptions = {
-    body: JSON.stringify({ query, variables }),
-    headers: { 'Content-Type': 'application/json' },
-    method: 'POST'
-  }
-  return createQueryAction(endpoint, responseAction, errorAction, {
-    ...options,
-    fetchOptions,
-    // For now, all GraphQL requests are OTP-V2
-    v2: true
-  })
-}
+// 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
+// GraphQL queries could introduce potential difficulties for maintainers.
+// function createGraphQLQueryAction (query, variables, responseAction, errorAction, options) {
+//   const endpoint = `index/graphql`
+//   const fetchOptions = {
+//     method: 'POST',
+//     body: JSON.stringify({ query, variables }),
+//     headers: { 'Content-Type': 'application/json' }
+//   }
+//   return createQueryAction(
+//     endpoint,
+//     responseAction,
+//     errorAction,
+//     { ...options, fetchOptions }
+//   )
+// }
 
 /**
  * Update the browser/URL history with new parameters
diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index 5c5ba82e9..070ce514b 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -21,7 +21,6 @@ const { getUserTimezone } = coreUtils.time
 
 class TripViewer extends Component {
   static propTypes = {
-    findGraphQLTrip: apiActions.findGraphQLTrip.type,
     findTrip: apiActions.findTrip.type,
     hideBackButton: PropTypes.bool,
     setViewedTrip: uiActions.setViewedTrip.type,
@@ -39,14 +38,6 @@ class TripViewer extends Component {
     findTrip({ tripId })
   }
 
-  componentDidUpdate() {
-    const { findGraphQLTrip, tripData, viewedTrip } = this.props
-    const { tripId } = viewedTrip
-    if (!tripData.route) {
-      findGraphQLTrip({ tripId })
-    }
-  }
-
   render() {
     const { hideBackButton, tripData, viewedTrip } = this.props
 
@@ -188,7 +179,6 @@ const mapStateToProps = (state) => {
 }
 
 const mapDispatchToProps = {
-  findGraphQLTrip: apiActions.findGraphQLTrip,
   findTrip: apiActions.findTrip,
   setLocation: mapActions.setLocation,
   setViewedTrip: uiActions.setViewedTrip
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index ec5fc60fd..3c44093bd 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -731,8 +731,8 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOP_TIMES_FOR_TRIP_RESPONSE':
-        if (!action.payload.tripId) return state
-        if (!action.payload.stopTimes) return state
+        if (!action?.payload?.tripId) return state
+        if (!action?.payload?.stopTimes) return state
 
         return update(state, {
           transitIndex: {

From 1328160bf5cd65919c63514dbdc27651e4e4684e Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 28 Feb 2022 15:15:49 -0800
Subject: [PATCH 221/270] refactor: resolve middleware related crashes

---
 example-config.yml  | 6 ------
 lib/actions/user.js | 2 +-
 package.json        | 2 +-
 yarn.lock           | 8 ++++----
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 123383bcd..0838cadff 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -3,12 +3,6 @@ api:
   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'
diff --git a/lib/actions/user.js b/lib/actions/user.js
index 5f650df4d..335cbd0f3 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -143,7 +143,7 @@ function convertRequestToSearch(config) {
     return {
       canDelete: false,
       id,
-      query: planParamsToQuery(requestParameters),
+      query: planParamsToQuery(requestParameters || {}),
       timestamp: dateCreated,
       url: `${host}${path}/plan?${qs.stringify(requestParameters)}`
     }
diff --git a/package.json b/package.json
index dd1871b1b..05f6375ae 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",
     "@opentripplanner/base-map": "^2.0.0",
-    "@opentripplanner/core-utils": "^4.7.1",
+    "@opentripplanner/core-utils": "^4.8.0",
     "@opentripplanner/endpoints-overlay": "^1.3.0",
     "@opentripplanner/from-to-location-picker": "^1.3.0",
     "@opentripplanner/geocoder": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 3383a1774..bfa848c5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2464,10 +2464,10 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/core-utils@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.7.1.tgz#72e708d3818f6764726b489192d7501e86d012d3"
-  integrity sha512-AGtNEqqNLYMp+elLiQKVf6QcP4KIoMugN7oZ4+G1p5a1eMMtP5wrxk/2IidCkkz2c+wacljoPZ2pWF630gvj7w==
+"@opentripplanner/core-utils@^4.8.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-4.8.0.tgz#54f42fe038c0a9e011f0e126c42fe2f31db3148a"
+  integrity sha512-vv1vDd5xTBpLoViPwa0fjYBS+u0OD/Sgp+97Q83HmRr4V8Lj/LXSdjtQWIWZHuN3TUIhDGH2Cuk+f1UVhGHJDw==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/geocoder" "^1.1.2"

From 99e066e5e182442fc295d76a6c3f7137f843d335 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Mar 2022 07:16:28 -0800
Subject: [PATCH 222/270] refactor: address pr feedback

---
 lib/components/viewers/stop-viewer.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 7200f4c88..b106e8c63 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -112,10 +112,7 @@ class StopViewer extends Component {
       // Reset state to default if stop changes (i.e., show next arrivals).
       this.setState(defaultState)
       fetchStopInfo(viewedStop)
-    } else if (
-      isShowingSchedule &&
-      isShowingSchedule !== prevState.isShowingSchedule
-    ) {
+    } else if (!!isShowingSchedule && !prevState.isShowingSchedule) {
       // If the viewing mode has changed to schedule view,
       // then fetch all departures for the current day
       // (otherwise only a few are shown).

From 4efc5cad5d1ee7e1a4c7f181804bc1f1c1a07d93 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Mar 2022 10:32:27 -0800
Subject: [PATCH 223/270] refactor: increased pattern viewer stability

---
 lib/actions/api.js                 |  2 ++
 lib/reducers/create-otp-reducer.js | 12 +++++++++---
 package.json                       |  2 +-
 yarn.lock                          | 10 +++++-----
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 77f47832c..b96e4455e 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -377,6 +377,8 @@ export function fetchStopInfo(stop) {
     const state = getState()
     const { nearbyRadius: radius } = state.otp.config.stopViewer
     const fetchedStop = state.otp.transitIndex.stops?.[stop?.stopId]
+    // TODO: stop not found message
+    if (!fetchedStop) return
     const { lat, lon } = fetchedStop
     if (radius > 0) {
       dispatch(
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 3c44093bd..45bd9c72e 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -714,8 +714,14 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOPS_FOR_PATTERN_RESPONSE':
-        if (!action.payload?.stops || action.payload.stops.length === 0)
-          return state
+        let patternStops = []
+        if (
+          !!action?.payload?.stops ||
+          action?.payload.stops.length > 0 ||
+          !!action?.payload?.routeId ||
+          !!action?.payload?.patternId
+        )
+          patternStops = action.payload.stops
 
         return update(state, {
           transitIndex: {
@@ -723,7 +729,7 @@ function createOtpReducer(config) {
               [action.payload.routeId]: {
                 patterns: {
                   [action.payload.patternId]: {
-                    stops: { $set: action.payload.stops }
+                    stops: { $set: patternStops }
                   }
                 }
               }
diff --git a/package.json b/package.json
index 05f6375ae..251361e7f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
-    "@opentripplanner/transitive-overlay": "^1.1.2",
+    "@opentripplanner/transitive-overlay": "^1.1.3",
     "@opentripplanner/trip-details": "^2.0.0",
     "@opentripplanner/trip-form": "^1.10.0",
     "@opentripplanner/trip-viewer-overlay": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index bfa848c5e..170074be5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2630,12 +2630,12 @@
     lodash.clonedeep "^4.5.0"
     throttle-debounce "^2.1.0"
 
-"@opentripplanner/transitive-overlay@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-1.1.2.tgz#a83ababee44a15d364c2ae81005189a1d628e964"
-  integrity sha512-svNoXZIecCVZK8x5JOy3jiZTCHjs8YSFHLmBBYBzd4uvZdYJkCbeRwiWEtFOOSauEbE+dpMZwLOROG0EwVLq6g==
+"@opentripplanner/transitive-overlay@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-1.1.3.tgz#be6e1e7eab52d7beb58e5de945c453ec976683e1"
+  integrity sha512-zgZ3N3AC8G5JoCZmcO6c2Teim4KEUWA3pGhpKcsNfkMciIotuJLxL6AWcrVu767sohS6ny0fFJENT7jo5TPFqQ==
   dependencies:
-    "@opentripplanner/core-utils" "^4.1.0"
+    "@opentripplanner/core-utils" "^4.5.0"
     lodash.isequal "^4.5.0"
     transitive-js "^0.13.7"
 

From 1cf82b895265963c0059384fb0d54f7af9702eb0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Mar 2022 10:55:21 -0800
Subject: [PATCH 224/270] refactor: push invalid data to store instead of
 crashing

---
 lib/reducers/create-otp-reducer.js | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 45bd9c72e..b5a5b02cb 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -714,19 +714,12 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOPS_FOR_PATTERN_RESPONSE':
-        let patternStops = []
-        if (
-          !!action?.payload?.stops ||
-          action?.payload.stops.length > 0 ||
-          !!action?.payload?.routeId ||
-          !!action?.payload?.patternId
-        )
-          patternStops = action.payload.stops
+        const patternStops = action?.payload?.stops || []
 
         return update(state, {
           transitIndex: {
             routes: {
-              [action.payload.routeId]: {
+              [action.payload.routeId || 'null']: {
                 patterns: {
                   [action.payload.patternId]: {
                     stops: { $set: patternStops }
@@ -737,9 +730,6 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOP_TIMES_FOR_TRIP_RESPONSE':
-        if (!action?.payload?.tripId) return state
-        if (!action?.payload?.stopTimes) return state
-
         return update(state, {
           transitIndex: {
             trips: {

From f2060f9921d9c796a89b1a32ce38e94b91455b56 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 1 Mar 2022 14:26:13 -0800
Subject: [PATCH 225/270] refactor: prepare for otp1/otp2 split

---
 lib/actions/api.js   | 8 +++++++-
 lib/actions/apiV1.js | 0
 lib/actions/apiV2.js | 0
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 lib/actions/apiV1.js
 create mode 100644 lib/actions/apiV2.js

diff --git a/lib/actions/api.js b/lib/actions/api.js
index b96e4455e..34ef19dfb 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -15,9 +15,11 @@ import { convertToPlace, getPersistenceMode } from '../util/user'
 import { getSecureFetchOptions } from '../util/middleware'
 import { getStopViewerConfig, queryIsValid } from '../util/state'
 
-import { fetchTripRequests, rememberPlace } from './user'
 import { ItineraryView, setItineraryView, setViewedStop } from './ui'
+import { rememberPlace } from './user'
 import { zoomToStop } from './map'
+import v1Actions from './apiV1'
+import v2Actions from './apiV2'
 
 if (typeof fetch === 'undefined') require('isomorphic-fetch')
 
@@ -25,6 +27,9 @@ const { getRoutingParams, getTripOptionsFromQuery, getUrlParams } =
   coreUtils.query
 const { randId } = coreUtils.storage
 
+// set actions variable that can be set to v2Actions if v2 server is set
+let actions = v1Actions
+
 // Generic API actions
 
 /*
@@ -245,6 +250,7 @@ function getOtpFetchOptions(state, includeToken = false) {
   let apiBaseUrl, apiKey, token
 
   const { api, persistence } = state.otp.config
+  if (api.v2) actions = v2Actions
   if (persistence && persistence.otp_middleware) {
     // Prettier does not understand the syntax on this line
     // eslint-disable-next-line prettier/prettier
diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
new file mode 100644
index 000000000..e69de29bb

From 30f62518e2c6664d08f64fe680168eb6adb2d219 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 2 Mar 2022 07:11:05 -0800
Subject: [PATCH 226/270] refactor(actions/api): simplify route.v2 checks

---
 lib/actions/api.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index e7408d62d..e39118e8c 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -960,7 +960,7 @@ export function findPatternsForRoute(params) {
     const { routeId } = params
     const route = state?.otp?.transitIndex?.routes?.[routeId]
     // If a route was fetched from GraphQL, it already has patterns
-    if (route && route.v2) {
+    if (route?.v2) {
       if (!route.patterns) {
         return dispatch(findRoute(params))
       }
@@ -1022,7 +1022,7 @@ export function findGeometryForPattern(params) {
     const state = getState()
     const route = state?.otp?.transitIndex?.routes?.[params.routeId]
     // If a route was fetched from GraphQL, it already has geometry
-    if (route && route.v2) {
+    if (route?.v2) {
       return
     }
 
@@ -1059,7 +1059,7 @@ export function findStopsForPattern(params) {
     const state = getState()
     const route = state?.otp?.transitIndex?.routes?.[params.routeId]
     // If a route was fetched from GraphQL, it already has patterns
-    if (route && route?.v2) {
+    if (route?.v2) {
       return
     }
 

From 576a143418167aa1d55e20d9ee009da253fd8300 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 2 Mar 2022 09:23:34 -0800
Subject: [PATCH 227/270] refactor(actions/api): stop viewer and trip viewer
 otp2 support

---
 lib/actions/api.js   | 161 ++++++-----------------------------------
 lib/actions/apiV1.js | 143 +++++++++++++++++++++++++++++++++++++
 lib/actions/apiV2.js | 165 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 328 insertions(+), 141 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 34ef19dfb..6f4f46f64 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -5,7 +5,6 @@
 import { push, replace } from 'connected-react-router'
 import hash from 'object-hash'
 import haversine from 'haversine'
-import L from 'leaflet'
 // Core-utils is preventing typescripting
 import { createAction } from 'redux-actions'
 import coreUtils from '@opentripplanner/core-utils'
@@ -358,113 +357,11 @@ export function vehicleRentalQuery(
 }
 
 // Single stop lookup query
-const findStopResponse = createAction('FIND_STOP_RESPONSE')
-const findStopError = createAction('FIND_STOP_ERROR')
-
-export function findStop(params) {
-  return createQueryAction(
-    `index/stops/${params.stopId}`,
-    findStopResponse,
-    findStopError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        dispatch(findRoutesAtStop(params.stopId))
-        dispatch(findStopTimesForStop(params))
-      },
-      serviceId: 'stops'
-    }
-  )
-}
+export const findStopResponse = createAction('FIND_STOP_RESPONSE')
+export const findStopError = createAction('FIND_STOP_ERROR')
 
 export function fetchStopInfo(stop) {
-  return async function (dispatch, getState) {
-    await dispatch(findStop({ stopId: stop.stopId }))
-    const state = getState()
-    const { nearbyRadius: radius } = state.otp.config.stopViewer
-    const fetchedStop = state.otp.transitIndex.stops?.[stop?.stopId]
-    // TODO: stop not found message
-    if (!fetchedStop) return
-    const { lat, lon } = fetchedStop
-    if (radius > 0) {
-      dispatch(
-        findNearbyStops(
-          {
-            includeRoutes: true,
-            includeStopTimes: true,
-            lat,
-            lon,
-            radius
-          },
-          stop.stopId
-        )
-      )
-      dispatch(findNearbyAmenities({ lat, lon, radius }, stop.stopId))
-      dispatch(zoomToStop(fetchedStop))
-    }
-  }
-}
-
-export const findNearbyAmenitiesResponse = createAction(
-  'FIND_NEARBY_AMENITIES_RESPONSE'
-)
-export const findNearbyAmenitiesError = createAction(
-  'FIND_NEARBY_AMENITIES_ERROR'
-)
-
-function findNearbyAmenities(params, stopId) {
-  return function (dispatch, getState) {
-    const { lat, lon, radius } = params
-    const bounds = L.latLng(lat, lon).toBounds(radius)
-    const { lat: low, lng: left } = bounds.getSouthWest()
-    const { lat: up, lng: right } = bounds.getNorthEast()
-    dispatch(
-      parkAndRideQuery(
-        { lowerLeft: `${low},${left}`, upperRight: `${up},${right}` },
-        findNearbyAmenitiesResponse,
-        findNearbyAmenitiesError,
-        {
-          noThrottle: true,
-          rewritePayload: (payload) => {
-            return {
-              parkAndRideLocations: payload,
-              stopId
-            }
-          }
-        }
-      )
-    )
-    dispatch(
-      bikeRentalQuery(
-        { lowerLeft: `${low},${left}`, upperRight: `${up},${right}` },
-        findNearbyAmenitiesResponse,
-        findNearbyAmenitiesError,
-        {
-          rewritePayload: (payload) => {
-            return {
-              bikeRental: payload,
-              stopId
-            }
-          }
-        }
-      )
-    )
-    dispatch(
-      vehicleRentalQuery(
-        { lowerLeft: `${low},${left}`, upperRight: `${up},${right}` },
-        findNearbyAmenitiesResponse,
-        findNearbyAmenitiesError,
-        {
-          rewritePayload: (payload) => {
-            return {
-              stopId,
-              vehicleRental: payload
-            }
-          }
-        }
-      )
-    )
-  }
+  return actions.fetchStopInfo(stop)
 }
 
 // Single trip lookup query
@@ -473,19 +370,7 @@ export const findTripResponse = createAction('FIND_TRIP_RESPONSE')
 export const findTripError = createAction('FIND_TRIP_ERROR')
 
 export function findTrip(params) {
-  return createQueryAction(
-    `index/trips/${params.tripId}`,
-    findTripResponse,
-    findTripError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        dispatch(findStopsForTrip({ tripId: params.tripId }))
-        dispatch(findStopTimesForTrip({ tripId: params.tripId }))
-        dispatch(findGeometryForTrip({ tripId: params.tripId }))
-      }
-    }
-  )
+  return actions.findTrip(params)
 }
 
 // Stops for trip query
@@ -983,7 +868,7 @@ function handleThrottlingUrl(url, fetchOptions) {
  *       alternateTransitIndex configuration.
  *   - fetchOptions: fetch options (e.g., method, body, headers).
  */
-function createQueryAction(
+export function createQueryAction(
   endpoint,
   responseAction,
   errorAction,
@@ -1003,7 +888,18 @@ function createQueryAction(
 
     let payload
     try {
-      const response = await fetch(url, getOtpFetchOptions(state))
+      // Need to merge headers to support graphQL POST request with an api key
+      const mergedHeaders = {
+        ...getOtpFetchOptions(state)?.headers,
+        ...options.fetchOptions?.headers
+      }
+
+      const response = await fetch(url, {
+        ...getOtpFetchOptions(state),
+        ...options.fetchOptions,
+        headers: mergedHeaders
+      })
+
       if (response.status >= 400) {
         const error = new Error('Received error from server')
         error.response = response
@@ -1015,7 +911,9 @@ function createQueryAction(
     }
 
     if (typeof options.rewritePayload === 'function') {
-      dispatch(responseAction(options.rewritePayload(payload)))
+      dispatch(
+        responseAction(options.rewritePayload(payload, dispatch, getState))
+      )
     } else {
       dispatch(responseAction(payload))
     }
@@ -1050,25 +948,6 @@ function makeApiUrl(config, endpoint, options) {
   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
-// GraphQL queries could introduce potential difficulties for maintainers.
-// function createGraphQLQueryAction (query, variables, responseAction, errorAction, options) {
-//   const endpoint = `index/graphql`
-//   const fetchOptions = {
-//     method: 'POST',
-//     body: JSON.stringify({ query, variables }),
-//     headers: { 'Content-Type': 'application/json' }
-//   }
-//   return createQueryAction(
-//     endpoint,
-//     responseAction,
-//     errorAction,
-//     { ...options, fetchOptions }
-//   )
-// }
-
 /**
  * Update the browser/URL history with new parameters
  * NOTE: This has not been tested for profile-based journeys.
diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
index e69de29bb..dafa32475 100644
--- a/lib/actions/apiV1.js
+++ b/lib/actions/apiV1.js
@@ -0,0 +1,143 @@
+import { createAction } from 'redux-actions'
+import L from 'leaflet'
+
+import {
+  bikeRentalQuery,
+  createQueryAction,
+  findGeometryForTrip,
+  findNearbyStops,
+  findRoutesAtStop,
+  findStopError,
+  findStopResponse,
+  findStopsForTrip,
+  findStopTimesForStop,
+  findStopTimesForTrip,
+  findTripError,
+  findTripResponse,
+  parkAndRideQuery,
+  vehicleRentalQuery
+} from './api'
+import { zoomToStop } from './map'
+
+const findTrip = (params) =>
+  createQueryAction(
+    `index/trips/${params.tripId}`,
+    findTripResponse,
+    findTripError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        dispatch(findStopsForTrip({ tripId: params.tripId }))
+        dispatch(findStopTimesForTrip({ tripId: params.tripId }))
+        dispatch(findGeometryForTrip({ tripId: params.tripId }))
+      }
+    }
+  )
+
+export const findNearbyAmenitiesResponse = createAction(
+  'FIND_NEARBY_AMENITIES_RESPONSE'
+)
+export const findNearbyAmenitiesError = createAction(
+  'FIND_NEARBY_AMENITIES_ERROR'
+)
+
+function findNearbyAmenities(params, stopId) {
+  return function (dispatch, getState) {
+    const { lat, lon, radius } = params
+    const bounds = L.latLng(lat, lon).toBounds(radius)
+    const { lat: low, lng: left } = bounds.getSouthWest()
+    const { lat: up, lng: right } = bounds.getNorthEast()
+    dispatch(
+      parkAndRideQuery(
+        { lowerLeft: `${low},${left}`, upperRight: `${up},${right}` },
+        findNearbyAmenitiesResponse,
+        findNearbyAmenitiesError,
+        {
+          noThrottle: true,
+          rewritePayload: (payload) => {
+            return {
+              parkAndRideLocations: payload,
+              stopId
+            }
+          }
+        }
+      )
+    )
+    dispatch(
+      bikeRentalQuery(
+        { lowerLeft: `${low},${left}`, upperRight: `${up},${right}` },
+        findNearbyAmenitiesResponse,
+        findNearbyAmenitiesError,
+        {
+          rewritePayload: (payload) => {
+            return {
+              bikeRental: payload,
+              stopId
+            }
+          }
+        }
+      )
+    )
+    dispatch(
+      vehicleRentalQuery(
+        { lowerLeft: `${low},${left}`, upperRight: `${up},${right}` },
+        findNearbyAmenitiesResponse,
+        findNearbyAmenitiesError,
+        {
+          rewritePayload: (payload) => {
+            return {
+              stopId,
+              vehicleRental: payload
+            }
+          }
+        }
+      )
+    )
+  }
+}
+
+export function findStop(params) {
+  return createQueryAction(
+    `index/stops/${params.stopId}`,
+    findStopResponse,
+    findStopError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        dispatch(findRoutesAtStop(params.stopId))
+        dispatch(findStopTimesForStop(params))
+      },
+      serviceId: 'stops'
+    }
+  )
+}
+
+const fetchStopInfo = (stop) =>
+  async function (dispatch, getState) {
+    await dispatch(findStop({ stopId: stop.stopId }))
+    const state = getState()
+    const { nearbyRadius: radius } = state.otp.config.stopViewer
+    const fetchedStop = state.otp.transitIndex.stops?.[stop?.stopId]
+    // TODO: stop not found message
+    if (!fetchedStop) return
+
+    const { lat, lon } = fetchedStop
+    if (radius > 0) {
+      dispatch(
+        findNearbyStops(
+          {
+            includeRoutes: true,
+            includeStopTimes: true,
+            lat,
+            lon,
+            radius
+          },
+          stop.stopId
+        )
+      )
+      dispatch(findNearbyAmenities({ lat, lon, radius }, stop.stopId))
+      dispatch(zoomToStop(fetchedStop))
+    }
+  }
+
+export default { fetchStopInfo, findTrip }
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index e69de29bb..4be84c37b 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -0,0 +1,165 @@
+import {
+  createQueryAction,
+  findGeometryForTrip,
+  findStopError,
+  findStopResponse,
+  findStopTimesForStop,
+  findStopTimesForTrip,
+  findTripError,
+  findTripResponse
+} from './api'
+import { setMapZoom } from './config'
+import { zoomToStop } from './map'
+
+/**
+ * Generic helper for crafting GraphQL queries.
+ */
+function createGraphQLQueryAction(
+  query,
+  variables,
+  responseAction,
+  errorAction,
+  options
+) {
+  const endpoint = 'index/graphql'
+  const fetchOptions = {
+    body: JSON.stringify({ query, variables }),
+    headers: { 'Content-Type': 'application/json' },
+    method: 'POST'
+  }
+  return createQueryAction(endpoint, responseAction, errorAction, {
+    ...options,
+    fetchOptions
+  })
+}
+
+const findTrip = (params) =>
+  createGraphQLQueryAction(
+    `{
+        trip(id: "${params.tripId}") {
+          id: gtfsId
+          route {
+            id: gtfsId
+            agency {
+              id: gtfsId
+              name
+              url
+              timezone
+              lang
+              phone
+              fareUrl
+            }
+            shortName
+            longName
+            type
+            url
+            color
+            textColor
+            routeBikesAllowed: bikesAllowed
+            bikesAllowed
+          }
+          serviceId
+          tripHeadsign
+          directionId
+          blockId
+          shapeId
+          wheelchairAccessible
+          bikesAllowed
+          tripBikesAllowed: bikesAllowed
+
+          stops {
+			gtfsId: id
+			code
+			name
+			lat
+			lon			
+		}
+        }
+      }`,
+    {},
+    findTripResponse,
+    findTripError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        // FIXME: integrate into graphql request
+        dispatch(findStopTimesForTrip({ tripId: params.tripId }))
+        dispatch(findGeometryForTrip({ tripId: params.tripId }))
+      },
+      rewritePayload: (payload) => {
+        return payload?.data?.trip || {}
+      }
+    }
+  )
+
+const fetchStopInfo = (stop) => {
+  const { stopId } = stop
+  if (!stopId) return {}
+
+  return createGraphQLQueryAction(
+    `{
+    stop(id: "${stopId}") {
+      id: gtfsId
+      lat
+      lon
+      locationType
+      name
+      wheelchairBoarding
+      zoneId
+      geometries {
+        geoJson
+      }
+      routes {
+        id: gtfsId
+        agency {
+          gtfsId
+          name
+        }
+        longName
+        mode
+        color
+        shortName
+      }
+    }
+  }
+`,
+    {},
+    findStopResponse,
+    findStopError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        if (payload.errors) {
+          return findStopError(payload.errors)
+        }
+        const { stop } = payload?.data
+        if (!stop) return findStopError()
+
+        // TODO: nearby stops and amenities
+        dispatch(findStopTimesForStop({ stopId: stop.id }))
+        dispatch(zoomToStop(stop))
+
+        if (stop?.geometries?.geoJson?.type !== 'Point') {
+          dispatch(setMapZoom(10))
+        }
+      },
+      rewritePayload: (payload) => {
+        const { stop } = payload?.data
+        if (!stop) return findStopError()
+
+        const color = stop.routes?.length > 0 && `#${stop.routes[0].color}`
+
+        // Doing some OTP1 compatibility rewriting here
+        return {
+          ...stop,
+          agencyId: stop?.agency?.gtfsId,
+          agencyName: stop?.agency?.name,
+          color
+        }
+      },
+      serviceId: 'stops'
+    }
+  )
+}
+
+export default { fetchStopInfo, findTrip }

From 3a800fb122ae179031af9905e53aa0dcfc598bc6 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 2 Mar 2022 11:02:15 -0800
Subject: [PATCH 228/270] chore(deps): update route-viewer-overlay

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4a0323031..6d92cf919 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.1",
+    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.2",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",

From a7fb7e081293f2a5cab2e395470c157d210f7e4b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 2 Mar 2022 11:12:28 -0800
Subject: [PATCH 229/270] ci: allow unit tests to run without set api

---
 lib/actions/api.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 6f4f46f64..b1f0c9333 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -943,6 +943,10 @@ function makeApiUrl(config, endpoint, options) {
     url = config.alternateTransitIndex.apiRoot + endpoint
   } else {
     const api = config.api
+
+    // Don't crash if no api is defined (such as in the unit test env)
+    if (!api?.host) return null
+
     url = `${api.host}${api.port ? ':' + api.port : ''}${api.path}/${endpoint}`
   }
   return url

From c1eb8b84ec90f36acd4ad6f3d22ac6b298aefa80 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 2 Mar 2022 12:08:20 -0800
Subject: [PATCH 230/270] refactor: don't randomly redirect to stop viewer

---
 lib/actions/apiV2.js               | 12 ++++++------
 lib/actions/ui.js                  |  2 +-
 lib/reducers/create-otp-reducer.js |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 4be84c37b..e9a5ae771 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -68,12 +68,12 @@ const findTrip = (params) =>
           tripBikesAllowed: bikesAllowed
 
           stops {
-			gtfsId: id
-			code
-			name
-			lat
-			lon			
-		}
+			      gtfsId: id
+			      code
+			      name
+			      lat
+			      lon			
+		      }
         }
       }`,
     {},
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index b6c2e9938..e06972b9c 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -140,7 +140,7 @@ export function setViewedStop(payload) {
     dispatch(viewStop(payload))
     // payload.stopId may be undefined, which is ok as will be ignored by getPathFromParts
     const path = getPathFromParts('stop', payload?.stopId)
-    dispatch(routeTo(path))
+    if (payload?.stopId) dispatch(routeTo(path))
   }
 }
 
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 79f950684..a6d9a1a78 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -659,7 +659,7 @@ function createOtpReducer(config) {
           }
         })
       case 'SET_VIEWED_STOP':
-        if (action.payload) {
+        if (action?.payload !== null) {
           // If setting to a stop (not null), also set main panel.
           return update(state, {
             ui: {

From daafee5ac341ac790fe8bb800f3b87ed13f7a945 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 3 Mar 2022 11:56:28 -0800
Subject: [PATCH 231/270] refactor: avoid pointless expensive route calls

---
 lib/actions/ui.js                      | 8 +++++++-
 lib/components/viewers/route-viewer.js | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index e06972b9c..1b0622ee4 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -159,6 +159,7 @@ function idToParams(id, delimiter = ',') {
 export function matchContentToUrl(location) {
   // eslint-disable-next-line complexity
   return function (dispatch, getState) {
+    const state = getState()
     // This is a bit of a hack to make up for the fact that react-router does
     // not always provide the match params as expected.
     // https://github.com/ReactTraining/react-router/issues/5870#issuecomment-394194338
@@ -172,7 +173,12 @@ export function matchContentToUrl(location) {
     switch (root) {
       case 'route':
         if (id) {
-          dispatch(findRoute({ routeId: id }))
+          // This is a bit of a hack to check if the route details have been grabbed
+          // agencyName will only be populated if route details are repsent
+          // Moving away from manual requests should help resolve this
+          if (!state.otp.transitIndex?.routes?.[id]?.agencyName) {
+            dispatch(findRoute({ routeId: id }))
+          }
           // Check for pattern "submatch"
           const subMatch = matchPath(location.pathname, {
             exact: true,
diff --git a/lib/components/viewers/route-viewer.js b/lib/components/viewers/route-viewer.js
index ddcbe9975..54c88a109 100644
--- a/lib/components/viewers/route-viewer.js
+++ b/lib/components/viewers/route-viewer.js
@@ -72,8 +72,8 @@ class RouteViewer extends Component {
         })
 
   componentDidMount() {
-    const { findRoutes } = this.props
-    findRoutes()
+    const { findRoutes, routes } = this.props
+    if (!routes || routes.length <= 1) findRoutes()
   }
 
   /** Used to scroll to actively viewed route on load */

From 2c2a5c17e76605891516439f99a9efcd26d664ec Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 3 Mar 2022 13:18:15 -0800
Subject: [PATCH 232/270] chore(deps): update route-viewer-overlay

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6d92cf919..17ca32564 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.2",
+    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.3",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",

From 6dcc618ef2f94db06ca2ebf86dd431dd70861434 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 3 Mar 2022 13:24:09 -0800
Subject: [PATCH 233/270] chore(lockfile): update

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b5d651fee..0a1b3d64e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2617,10 +2617,10 @@
     "@opentripplanner/humanize-distance" "^1.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^1.2.1-alpha.2":
-  version "1.2.1-alpha.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.1-alpha.2.tgz#fb0bbb5d2c0e08c07aefcd4835ebbd9ea054cc06"
-  integrity sha512-wNRUOawtMyKjt6Oz9anajlmGVNUqWR2Q7Anv+BUC5cYRXU9k653NZtohKead3CPrqvxtMGRMUWOLN/2TA00Njw==
+"@opentripplanner/route-viewer-overlay@^1.2.1-alpha.3":
+  version "1.2.1-alpha.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.1-alpha.3.tgz#959c2511bf595995de5b9451768135a091391f4e"
+  integrity sha512-gLyP6X/fY4OBa5OtGlO7feF1uqohir5YFSglBzsLCStmwpUdobYoT6VtLD6DscPcfpgBJmjLjdOUDlnsoYXc3Q==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/core-utils" "^4.5.0"

From 1b104bd4d4b1237c3ca5c72663d7d01562bfc8a1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 3 Mar 2022 15:03:42 -0800
Subject: [PATCH 234/270] refactor: don't glue user to route

---
 lib/components/map/connected-route-viewer-overlay.js | 6 ++++++
 package.json                                         | 2 +-
 yarn.lock                                            | 8 ++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/lib/components/map/connected-route-viewer-overlay.js b/lib/components/map/connected-route-viewer-overlay.js
index a11101a22..eba2527b5 100644
--- a/lib/components/map/connected-route-viewer-overlay.js
+++ b/lib/components/map/connected-route-viewer-overlay.js
@@ -1,6 +1,8 @@
 import { connect } from 'react-redux'
 import RouteViewerOverlay from '@opentripplanner/route-viewer-overlay'
 
+import { MainPanelContent } from '../../actions/ui'
+
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
@@ -20,6 +22,10 @@ const mapStateToProps = (state, ownProps) => {
   }
 
   return {
+    allowMapCentering:
+      // TODO: allow panning of the map after initial click, but before pattern
+      // viewer open
+      state.otp.ui?.mainPanelContent === MainPanelContent.ROUTE_VIEWER,
     clipToPatternStops:
       state.otp.config?.routeViewer?.hideRouteShapesWithinFlexZones,
     routeData: { ...routeData, patterns: filteredPatterns }
diff --git a/package.json b/package.json
index 17ca32564..b7e95d003 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.3",
+    "@opentripplanner/route-viewer-overlay": "^1.3.0-alpha.1",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
diff --git a/yarn.lock b/yarn.lock
index 0a1b3d64e..d9139a6ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2617,10 +2617,10 @@
     "@opentripplanner/humanize-distance" "^1.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^1.2.1-alpha.3":
-  version "1.2.1-alpha.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.1-alpha.3.tgz#959c2511bf595995de5b9451768135a091391f4e"
-  integrity sha512-gLyP6X/fY4OBa5OtGlO7feF1uqohir5YFSglBzsLCStmwpUdobYoT6VtLD6DscPcfpgBJmjLjdOUDlnsoYXc3Q==
+"@opentripplanner/route-viewer-overlay@^1.3.0-alpha.1":
+  version "1.3.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.3.0-alpha.1.tgz#e28161f823161a7723ae1eb1428ef4515e7c76e4"
+  integrity sha512-oSJ5HbbUCsgm1f9gkQws7HRQdsrcrlyow6jfm9qEEQetTU2AMwhIZ6Q6Xv2Ldwo5pub5E2f2Q5ZdHswzI3vJ8A==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/core-utils" "^4.5.0"

From d9e1f47334f05c0d9db0a87225595cb46cfa0697 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 4 Mar 2022 09:51:02 -0800
Subject: [PATCH 235/270] refactor: don't move from route viewer to itinerary
 plan

---
 lib/actions/form.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/actions/form.js b/lib/actions/form.js
index 3168c7641..ca18c8ff0 100644
--- a/lib/actions/form.js
+++ b/lib/actions/form.js
@@ -97,6 +97,9 @@ export function setQueryParam(payload, searchId) {
  */
 export function parseUrlQueryString(params = getUrlParams(), source) {
   return function (dispatch, getState) {
+    const state = getState()
+    if (state.otp.ui.mainPanelContent !== null) return state
+
     // Filter out the OTP (i.e. non-UI) params and set the initial query
     const planParams = {}
     Object.keys(params).forEach((key) => {

From e11aec86e36998aff3dd8906b1ef4dda97dd3533 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 07:43:17 -0800
Subject: [PATCH 236/270] refactor: support otp2 detailed errors

---
 lib/components/util/formatted-mode.js | 4 ++++
 lib/util/state.js                     | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/components/util/formatted-mode.js b/lib/components/util/formatted-mode.js
index 0f3cf84a5..cbfd350be 100644
--- a/lib/components/util/formatted-mode.js
+++ b/lib/components/util/formatted-mode.js
@@ -26,6 +26,10 @@ const FormattedMode = ({ mode }) => {
       return <FormattedMessage id="common.modes.drive" />
     case 'ferry':
       return <FormattedMessage id="common.modes.ferry" />
+    case 'flex_direct':
+    case 'flex_egress':
+    case 'flex_access':
+      return <FormattedMessage id="common.modes.flex" />
     case 'funicular':
       return <FormattedMessage id="common.modes.funicular" />
     case 'gondola':
diff --git a/lib/util/state.js b/lib/util/state.js
index d3b1f6360..787abb31a 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -134,8 +134,9 @@ export function getErrorMessage(error, intl) {
         values={{ network: error.network }}
       />
     )
-  } else if (error.id === 404) {
+  } else if (error.id === 404 || error.id === 400) {
     // Localized messages for OTP's 404 PATH_NOT_FOUND error.
+    // OTP2 throws 400
     // include the modes if doing batch routing.
     const noTripFoundText =
       error.showModes && error.modes.length > 0 ? (

From 183acae9382daeb5c8705a2b5025db17e048f908 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 07:43:27 -0800
Subject: [PATCH 237/270] refactor: show otp2 trip geometry

---
 lib/actions/apiV2.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index e9a5ae771..128d0bdf3 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -74,6 +74,11 @@ const findTrip = (params) =>
 			      lat
 			      lon			
 		      }
+
+          tripGeometry {
+            length
+            points
+          }
         }
       }`,
     {},
@@ -87,7 +92,10 @@ const findTrip = (params) =>
         dispatch(findGeometryForTrip({ tripId: params.tripId }))
       },
       rewritePayload: (payload) => {
-        return payload?.data?.trip || {}
+        if (!payload?.data?.trip) return {}
+
+        payload.data.trip.geometry = payload.data.trip.tripGeometry
+        return payload.data.trip
       }
     }
   )

From 60999b031ff80a94ddb3b3473a6502af96c4322d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 07:47:07 -0800
Subject: [PATCH 238/270] refactor(i18n/en-US): update mode strings

---
 i18n/en-US.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 77c5977bd..363f14701 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -801,9 +801,10 @@ common:
     # The original OTP mode id is CABLE_CAR. Lowercase makes it cable_car.
     cable_car: Cable Car
     car: Car
-    car_park: car park
+    car_park: Park and Ride
     drive: Drive
     ferry: Ferry
+    flex: Flexible Routes
     funicular: Funicular
     gondola: Gondola
     micromobility: E-Scooter

From 5d1af328ea3ae95417b9ceb89482204affc9bcef Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 10:17:14 -0800
Subject: [PATCH 239/270] refactor(api): support otp2 vehicle rental query

---
 lib/actions/api.js                         |  9 ++--
 lib/actions/apiV1.js                       | 17 +++++--
 lib/actions/apiV2.js                       | 52 +++++++++++++++++++++-
 lib/components/map/enhanced-stop-marker.js |  2 +-
 4 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index b1f0c9333..4358425ed 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -351,9 +351,12 @@ export function vehicleRentalQuery(
   errorAction = vehicleRentalError,
   options = {}
 ) {
-  const paramsString = qs.stringify(params)
-  const endpoint = `vehicle_rental${paramsString ? `?${paramsString}` : ''}`
-  return createQueryAction(endpoint, responseAction, errorAction, options)
+  return actions.vehicleRentalQuery(
+    params,
+    responseAction,
+    errorAction,
+    options
+  )
 }
 
 // Single stop lookup query
diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
index dafa32475..da8258788 100644
--- a/lib/actions/apiV1.js
+++ b/lib/actions/apiV1.js
@@ -1,5 +1,6 @@
 import { createAction } from 'redux-actions'
 import L from 'leaflet'
+import qs from 'qs'
 
 import {
   bikeRentalQuery,
@@ -14,8 +15,7 @@ import {
   findStopTimesForTrip,
   findTripError,
   findTripResponse,
-  parkAndRideQuery,
-  vehicleRentalQuery
+  parkAndRideQuery
 } from './api'
 import { zoomToStop } from './map'
 
@@ -34,6 +34,17 @@ const findTrip = (params) =>
     }
   )
 
+export function vehicleRentalQuery(
+  params,
+  responseAction,
+  errorAction,
+  options
+) {
+  const paramsString = qs.stringify(params)
+  const endpoint = `vehicle_rental${paramsString ? `?${paramsString}` : ''}`
+  return createQueryAction(endpoint, responseAction, errorAction, options)
+}
+
 export const findNearbyAmenitiesResponse = createAction(
   'FIND_NEARBY_AMENITIES_RESPONSE'
 )
@@ -140,4 +151,4 @@ const fetchStopInfo = (stop) =>
     }
   }
 
-export default { fetchStopInfo, findTrip }
+export default { fetchStopInfo, findTrip, vehicleRentalQuery }
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 128d0bdf3..b9518e3c0 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -100,6 +100,56 @@ const findTrip = (params) =>
     }
   )
 
+export function vehicleRentalQuery(
+  params,
+  responseAction,
+  errorAction,
+  options
+) {
+  // TODO: ErrorsByNetwork is missing
+  return createGraphQLQueryAction(
+    `{
+    rentalVehicles {
+      vehicleId
+      id
+      name
+      lat
+      lon
+      allowPickupNow
+      network
+    }
+  }
+  `,
+    {},
+    responseAction,
+    errorAction,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        if (payload.errors) {
+          return errorAction(payload.errors)
+        }
+      },
+      // TODO: most of this rewrites the OTP2 response to match OTP1.
+      // we should re-write the rest of the UI to match OTP's behavior instead
+      rewritePayload: (payload) => {
+        return {
+          stations: payload?.data?.rentalVehicles.map((vehicle) => {
+            return {
+              allowPickup: vehicle.allowPickupNow,
+              id: vehicle.vehicleId,
+              name: vehicle.name,
+              networks: [vehicle.network],
+              x: vehicle.lon,
+              y: vehicle.lat
+            }
+          })
+        }
+      }
+    }
+  )
+}
+
 const fetchStopInfo = (stop) => {
   const { stopId } = stop
   if (!stopId) return {}
@@ -170,4 +220,4 @@ const fetchStopInfo = (stop) => {
   )
 }
 
-export default { fetchStopInfo, findTrip }
+export default { fetchStopInfo, findTrip, vehicleRentalQuery }
diff --git a/lib/components/map/enhanced-stop-marker.js b/lib/components/map/enhanced-stop-marker.js
index 1e53ab7db..f321561a7 100644
--- a/lib/components/map/enhanced-stop-marker.js
+++ b/lib/components/map/enhanced-stop-marker.js
@@ -186,7 +186,7 @@ const mapStateToProps = (state, ownProps) => {
   })
 
   return {
-    activeStopId: state.otp.ui.viewedStop.stopId,
+    activeStopId: state.otp.ui.viewedStop?.stopId,
     highlight: highlightedStop === ownProps.entity.id,
     languageConfig: state.otp.config.language,
     modeColors,

From 53b3df2a386912bc1913a37feb6eb2da56ed25b1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 10:21:19 -0800
Subject: [PATCH 240/270] refactor(api): support otp2 realtime vehicle position
 query

---
 example-config.yml   |  1 +
 lib/actions/api.js   | 18 +++---------------
 lib/actions/apiV1.js | 26 ++++++++++++++++++++++++--
 lib/actions/apiV2.js | 13 ++++++++++++-
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 4aefe88b0..44ba63cd3 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -2,6 +2,7 @@ api:
   host: http://localhost
   path: /otp/routers/default
   port: 8001
+# v2: false
 
 # Add suggested locations to be shown as options in the form view.
 # locations:
diff --git a/lib/actions/api.js b/lib/actions/api.js
index 4358425ed..af4fad6f7 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -791,27 +791,15 @@ export const clearStops = createAction('CLEAR_STOPS_OVERLAY')
 
 // Realtime Vehicle positions query
 
-const receivedVehiclePositions = createAction(
+export const receivedVehiclePositions = createAction(
   'REALTIME_VEHICLE_POSITIONS_RESPONSE'
 )
-const receivedVehiclePositionsError = createAction(
+export const receivedVehiclePositionsError = createAction(
   'REALTIME_VEHICLE_POSITIONS_ERROR'
 )
 
 export function getVehiclePositionsForRoute(routeId) {
-  return createQueryAction(
-    `index/routes/${routeId}/vehicles`,
-    receivedVehiclePositions,
-    receivedVehiclePositionsError,
-    {
-      rewritePayload: (payload) => {
-        return {
-          routeId: routeId,
-          vehicles: payload
-        }
-      }
-    }
-  )
+  return actions.getVehiclePositionsForRoute(routeId)
 }
 
 const throttledUrls = {}
diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
index da8258788..528daf581 100644
--- a/lib/actions/apiV1.js
+++ b/lib/actions/apiV1.js
@@ -15,7 +15,9 @@ import {
   findStopTimesForTrip,
   findTripError,
   findTripResponse,
-  parkAndRideQuery
+  parkAndRideQuery,
+  receivedVehiclePositions,
+  receivedVehiclePositionsError
 } from './api'
 import { zoomToStop } from './map'
 
@@ -151,4 +153,24 @@ const fetchStopInfo = (stop) =>
     }
   }
 
-export default { fetchStopInfo, findTrip, vehicleRentalQuery }
+const getVehiclePositionsForRoute = (routeId) =>
+  createQueryAction(
+    `index/routes/${routeId}/vehicles`,
+    receivedVehiclePositions,
+    receivedVehiclePositionsError,
+    {
+      rewritePayload: (payload) => {
+        return {
+          routeId: routeId,
+          vehicles: payload
+        }
+      }
+    }
+  )
+
+export default {
+  fetchStopInfo,
+  findTrip,
+  getVehiclePositionsForRoute,
+  vehicleRentalQuery
+}
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index b9518e3c0..85a750faa 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -220,4 +220,15 @@ const fetchStopInfo = (stop) => {
   )
 }
 
-export default { fetchStopInfo, findTrip, vehicleRentalQuery }
+const getVehiclePositionsForRoute = () => {
+  return function (dispatch, getState) {
+    console.warn('OTP2 does not yet support vehicle positions for route!')
+  }
+}
+
+export default {
+  fetchStopInfo,
+  findTrip,
+  getVehiclePositionsForRoute,
+  vehicleRentalQuery
+}

From d483fe9fbddd5b57309b8754fe007d23009bd66c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 13:40:28 -0800
Subject: [PATCH 241/270] refactor(api): basic support for otp2 nearby
 amenities

---
 lib/actions/api.js   |   6 +++
 lib/actions/apiV1.js |  10 +---
 lib/actions/apiV2.js | 114 ++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 121 insertions(+), 9 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index af4fad6f7..d8bc6dbcc 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -711,6 +711,12 @@ export function getTransportationNetworkCompanyRideEstimate(params) {
 }
 
 // Nearby Stops Query
+export const findNearbyAmenitiesResponse = createAction(
+  'FIND_NEARBY_AMENITIES_RESPONSE'
+)
+export const findNearbyAmenitiesError = createAction(
+  'FIND_NEARBY_AMENITIES_ERROR'
+)
 
 const receivedNearbyStopsResponse = createAction('NEARBY_STOPS_RESPONSE')
 const receivedNearbyStopsError = createAction('NEARBY_STOPS_ERROR')
diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
index 528daf581..cfcc1da9b 100644
--- a/lib/actions/apiV1.js
+++ b/lib/actions/apiV1.js
@@ -1,4 +1,3 @@
-import { createAction } from 'redux-actions'
 import L from 'leaflet'
 import qs from 'qs'
 
@@ -6,6 +5,8 @@ import {
   bikeRentalQuery,
   createQueryAction,
   findGeometryForTrip,
+  findNearbyAmenitiesError,
+  findNearbyAmenitiesResponse,
   findNearbyStops,
   findRoutesAtStop,
   findStopError,
@@ -47,13 +48,6 @@ export function vehicleRentalQuery(
   return createQueryAction(endpoint, responseAction, errorAction, options)
 }
 
-export const findNearbyAmenitiesResponse = createAction(
-  'FIND_NEARBY_AMENITIES_RESPONSE'
-)
-export const findNearbyAmenitiesError = createAction(
-  'FIND_NEARBY_AMENITIES_ERROR'
-)
-
 function findNearbyAmenities(params, stopId) {
   return function (dispatch, getState) {
     const { lat, lon, radius } = params
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 85a750faa..50b52da81 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -1,6 +1,8 @@
 import {
   createQueryAction,
   findGeometryForTrip,
+  findNearbyAmenitiesError,
+  findNearbyAmenitiesResponse,
   findStopError,
   findStopResponse,
   findStopTimesForStop,
@@ -150,6 +152,107 @@ export function vehicleRentalQuery(
   )
 }
 
+const findNearbyAmenities = ({ lat, lon, radius = 20_000, stopId }) => {
+  if (!stopId) return {}
+  return createGraphQLQueryAction(
+    `{
+    bikeNearest: nearest(lat: ${lat}, lon: ${lon}, maxDistance: ${radius}, filterByPlaceTypes: BIKE_PARK) {
+      edges {
+        node {
+          place {
+            id
+            lat
+            lon
+          }
+          distance
+        }
+      }
+    }
+    scooterNearest: nearest(lat: ${lat}, lon: ${lon}, maxDistance: ${radius}, filterByPlaceTypes: BICYCLE_RENT) {
+      edges {
+        node {
+          place {
+            id
+            lat
+            lon
+          }
+          distance
+        }
+      }
+    }
+    parkingLotNearest: nearest(lat: ${lat}, lon: ${lon}, maxDistance: ${radius}, filterByPlaceTypes: CAR_PARK) {
+      edges {
+        node {
+          place {
+            id
+            lat
+            lon
+          }
+          distance
+        }
+      }
+    }
+  }`,
+    {},
+    findNearbyAmenitiesResponse,
+    findNearbyAmenitiesError,
+    {
+      noThrottle: true,
+      rewritePayload: (payload) => {
+        if (!payload.data)
+          return {
+            bikeRental: { stations: [] },
+            vehicleRentalQuery: { stations: [] }
+          }
+        // TODO: no way to get full bike info right now from endpoint. Would have
+        // to make an additional request, or patch OTP2
+        return {
+          bikeRental: {
+            stations: payload.data.bikeNearest?.edges.map((edge) => {
+              return {
+                distance: edge.node.distance,
+                id: edge.node?.place?.id,
+                isFloatingBike: true,
+                lat: edge.node?.place?.lat,
+                lon: edge.node?.place?.lon,
+                name: edge.node?.place?.id || '',
+                networks: ['null']
+              }
+            })
+          },
+          parkAndRideLocations: payload.data.parkingLotNearest?.edges.map(
+            (edge) => {
+              return {
+                distance: edge.node.distance,
+                id: edge.node?.place?.id,
+                isFloatingBike: true,
+                lat: edge.node?.place?.lat,
+                lon: edge.node?.place?.lon,
+                name: edge.node?.place?.id || '',
+                networks: ['null']
+              }
+            }
+          ),
+          stopId,
+          vehicleRental: {
+            stations: payload.data.scooterNearest?.edges.map((edge) => {
+              return {
+                distance: edge.node.distance,
+                id: edge.node?.place?.id,
+                isFloatingBike: true,
+                lat: edge.node?.place?.lat,
+                lon: edge.node?.place?.lon,
+                name: edge.node?.place?.id || '',
+                networks: ['null']
+              }
+            })
+          }
+        }
+      }
+    }
+  )
+}
+
 const fetchStopInfo = (stop) => {
   const { stopId } = stop
   if (!stopId) return {}
@@ -193,7 +296,16 @@ const fetchStopInfo = (stop) => {
         const { stop } = payload?.data
         if (!stop) return findStopError()
 
-        // TODO: nearby stops and amenities
+        // Fetch nearby stops and amenities
+        // TODO: add radius from config
+        dispatch(
+          findNearbyAmenities({
+            lat: stop.lat,
+            lon: stop.lon,
+            stopId: stop.id
+          })
+        )
+
         dispatch(findStopTimesForStop({ stopId: stop.id }))
         dispatch(zoomToStop(stop))
 

From f43f39b6988d97183004df0f341eafc54c86632f Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 7 Mar 2022 15:18:16 -0800
Subject: [PATCH 242/270] refactor(api): basic support for otp2 nearby stops

---
 lib/actions/api.js   |   4 +-
 lib/actions/apiV2.js | 129 ++++++++++++++++++++++++++++++++++---------
 lib/util/viewer.js   |   4 +-
 3 files changed, 109 insertions(+), 28 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index d8bc6dbcc..3dd9f45cc 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -718,8 +718,8 @@ export const findNearbyAmenitiesError = createAction(
   'FIND_NEARBY_AMENITIES_ERROR'
 )
 
-const receivedNearbyStopsResponse = createAction('NEARBY_STOPS_RESPONSE')
-const receivedNearbyStopsError = createAction('NEARBY_STOPS_ERROR')
+export const receivedNearbyStopsResponse = createAction('NEARBY_STOPS_RESPONSE')
+export const receivedNearbyStopsError = createAction('NEARBY_STOPS_ERROR')
 
 export function findNearbyStops(params, focusStopId) {
   return createQueryAction(
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 50b52da81..9effa001e 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -8,7 +8,9 @@ import {
   findStopTimesForStop,
   findStopTimesForTrip,
   findTripError,
-  findTripResponse
+  findTripResponse,
+  receivedNearbyStopsError,
+  receivedNearbyStopsResponse
 } from './api'
 import { setMapZoom } from './config'
 import { zoomToStop } from './map'
@@ -152,7 +154,96 @@ export function vehicleRentalQuery(
   )
 }
 
-const findNearbyAmenities = ({ lat, lon, radius = 20_000, stopId }) => {
+const stopTimeGraphQLQuery = `
+stopTimes: stoptimesForPatterns(numberOfDepartures: 3) {
+  pattern {
+    desc: name
+    headsign
+    id: code
+  }
+  times: stoptimes {
+    arrivalDelay
+    departureDelay
+    headsign
+    realtime
+    realtimeArrival
+    realtimeArrival
+    realtimeState
+    scheduledArrival
+    scheduledDeparture
+    serviceDay
+    stop {
+      id: gtfsId
+    }
+    timepoint
+    trip {
+      id
+    }
+  }
+}
+`
+
+const stopGraphQLQuery = `
+id: gtfsId
+lat
+lon
+locationType
+name
+wheelchairBoarding
+zoneId
+geometries {
+  geoJson
+}
+routes {
+  id: gtfsId
+  agency {
+    gtfsId
+    name
+  }
+  longName
+  mode
+  color
+  shortName
+}
+${stopTimeGraphQLQuery}
+`
+
+const findNearbyStops = ({ focusStopId, lat, lon, radius = 300 }) => {
+  if (!focusStopId) return {}
+  return createGraphQLQueryAction(
+    `{
+    stopsByRadius(lat: ${lat}, lon: ${lon}, radius: ${radius}) {
+      edges {
+        node {
+          stop {
+            ${stopGraphQLQuery}
+          }
+        }
+      }
+    }
+  }`,
+    {},
+    receivedNearbyStopsResponse,
+    receivedNearbyStopsError,
+    {
+      noThrottle: true,
+      rewritePayload: (payload) => {
+        return {
+          focusStopId,
+          stops: payload?.data?.stopsByRadius?.edges?.map((edge) => {
+            const { stop } = edge.node
+            return {
+              ...stop,
+              agencyId: stop?.route?.agency?.gtfsId,
+              agencyName: stop?.route?.agency?.name
+            }
+          })
+        }
+      }
+    }
+  )
+}
+const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
   if (!stopId) return {}
   return createGraphQLQueryAction(
     `{
@@ -260,27 +351,7 @@ const fetchStopInfo = (stop) => {
   return createGraphQLQueryAction(
     `{
     stop(id: "${stopId}") {
-      id: gtfsId
-      lat
-      lon
-      locationType
-      name
-      wheelchairBoarding
-      zoneId
-      geometries {
-        geoJson
-      }
-      routes {
-        id: gtfsId
-        agency {
-          gtfsId
-          name
-        }
-        longName
-        mode
-        color
-        shortName
-      }
+      ${stopGraphQLQuery}
     }
   }
 `,
@@ -305,6 +376,14 @@ const fetchStopInfo = (stop) => {
             stopId: stop.id
           })
         )
+        // TODO: add radius from config
+        dispatch(
+          findNearbyStops({
+            focusStopId: stop.id,
+            lat: stop.lat,
+            lon: stop.lon
+          })
+        )
 
         dispatch(findStopTimesForStop({ stopId: stop.id }))
         dispatch(zoomToStop(stop))
@@ -322,8 +401,8 @@ const fetchStopInfo = (stop) => {
         // Doing some OTP1 compatibility rewriting here
         return {
           ...stop,
-          agencyId: stop?.agency?.gtfsId,
-          agencyName: stop?.agency?.name,
+          agencyId: stop?.route?.agency?.gtfsId,
+          agencyName: stop?.route?.agency?.name,
           color
         }
       },
diff --git a/lib/util/viewer.js b/lib/util/viewer.js
index 9cd715515..b1bd4b074 100644
--- a/lib/util/viewer.js
+++ b/lib/util/viewer.js
@@ -24,10 +24,12 @@ export function getRouteIdForPattern(pattern) {
 /**
  * Filter predicate used, so that the stop viewer only shows departures from a stop
  * (arrivals at a terminus stop are not shown in the stop viewer).
+ *
+ * OTP2 does not include stopIndexes. TODO: restore terminus stop filtering?
  * @returns true if the given stopTime does not correspond to the last stop visited by a pattern.
  */
 function excludeLastStop(stopTime) {
-  return stopTime.stopIndex < stopTime.stopCount - 1
+  return !stopTime.stopIndex || stopTime.stopIndex < stopTime.stopCount - 1
 }
 
 /**

From 0a8b6a47960f2cc1c77720e5c6dafceae78b16b8 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Mar 2022 11:34:09 -0800
Subject: [PATCH 243/270] refactor(apiv2): fetch stoptimes in stop request

---
 lib/actions/apiV2.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 9effa001e..92c5cbe8f 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -5,7 +5,6 @@ import {
   findNearbyAmenitiesResponse,
   findStopError,
   findStopResponse,
-  findStopTimesForStop,
   findStopTimesForTrip,
   findTripError,
   findTripResponse,
@@ -385,7 +384,6 @@ const fetchStopInfo = (stop) => {
           })
         )
 
-        dispatch(findStopTimesForStop({ stopId: stop.id }))
         dispatch(zoomToStop(stop))
 
         if (stop?.geometries?.geoJson?.type !== 'Point') {

From c39434adfa03582f50724d7492824f4733ff4fc1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Mar 2022 13:06:01 -0800
Subject: [PATCH 244/270] chore(deps): upgrade route-viewer-overlay

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index b7e95d003..6960150ee 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.3.0-alpha.1",
+    "@opentripplanner/route-viewer-overlay": "^1.3.0-alpha.2",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
diff --git a/yarn.lock b/yarn.lock
index d9139a6ae..48df4085b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2617,10 +2617,10 @@
     "@opentripplanner/humanize-distance" "^1.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^1.3.0-alpha.1":
-  version "1.3.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.3.0-alpha.1.tgz#e28161f823161a7723ae1eb1428ef4515e7c76e4"
-  integrity sha512-oSJ5HbbUCsgm1f9gkQws7HRQdsrcrlyow6jfm9qEEQetTU2AMwhIZ6Q6Xv2Ldwo5pub5E2f2Q5ZdHswzI3vJ8A==
+"@opentripplanner/route-viewer-overlay@^1.3.0-alpha.2":
+  version "1.3.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.3.0-alpha.2.tgz#1b2a6c4f277295dd971cd0251ca1e7f4dd7c7507"
+  integrity sha512-HkYEMYWGqEtiw9kXrVFgpAg+7wu/cbm7twqchrT+M3yDv1hYj4BJNoEUmjLMrCfbfK8kgDVSoiWmunz/EgMQtg==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/core-utils" "^4.5.0"

From c32ec44d3ae2f341fda6683ccf537c21e34360a2 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Mar 2022 13:48:54 -0800
Subject: [PATCH 245/270] refactor(api): move pattern viewer requests to otp2

---
 lib/actions/api.js   |  67 ++++++--------------------
 lib/actions/apiV1.js |  63 +++++++++++++++++++++++++
 lib/actions/apiV2.js | 110 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 188 insertions(+), 52 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 3dd9f45cc..2eb921637 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -16,7 +16,6 @@ import { getStopViewerConfig, queryIsValid } from '../util/state'
 
 import { ItineraryView, setItineraryView, setViewedStop } from './ui'
 import { rememberPlace } from './user'
-import { zoomToStop } from './map'
 import v1Actions from './apiV1'
 import v2Actions from './apiV2'
 
@@ -533,10 +532,12 @@ export function findRoutes(params) {
 
 // Patterns for Route lookup query
 // TODO: replace with GraphQL query for route => patterns => geometry
-const findPatternsForRouteResponse = createAction(
+export const findPatternsForRouteResponse = createAction(
   'FIND_PATTERNS_FOR_ROUTE_RESPONSE'
 )
-const findPatternsForRouteError = createAction('FIND_PATTERNS_FOR_ROUTE_ERROR')
+export const findPatternsForRouteError = createAction(
+  'FIND_PATTERNS_FOR_ROUTE_ERROR'
+)
 
 // Single Route lookup query
 
@@ -544,58 +545,20 @@ export const findRouteResponse = createAction('FIND_ROUTE_RESPONSE')
 export const findRouteError = createAction('FIND_ROUTE_ERROR')
 
 export function findRoute(params) {
-  return createQueryAction(
-    `index/routes/${params.routeId}`,
-    findRouteResponse,
-    findRouteError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        // load patterns
-        dispatch(findPatternsForRoute({ routeId: params.routeId }))
-        dispatch(setViewedStop(null))
-      }
-    }
-  )
+  return function (dispatch, getState) {
+    const state = getState()
+    const { api } = state.otp.config
+    // Because findRoute is sometimes called from strange places,
+    // we must explictly check for V2 as we can not rely on
+    // the check having already happened
+    if (api.v2) actions = v2Actions
+
+    return dispatch(actions.findRoute(params))
+  }
 }
 
 export function findPatternsForRoute(params) {
-  return createQueryAction(
-    `index/routes/${params.routeId}/patterns?includeGeometry=true`,
-    findPatternsForRouteResponse,
-    findPatternsForRouteError,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        // load geometry for each pattern
-        payload.forEach((ptn) => {
-          // Some OTP instances don't support includeGeometry.
-          // We need to manually fetch geometry in these cases.
-          if (!ptn.geometry) {
-            dispatch(
-              findGeometryForPattern({
-                patternId: ptn.id,
-                routeId: params.routeId
-              })
-            )
-          }
-        })
-      },
-
-      rewritePayload: (payload) => {
-        // convert pattern array to ID-mapped object
-        const patterns = {}
-        payload.forEach((ptn) => {
-          patterns[ptn.id] = ptn
-        })
-
-        return {
-          patterns,
-          routeId: params.routeId
-        }
-      }
-    }
-  )
+  return actions.findPatternsForRoute(params)
 }
 
 // Geometry for Pattern lookup query
diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
index cfcc1da9b..62388041f 100644
--- a/lib/actions/apiV1.js
+++ b/lib/actions/apiV1.js
@@ -4,10 +4,15 @@ import qs from 'qs'
 import {
   bikeRentalQuery,
   createQueryAction,
+  findGeometryForPattern,
   findGeometryForTrip,
   findNearbyAmenitiesError,
   findNearbyAmenitiesResponse,
   findNearbyStops,
+  findPatternsForRouteError,
+  findPatternsForRouteResponse,
+  findRouteError,
+  findRouteResponse,
   findRoutesAtStop,
   findStopError,
   findStopResponse,
@@ -20,6 +25,7 @@ import {
   receivedVehiclePositions,
   receivedVehiclePositionsError
 } from './api'
+import { setViewedStop } from './ui'
 import { zoomToStop } from './map'
 
 const findTrip = (params) =>
@@ -162,8 +168,65 @@ const getVehiclePositionsForRoute = (routeId) =>
     }
   )
 
+export function findPatternsForRoute(params) {
+  return createQueryAction(
+    `index/routes/${params.routeId}/patterns?includeGeometry=true`,
+    findPatternsForRouteResponse,
+    findPatternsForRouteError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        // load geometry for each pattern
+        payload.forEach((ptn) => {
+          // Some OTP instances don't support includeGeometry.
+          // We need to manually fetch geometry in these cases.
+          if (!ptn.geometry) {
+            dispatch(
+              findGeometryForPattern({
+                patternId: ptn.id,
+                routeId: params.routeId
+              })
+            )
+          }
+        })
+      },
+
+      rewritePayload: (payload) => {
+        // convert pattern array to ID-mapped object
+        const patterns = {}
+        payload.forEach((ptn) => {
+          patterns[ptn.id] = ptn
+        })
+
+        return {
+          patterns,
+          routeId: params.routeId
+        }
+      }
+    }
+  )
+}
+
+export function findRoute(params) {
+  return createQueryAction(
+    `index/routes/${params.routeId}`,
+    findRouteResponse,
+    findRouteError,
+    {
+      noThrottle: true,
+      postprocess: (payload, dispatch) => {
+        // load patterns
+        dispatch(findPatternsForRoute({ routeId: params.routeId }))
+        dispatch(setViewedStop(null))
+      }
+    }
+  )
+}
+
 export default {
   fetchStopInfo,
+  findPatternsForRoute,
+  findRoute,
   findTrip,
   getVehiclePositionsForRoute,
   vehicleRentalQuery
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 92c5cbe8f..41e0ef405 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -3,6 +3,8 @@ import {
   findGeometryForTrip,
   findNearbyAmenitiesError,
   findNearbyAmenitiesResponse,
+  findRouteError,
+  findRouteResponse,
   findStopError,
   findStopResponse,
   findStopTimesForTrip,
@@ -415,8 +417,116 @@ const getVehiclePositionsForRoute = () => {
   }
 }
 
+export function findRoute(params) {
+  return function (dispatch, getState) {
+    const { routeId } = params
+    if (!routeId) return
+
+    return dispatch(
+      createGraphQLQueryAction(
+        `{
+        route(id: "${routeId}") {
+          id: gtfsId
+          desc
+          agency {
+            id: gtfsId
+            name
+            url
+            timezone
+            lang
+            phone
+          }
+          longName
+          type
+          color
+          textColor
+          bikesAllowed
+          routeBikesAllowed: bikesAllowed
+      
+          patterns {
+            id
+            name
+            patternGeometry {
+              points
+              length
+            }
+            stops {
+              code
+              id: gtfsId
+              lat
+              lon
+              name
+              locationType
+              geometries {
+                geoJson
+              }
+              routes {
+                color
+              }
+            }
+          }
+        }
+      }
+      `,
+        {},
+        findRouteResponse,
+        findRouteError,
+        {
+          noThrottle: true,
+          // TODO: avoid re-writing OTP2 route object to match OTP1 style
+          rewritePayload: (payload) => {
+            if (payload.errors) {
+              return dispatch(findRouteError(payload.errors))
+            }
+            const { route } = payload?.data
+            if (!route) return
+
+            const routePatterns = {}
+            route.patterns.forEach((pattern) => {
+              const patternStops = pattern.stops.map((stop) => {
+                const color =
+                  stop.routes?.length > 0 && `#${stop.routes[0].color}`
+                if (stop.routes) delete stop.routes
+                return { ...stop, color }
+              })
+              routePatterns[pattern.id] = {
+                ...pattern,
+                desc: pattern.name,
+                geometry: pattern.patternGeometry,
+                stops: patternStops
+              }
+            })
+            route.patterns = routePatterns
+            // TODO: avoid explict behavior shift like this
+            route.v2 = true
+
+            return route
+          }
+        }
+      )
+    )
+  }
+}
+
+export function findPatternsForRoute(params) {
+  return function (dispatch, getState) {
+    const state = getState()
+    const { routeId } = params
+    const route = state?.otp?.transitIndex?.routes?.[routeId]
+    if (!route.patterns) {
+      // TODO: since grabbbing only patterns would basically be the same query and
+      // most crucially re-writing as findRoute() already does, we just make that request
+      //
+      // A proper graphQL implementation will only grab what data is needed when it is needed
+      return dispatch(findRoute(params))
+    }
+  }
+}
+
 export default {
   fetchStopInfo,
+  findPatternsForRoute,
+  findRoute,
   findTrip,
   getVehiclePositionsForRoute,
   vehicleRentalQuery

From efa6041105e580024154e8d8cf94d9bd987b46e5 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Mar 2022 14:21:44 -0800
Subject: [PATCH 246/270] refactor(api): correct typo

---
 lib/actions/api.js   | 2 +-
 lib/actions/apiV2.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 2eb921637..ada905e72 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -549,7 +549,7 @@ export function findRoute(params) {
     const state = getState()
     const { api } = state.otp.config
     // Because findRoute is sometimes called from strange places,
-    // we must explictly check for V2 as we can not rely on
+    // we must explicitly check for V2 as we can not rely on
     // the check having already happened
     if (api.v2) actions = v2Actions
 
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 41e0ef405..270bb5b6d 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -497,7 +497,7 @@ export function findRoute(params) {
               }
             })
             route.patterns = routePatterns
-            // TODO: avoid explict behavior shift like this
+            // TODO: avoid explicit behavior shift like this
             route.v2 = true
 
             return route

From 30f0633c8425aa7ca7f7d59abeb69a5cfdde04ae Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 9 Mar 2022 15:18:41 -0500
Subject: [PATCH 247/270] feat(Default-itin, fare calculations): Do not display
 0.00 fares if no fares in GTFS

---
 lib/components/narrative/default/default-itinerary.js |  3 +++
 lib/util/state.js                                     | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 6e0b507dc..9c788559b 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -131,6 +131,9 @@ const ITINERARY_ATTRIBUTES = [
     id: 'cost',
     order: 2,
     render: (itinerary, options, defaultFareKey = 'regular') => {
+      const fareInCents = getTotalFare(itinerary, options.configCosts, defaultFareKey)
+      const fare = fareInCents == null ? null : fareInCents / 100
+      if (fare == null) return null
       return (
         <FormattedNumber
           currency={options.currency}
diff --git a/lib/util/state.js b/lib/util/state.js
index 83c1a245c..a01748ecc 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -2,6 +2,7 @@
 /* eslint-disable  */
 import { createSelector } from 'reselect'
 import { FormattedList, FormattedMessage } from 'react-intl'
+import { isTransit } from '@opentripplanner/core-utils/lib/itinerary'
 import coreUtils from '@opentripplanner/core-utils'
 import hash from 'object-hash'
 import isEqual from 'lodash.isequal'
@@ -433,7 +434,8 @@ export function getTotalFare(
   // Get transit/TNC fares.
   const { maxTNCFare, transitFares } = calculateFares(itinerary, true)
   const transitFare =
-    (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare || 0
+    (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare ||
+    null
   // Start with default cost values.
   const costs = DEFAULT_COSTS
   // If config contains values to override defaults, apply those.
@@ -441,6 +443,7 @@ export function getTotalFare(
   // Calculate total cost from itinerary legs.
   let drivingCost = 0
   let hasBikeshare = false
+  let transitFareNotProvided = false
   itinerary.legs.forEach((leg) => {
     if (leg.mode === 'CAR') {
       // Convert meters to miles and multiple by cost per mile.
@@ -453,7 +456,13 @@ export function getTotalFare(
     ) {
       hasBikeshare = true
     }
+    if (isTransit(leg.mode) && transitFare == null) {
+      transitFareNotProvided = true
+    }
   })
+  // If our itinerary includes a transit leg, but transit fare data is not provided
+  // return no fare information, rather than an underestimate
+  if (transitFareNotProvided) return null
   const bikeshareCost = hasBikeshare ? costs.bikeshareTripCostCents : 0
   // If some leg uses driving, add parking cost to the total.
   if (drivingCost > 0) drivingCost += costs.carParkingCostCents

From 65631e6eda1ff0b7c5fe2681fbc1793ce016d35c Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 10 Mar 2022 11:34:13 -0500
Subject: [PATCH 248/270] feat(LocaleSelector): Remove flags from
 LocaleSelector, improve locale state update

---
 example-config.yml                       |  8 +-----
 lib/actions/ui.js                        | 20 ++++++++++----
 lib/components/app/locale-selector.tsx   | 33 +++++-------------------
 lib/components/user/nav-login-button.css |  5 ++++
 lib/util/i18n.js                         |  8 +++---
 5 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index be39d1472..b22092f9d 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -343,7 +343,7 @@ itinerary:
 ### Languages defined may be region-specific (e.g. en-US) or language-specific (e.g. es, kr)
 ### The LocaleSelector component, which provides a dropdown for the user to change their locale, will
 ### only be rendered if more than one valid language (all languages must have "name" defined) is included
-### in the language config. Locale icons (flags) are rendered based on the country code provided below (i.e. flag: US)
+### in the language config. 
 
 # language:
 #   allLanguages
@@ -372,7 +372,6 @@ itinerary:
 #         modes: "CAR_HAIL, CAR_RENT"
 #       480:
 #         msg: No available transit routes or rideshare/carshare service at origin.
-#     flag: US
 #     name: English (US)
 #
 #   fr:
@@ -383,23 +382,18 @@ itinerary:
 #         give-us-feedback: Donnez votre avis
 #         log-my-commute: Mes trajets verts
 #         traveler-tools: Outils du voyageur
-#     flag: FR
 #     name: French
 
 #   ko:
-#     flag: KR
 #     name: 한국인
 
 #   vi:
-#     flag: VN
 #     name: Tiếng Việt
 
 #   zh:
-#     flag: CN
 #     name: 中国人
 
 #   es:
-#     flag: ES
 #     name: Español
 
 ### Localization section to provide language/locale settings
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 22f0b8714..23c879bf5 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -3,7 +3,12 @@ import { matchPath } from 'react-router'
 import { push } from 'connected-react-router'
 import coreUtils from '@opentripplanner/core-utils'
 
-import { getDefaultLocale, loadLocaleData } from '../util/i18n'
+import {
+  getConfigLocales,
+  getDefaultLocale,
+  getMatchingLocaleString,
+  loadLocaleData
+} from '../util/i18n'
 import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
 import { getPathFromParts } from '../util/ui'
 
@@ -336,13 +341,18 @@ export function setLocale(locale) {
   return async function (dispatch, getState) {
     const { config } = getState().otp
     const { loggedInUser } = getState().user
-
     const { language: customMessages } = config
+    const configLocales = getConfigLocales(customMessages)
     const effectiveLocale = locale || getDefaultLocale(config, loggedInUser)
-    const messages = await loadLocaleData(effectiveLocale, customMessages)
+    const matchedLocale = getMatchingLocaleString(effectiveLocale, 'en-US')
+    const messages = await loadLocaleData(
+      matchedLocale,
+      customMessages,
+      configLocales
+    )
 
-    // Update the redux state
-    dispatch(updateLocale({ locale: effectiveLocale, messages }))
+    // Update the redux state, only with a matched locale
+    dispatch(updateLocale({ locale: matchedLocale, messages }))
 
     // Update the lang attribute in the root <html> element.
     // (The lang is the first portion of the locale.)
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index 4de2013c3..243bd008f 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -1,32 +1,17 @@
-import * as flags from 'country-flag-icons/react/3x2'
 import { connect, ConnectedProps } from 'react-redux'
 import { MenuItem, NavDropdown } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
 import React, { MouseEvent } from 'react'
-import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import Icon from '../util/icon'
 
-const FlagContainer = styled.span`
-  &::after {
-    content: '';
-    margin: 0 0.125em;
-  }
-
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  width: 15px;
-`
-
 type PropsFromRedux = ConnectedProps<typeof connector>
 
 interface LocaleSelectorProps extends PropsFromRedux {
   // Typescript TODO configLanguageType
   configLanguages: Record<string, any>
-  style?: any
 }
 
 const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
@@ -38,10 +23,6 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     setLocale
   } = props
 
-  // If the currentLocale does not exist, avoid error by rendering US flag
-  const CurrentLocaleFlag = configLanguages[currentLocale]
-    ? flags[configLanguages[currentLocale].flag]
-    : flags[configLanguages['en-US'].flag]
   const intl = useIntl()
 
   const handleLocaleSelection = (e: MouseEvent<Element>, locale: string) => {
@@ -65,20 +46,20 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     <NavDropdown
       id="locale-selector"
       pullRight
-      title={<CurrentLocaleFlag style={{ width: 15 }} />}
+      title={<Icon style={{ color: '#fff' }} type="globe" />}
     >
       {Object.keys(configLanguages).map((locale) => {
-        const Flag = flags[configLanguages[locale].flag]
         return (
           locale !== 'allLanguages' && (
             <MenuItem
+              className="locale-name"
               onClick={(e: MouseEvent) => handleLocaleSelection(e, locale)}
             >
-              <FlagContainer>
-                {locale === currentLocale && <Icon type="check-square" />}
-                {locale !== currentLocale && <Flag style={{ width: 15 }} />}
-              </FlagContainer>
-              {configLanguages[locale].name}
+              <span
+                style={locale === currentLocale ? { fontWeight: 'bold' } : {}}
+              >
+                {configLanguages[locale].name}
+              </span>
             </MenuItem>
           )
         )
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index 48b649dee..432f9a900 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -7,6 +7,11 @@
   * and add back some of the default visuals provided by react-bootstrap's <Nav>.
   * In desktop and mobile modes, we change the link color to white for consistency with the AppMenu component.
   */
+  
+/* Locale selector dropdown width override (default bootstrap dropdown is 120px)*/
+.dropdown > .dropdown-menu {
+  min-width: 0px;
+}
 
 .otp.mobile .navbar .container-fluid .locale-selector-and-login {
   position: fixed;
diff --git a/lib/util/i18n.js b/lib/util/i18n.js
index 9522409d9..1d3f7a5bd 100644
--- a/lib/util/i18n.js
+++ b/lib/util/i18n.js
@@ -10,7 +10,7 @@ import flatten from 'flat'
  * Match the provided locale (language and region) to the list of supported locales.
  * Default to english if unsupported.
  */
-function getMatchingLocaleString(
+export function getMatchingLocaleString(
   locale = '',
   defaultLocale = 'en-US',
   configLocales = {}
@@ -53,9 +53,7 @@ export function getConfigLocales(configLanguages) {
  *   id => string.
  * FIXME: Load languages on demand using fetch.
  */
-export async function loadLocaleData(locale, customMessages) {
-  const configLocales = getConfigLocales(customMessages)
-  const matchedLocale = getMatchingLocaleString(locale, 'en-US', configLocales)
+export async function loadLocaleData(matchedLocale, customMessages) {
   let messages
   switch (matchedLocale) {
     case 'es': // Spanish translation is not specific to a region
@@ -83,7 +81,7 @@ export async function loadLocaleData(locale, customMessages) {
     ...flatten(messages),
     // Override the predefined strings with the custom ones, if any provided.
     ...flatten(customMessages.allLanguages || {}),
-    ...flatten(customMessages[locale] || {})
+    ...flatten(customMessages[matchedLocale] || {})
   }
 
   return mergedMessages

From add9a785a9f2413515ede7e617bcf7adcef8b9dd Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 10 Mar 2022 13:04:41 -0500
Subject: [PATCH 249/270] refactor(Default-itinerary): reuse var

---
 lib/components/narrative/default/default-itinerary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 9c788559b..395b77e05 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -140,7 +140,7 @@ const ITINERARY_ATTRIBUTES = [
           currencyDisplay='narrowSymbol'
           style='currency'
           value={
-            getTotalFare(itinerary, options.configCosts, defaultFareKey) / 100
+            fareInCents / 100
           }
         />
       )

From 64194d35f33db067c9ce83616c4ab6c6555ca4dc Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 10 Mar 2022 11:09:53 -0800
Subject: [PATCH 250/270] refactor(actions/ui): change full route data check

---
 lib/actions/ui.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 1b0622ee4..50a769c54 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -174,9 +174,9 @@ export function matchContentToUrl(location) {
       case 'route':
         if (id) {
           // This is a bit of a hack to check if the route details have been grabbed
-          // agencyName will only be populated if route details are repsent
+          // bikesAllowed will only be populated if route details are repsent
           // Moving away from manual requests should help resolve this
-          if (!state.otp.transitIndex?.routes?.[id]?.agencyName) {
+          if (!state.otp.transitIndex?.routes?.[id]?.bikesAllowed) {
             dispatch(findRoute({ routeId: id }))
           }
           // Check for pattern "submatch"

From 6083895d2f003df24d74517e0dadc1c5efc67461 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:50:26 -0500
Subject: [PATCH 251/270] fix(DateTimeModal): Show date/time picker on focus on
 Chrome desktop (support touch).

---
 example-config.yml                     |  4 ++++
 lib/components/form/date-time-modal.js | 25 +++++++++++++++++--------
 lib/components/form/form.css           | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index be39d1472..4b525f665 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -450,3 +450,7 @@ dateTime:
 # Mapillary calls these "Client Tokens". They can be created at https://www.mapillary.com/dashboard/developers
 # mapillary:
 #   key: <Mapillary Key>
+
+### Setting to enable touch-friendly behavior
+### e.g. on touch-screen kiosks that run a desktop OS.
+# isTouchScreenOnDesktop: true
diff --git a/lib/components/form/date-time-modal.js b/lib/components/form/date-time-modal.js
index 7bc7396ca..5680a3c24 100644
--- a/lib/components/form/date-time-modal.js
+++ b/lib/components/form/date-time-modal.js
@@ -1,7 +1,9 @@
+// TODO: TypeScript with props.
+/* eslint-disable react/prop-types */
+import { connect } from 'react-redux'
 import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
 
 import { setQueryParam } from '../../actions/form'
 
@@ -12,8 +14,9 @@ class DateTimeModal extends Component {
     setQueryParam: PropTypes.func
   }
 
-  render () {
+  render() {
     const {
+      config,
       date,
       dateFormatLegacy,
       departArrive,
@@ -21,12 +24,16 @@ class DateTimeModal extends Component {
       time,
       timeFormatLegacy
     } = this.props
+    const { isTouchScreenOnDesktop } = config
+    const touchClassName = isTouchScreenOnDesktop
+      ? 'with-desktop-touchscreen'
+      : ''
 
     return (
-      <div className='date-time-modal'>
-        <div className='main-panel'>
+      <div className="date-time-modal">
+        <div className="main-panel">
           <StyledDateTimeSelector
-            className='date-time-selector'
+            className={`date-time-selector ${touchClassName}`}
             date={date}
             departArrive={departArrive}
             onQueryParamChange={setQueryParam}
@@ -46,17 +53,19 @@ class DateTimeModal extends Component {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const { date, departArrive, time } = state.otp.currentQuery
   const config = state.otp.config
   return {
     config,
     date,
-    departArrive,
-    time,
     // These props below are for legacy browsers (see render method above).
     // eslint-disable-next-line sort-keys
     dateFormatLegacy: coreUtils.time.getDateFormat(config),
+
+    departArrive,
+
+    time,
     timeFormatLegacy: coreUtils.time.getTimeFormat(config)
   }
 }
diff --git a/lib/components/form/form.css b/lib/components/form/form.css
index 371098a50..203dee7c0 100644
--- a/lib/components/form/form.css
+++ b/lib/components/form/form.css
@@ -429,3 +429,20 @@
 .otp .user-settings .disclaimer {
   font-size: x-small;
 }
+
+/* For Chrome/ium desktop browsers, if so configured,
+   set the date/time input controls to automatically show the date-time picker on focus.
+   This changes do not seem to affect Chrome/ium mobile browsers. */
+.otp .date-time-modal .date-time-selector.with-desktop-touchscreen input {
+  position: relative;
+}
+.otp .date-time-modal .date-time-selector.with-desktop-touchscreen input::-webkit-calendar-picker-indicator {
+  background-position-x: right;
+  margin-inline-end: 8px;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+.otp .date-time-modal .date-time-selector.with-desktop-touchscreen input::-webkit-datetime-edit {
+  margin-inline-end: 8px;
+}

From 29d9d9bc45c122fa5e582c6a44fbcc6d565092c5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 10 Mar 2022 15:05:00 -0500
Subject: [PATCH 252/270] refactor(DateTimeModal): Fix prop sorting.

---
 lib/components/form/date-time-modal.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/components/form/date-time-modal.js b/lib/components/form/date-time-modal.js
index 5680a3c24..c77b135f2 100644
--- a/lib/components/form/date-time-modal.js
+++ b/lib/components/form/date-time-modal.js
@@ -59,13 +59,11 @@ const mapStateToProps = (state) => {
   return {
     config,
     date,
-    // These props below are for legacy browsers (see render method above).
-    // eslint-disable-next-line sort-keys
+    // This prop is for legacy browsers (see render method above).
     dateFormatLegacy: coreUtils.time.getDateFormat(config),
-
     departArrive,
-
     time,
+    // This prop is for legacy browsers (see render method above).
     timeFormatLegacy: coreUtils.time.getTimeFormat(config)
   }
 }

From e0bc80dc3dcc9b84645df4d5399b03c8de1788c9 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 10 Mar 2022 13:06:39 -0800
Subject: [PATCH 253/270] refactor: address pr feedback

---
 lib/actions/api.js                 | 44 +++++++++++++++++-------------
 lib/reducers/create-otp-reducer.js |  2 +-
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index ada905e72..4f7eeef4f 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -25,9 +25,6 @@ const { getRoutingParams, getTripOptionsFromQuery, getUrlParams } =
   coreUtils.query
 const { randId } = coreUtils.storage
 
-// set actions variable that can be set to v2Actions if v2 server is set
-let actions = v1Actions
-
 // Generic API actions
 
 /*
@@ -91,6 +88,24 @@ function getActiveItinerary(state) {
   return activeItinerary
 }
 
+/**
+ * Dispatches a method from either v1actions or v2actions, depending on
+ * which version of OTP is specified in the config.
+ * @param {*} methodName    the method to execute
+ * @param  {...any} params  varargs of params to send to the action
+ */
+function executeOTPVersionSpecificAction(methodName, ...params) {
+  return function (dispatch, getState) {
+    const state = getState()
+    const { api } = state.otp.config
+    return dispatch(
+      api.v2
+        ? v2Actions[methodName](...params)
+        : v1Actions[methodName](...params)
+    )
+  }
+}
+
 /**
  * Send a routing query to the OTP backend.
  *
@@ -248,7 +263,6 @@ function getOtpFetchOptions(state, includeToken = false) {
   let apiBaseUrl, apiKey, token
 
   const { api, persistence } = state.otp.config
-  if (api.v2) actions = v2Actions
   if (persistence && persistence.otp_middleware) {
     // Prettier does not understand the syntax on this line
     // eslint-disable-next-line prettier/prettier
@@ -350,7 +364,8 @@ export function vehicleRentalQuery(
   errorAction = vehicleRentalError,
   options = {}
 ) {
-  return actions.vehicleRentalQuery(
+  return executeOTPVersionSpecificAction(
+    'vehicleRentalQuery',
     params,
     responseAction,
     errorAction,
@@ -363,7 +378,7 @@ export const findStopResponse = createAction('FIND_STOP_RESPONSE')
 export const findStopError = createAction('FIND_STOP_ERROR')
 
 export function fetchStopInfo(stop) {
-  return actions.fetchStopInfo(stop)
+  return executeOTPVersionSpecificAction('fetchStopInfo', stop)
 }
 
 // Single trip lookup query
@@ -372,7 +387,7 @@ export const findTripResponse = createAction('FIND_TRIP_RESPONSE')
 export const findTripError = createAction('FIND_TRIP_ERROR')
 
 export function findTrip(params) {
-  return actions.findTrip(params)
+  return executeOTPVersionSpecificAction('findTrip', params)
 }
 
 // Stops for trip query
@@ -545,20 +560,11 @@ export const findRouteResponse = createAction('FIND_ROUTE_RESPONSE')
 export const findRouteError = createAction('FIND_ROUTE_ERROR')
 
 export function findRoute(params) {
-  return function (dispatch, getState) {
-    const state = getState()
-    const { api } = state.otp.config
-    // Because findRoute is sometimes called from strange places,
-    // we must explicitly check for V2 as we can not rely on
-    // the check having already happened
-    if (api.v2) actions = v2Actions
-
-    return dispatch(actions.findRoute(params))
-  }
+  return executeOTPVersionSpecificAction('findRoute', params)
 }
 
 export function findPatternsForRoute(params) {
-  return actions.findPatternsForRoute(params)
+  return executeOTPVersionSpecificAction('findPatternsForRoute', params)
 }
 
 // Geometry for Pattern lookup query
@@ -768,7 +774,7 @@ export const receivedVehiclePositionsError = createAction(
 )
 
 export function getVehiclePositionsForRoute(routeId) {
-  return actions.getVehiclePositionsForRoute(routeId)
+  return executeOTPVersionSpecificAction('getVehiclePositionsForRoute', routeId)
 }
 
 const throttledUrls = {}
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index a6d9a1a78..c574b8614 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -727,7 +727,7 @@ function createOtpReducer(config) {
         return update(state, {
           transitIndex: {
             routes: {
-              [action.payload.routeId || 'null']: {
+              [action?.payload?.routeId || 'null']: {
                 patterns: {
                   [action.payload.patternId]: {
                     stops: { $set: patternStops }

From d2507aa982ecca23a82fb1964c5e7a7099b81d88 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 10 Mar 2022 13:32:01 -0800
Subject: [PATCH 254/270] refactor(actions/apiv*): address pr comments

---
 lib/actions/apiV1.js | 28 +++++++++++++---------------
 lib/actions/apiV2.js | 33 ++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/lib/actions/apiV1.js b/lib/actions/apiV1.js
index 62388041f..e255bd863 100644
--- a/lib/actions/apiV1.js
+++ b/lib/actions/apiV1.js
@@ -54,9 +54,8 @@ export function vehicleRentalQuery(
   return createQueryAction(endpoint, responseAction, errorAction, options)
 }
 
-function findNearbyAmenities(params, stopId) {
+function findNearbyAmenities({ lat, lon, radius = 300 }, stopId) {
   return function (dispatch, getState) {
-    const { lat, lon, radius } = params
     const bounds = L.latLng(lat, lon).toBounds(radius)
     const { lat: low, lng: left } = bounds.getSouthWest()
     const { lat: up, lng: right } = bounds.getNorthEast()
@@ -109,8 +108,8 @@ function findNearbyAmenities(params, stopId) {
   }
 }
 
-export function findStop(params) {
-  return createQueryAction(
+export const findStop = (params) =>
+  createQueryAction(
     `index/stops/${params.stopId}`,
     findStopResponse,
     findStopError,
@@ -123,19 +122,18 @@ export function findStop(params) {
       serviceId: 'stops'
     }
   )
-}
 
 const fetchStopInfo = (stop) =>
   async function (dispatch, getState) {
     await dispatch(findStop({ stopId: stop.stopId }))
     const state = getState()
-    const { nearbyRadius: radius } = state.otp.config.stopViewer
+    const { nearbyRadius } = state.otp?.config?.stopViewer
     const fetchedStop = state.otp.transitIndex.stops?.[stop?.stopId]
     // TODO: stop not found message
     if (!fetchedStop) return
 
     const { lat, lon } = fetchedStop
-    if (radius > 0) {
+    if (nearbyRadius > 0) {
       dispatch(
         findNearbyStops(
           {
@@ -143,12 +141,14 @@ const fetchStopInfo = (stop) =>
             includeStopTimes: true,
             lat,
             lon,
-            radius
+            nearbyRadius
           },
           stop.stopId
         )
       )
-      dispatch(findNearbyAmenities({ lat, lon, radius }, stop.stopId))
+      dispatch(
+        findNearbyAmenities({ lat, lon, radius: nearbyRadius }, stop.stopId)
+      )
       dispatch(zoomToStop(fetchedStop))
     }
   }
@@ -168,8 +168,8 @@ const getVehiclePositionsForRoute = (routeId) =>
     }
   )
 
-export function findPatternsForRoute(params) {
-  return createQueryAction(
+export const findPatternsForRoute = (params) =>
+  createQueryAction(
     `index/routes/${params.routeId}/patterns?includeGeometry=true`,
     findPatternsForRouteResponse,
     findPatternsForRouteError,
@@ -205,10 +205,9 @@ export function findPatternsForRoute(params) {
       }
     }
   )
-}
 
-export function findRoute(params) {
-  return createQueryAction(
+export const findRoute = (params) =>
+  createQueryAction(
     `index/routes/${params.routeId}`,
     findRouteResponse,
     findRouteError,
@@ -221,7 +220,6 @@ export function findRoute(params) {
       }
     }
   )
-}
 
 export default {
   fetchStopInfo,
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 270bb5b6d..a2b2cf6ce 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -1,3 +1,5 @@
+import clone from 'clone'
+
 import {
   createQueryAction,
   findGeometryForTrip,
@@ -105,14 +107,14 @@ const findTrip = (params) =>
     }
   )
 
-export function vehicleRentalQuery(
+export const vehicleRentalQuery = (
   params,
   responseAction,
   errorAction,
   options
-) {
+) =>
   // TODO: ErrorsByNetwork is missing
-  return createGraphQLQueryAction(
+  createGraphQLQueryAction(
     `{
     rentalVehicles {
       vehicleId
@@ -153,7 +155,6 @@ export function vehicleRentalQuery(
       }
     }
   )
-}
 
 const stopTimeGraphQLQuery = `
 stopTimes: stoptimesForPatterns(numberOfDepartures: 3) {
@@ -411,14 +412,13 @@ const fetchStopInfo = (stop) => {
   )
 }
 
-const getVehiclePositionsForRoute = () => {
-  return function (dispatch, getState) {
+const getVehiclePositionsForRoute = () =>
+  function (dispatch, getState) {
     console.warn('OTP2 does not yet support vehicle positions for route!')
   }
-}
 
-export function findRoute(params) {
-  return function (dispatch, getState) {
+export const findRoute = (params) =>
+  function (dispatch, getState) {
     const { routeId } = params
     if (!routeId) return
 
@@ -481,8 +481,9 @@ export function findRoute(params) {
             const { route } = payload?.data
             if (!route) return
 
+            const newRoute = clone(route)
             const routePatterns = {}
-            route.patterns.forEach((pattern) => {
+            newRoute.patterns.forEach((pattern) => {
               const patternStops = pattern.stops.map((stop) => {
                 const color =
                   stop.routes?.length > 0 && `#${stop.routes[0].color}`
@@ -496,20 +497,19 @@ export function findRoute(params) {
                 stops: patternStops
               }
             })
-            route.patterns = routePatterns
+            newRoute.patterns = routePatterns
             // TODO: avoid explicit behavior shift like this
-            route.v2 = true
+            newRoute.v2 = true
 
-            return route
+            return newRoute
           }
         }
       )
     )
   }
-}
 
-export function findPatternsForRoute(params) {
-  return function (dispatch, getState) {
+export const findPatternsForRoute = (params) =>
+  function (dispatch, getState) {
     const state = getState()
     const { routeId } = params
     const route = state?.otp?.transitIndex?.routes?.[routeId]
@@ -521,7 +521,6 @@ export function findPatternsForRoute(params) {
       return dispatch(findRoute(params))
     }
   }
-}
 
 export default {
   fetchStopInfo,

From f57035336853e6aad5443594f8d65b5031f48539 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 10 Mar 2022 13:35:35 -0800
Subject: [PATCH 255/270] refactor(actions/api): make v2 field optional

---
 lib/actions/api.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 4f7eeef4f..429edc397 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -99,7 +99,7 @@ function executeOTPVersionSpecificAction(methodName, ...params) {
     const state = getState()
     const { api } = state.otp.config
     return dispatch(
-      api.v2
+      api?.v2
         ? v2Actions[methodName](...params)
         : v1Actions[methodName](...params)
     )

From 85b2db7d7a9dd6b2bfde26f7dfbad97ae2de9151 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 10 Mar 2022 13:42:06 -0800
Subject: [PATCH 256/270] refactor(actions/apiv2): fetch nearby scooter
 networks

---
 lib/actions/apiV2.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index a2b2cf6ce..d090a0bf2 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -256,6 +256,9 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
             id
             lat
             lon
+            ...on vehicleRentalStation {
+              network
+            }
           }
           distance
         }
@@ -268,6 +271,9 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
             id
             lat
             lon
+            ...on RentalVehicle {
+              network
+            }
           }
           distance
         }
@@ -309,7 +315,7 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
                 lat: edge.node?.place?.lat,
                 lon: edge.node?.place?.lon,
                 name: edge.node?.place?.id || '',
-                networks: ['null']
+                networks: [edge.node?.place?.network || 'null']
               }
             })
           },

From ef301472bb0809813dd2f3b214e1cd1e9d5152c0 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Fri, 11 Mar 2022 12:24:08 -0500
Subject: [PATCH 257/270] refactor(setLocale): Pass missing configLocales to
 locale matching fn

---
 lib/actions/ui.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 23c879bf5..e938b2ab3 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -344,7 +344,11 @@ export function setLocale(locale) {
     const { language: customMessages } = config
     const configLocales = getConfigLocales(customMessages)
     const effectiveLocale = locale || getDefaultLocale(config, loggedInUser)
-    const matchedLocale = getMatchingLocaleString(effectiveLocale, 'en-US')
+    const matchedLocale = getMatchingLocaleString(
+      effectiveLocale,
+      'en-US',
+      configLocales
+    )
     const messages = await loadLocaleData(
       matchedLocale,
       customMessages,

From ec6e0b19cc84975c74fb9e3489ca3ae5e032bce4 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 14 Mar 2022 10:39:10 -0400
Subject: [PATCH 258/270] refactor(Locale Selector): Add transparency to locale
 selector dropdown icon

---
 lib/components/app/locale-selector.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index 243bd008f..b16bff508 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -46,7 +46,9 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element => {
     <NavDropdown
       id="locale-selector"
       pullRight
-      title={<Icon style={{ color: '#fff' }} type="globe" />}
+      title={
+        <Icon style={{ color: 'rgba(255, 255, 255, 0.85)' }} type="globe" />
+      }
     >
       {Object.keys(configLanguages).map((locale) => {
         return (

From a500cbe779f68c61c9e9739c30b640641fdb2b1a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 14 Mar 2022 08:28:48 -0700
Subject: [PATCH 259/270] refactor: address pr feedback

---
 lib/actions/api.js | 14 +++++++-------
 lib/actions/ui.js  |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/actions/api.js b/lib/actions/api.js
index 429edc397..b1eadcece 100644
--- a/lib/actions/api.js
+++ b/lib/actions/api.js
@@ -94,7 +94,7 @@ function getActiveItinerary(state) {
  * @param {*} methodName    the method to execute
  * @param  {...any} params  varargs of params to send to the action
  */
-function executeOTPVersionSpecificAction(methodName, ...params) {
+function executeOTPAction(methodName, ...params) {
   return function (dispatch, getState) {
     const state = getState()
     const { api } = state.otp.config
@@ -364,7 +364,7 @@ export function vehicleRentalQuery(
   errorAction = vehicleRentalError,
   options = {}
 ) {
-  return executeOTPVersionSpecificAction(
+  return executeOTPAction(
     'vehicleRentalQuery',
     params,
     responseAction,
@@ -378,7 +378,7 @@ export const findStopResponse = createAction('FIND_STOP_RESPONSE')
 export const findStopError = createAction('FIND_STOP_ERROR')
 
 export function fetchStopInfo(stop) {
-  return executeOTPVersionSpecificAction('fetchStopInfo', stop)
+  return executeOTPAction('fetchStopInfo', stop)
 }
 
 // Single trip lookup query
@@ -387,7 +387,7 @@ export const findTripResponse = createAction('FIND_TRIP_RESPONSE')
 export const findTripError = createAction('FIND_TRIP_ERROR')
 
 export function findTrip(params) {
-  return executeOTPVersionSpecificAction('findTrip', params)
+  return executeOTPAction('findTrip', params)
 }
 
 // Stops for trip query
@@ -560,11 +560,11 @@ export const findRouteResponse = createAction('FIND_ROUTE_RESPONSE')
 export const findRouteError = createAction('FIND_ROUTE_ERROR')
 
 export function findRoute(params) {
-  return executeOTPVersionSpecificAction('findRoute', params)
+  return executeOTPAction('findRoute', params)
 }
 
 export function findPatternsForRoute(params) {
-  return executeOTPVersionSpecificAction('findPatternsForRoute', params)
+  return executeOTPAction('findPatternsForRoute', params)
 }
 
 // Geometry for Pattern lookup query
@@ -774,7 +774,7 @@ export const receivedVehiclePositionsError = createAction(
 )
 
 export function getVehiclePositionsForRoute(routeId) {
-  return executeOTPVersionSpecificAction('getVehiclePositionsForRoute', routeId)
+  return executeOTPAction('getVehiclePositionsForRoute', routeId)
 }
 
 const throttledUrls = {}
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 50a769c54..ba82b8365 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -174,7 +174,7 @@ export function matchContentToUrl(location) {
       case 'route':
         if (id) {
           // This is a bit of a hack to check if the route details have been grabbed
-          // bikesAllowed will only be populated if route details are repsent
+          // bikesAllowed will only be populated if route details are present
           // Moving away from manual requests should help resolve this
           if (!state.otp.transitIndex?.routes?.[id]?.bikesAllowed) {
             dispatch(findRoute({ routeId: id }))

From e8ff07d4c60bdb564eeb79b4e4fb28486c1da907 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 16 Mar 2022 07:22:29 -0700
Subject: [PATCH 260/270] refactor(otp-reducer): avoid crash on incomplete
 nearby scooter response

---
 lib/reducers/create-otp-reducer.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index c574b8614..ff92ee4b7 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -605,6 +605,8 @@ function createOtpReducer(config) {
         }
       case 'FIND_NEARBY_AMENITIES_RESPONSE':
         const { stopId, ...amenities } = action.payload
+        if (!stopId || !amenities) return state
+
         return update(state, {
           transitIndex: {
             stops: {

From e7a76fb39ed9e0f95b57eabaae49b4b10f1ade5e Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 17 Mar 2022 22:08:57 -0400
Subject: [PATCH 261/270] refactor(Default-itinerary, state): Sort itins w/o
 fare info last in a cost search

---
 lib/components/narrative/default/default-itinerary.js | 4 ++--
 lib/util/state.js                                     | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 395b77e05..c72fa4837 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -132,8 +132,8 @@ const ITINERARY_ATTRIBUTES = [
     order: 2,
     render: (itinerary, options, defaultFareKey = 'regular') => {
       const fareInCents = getTotalFare(itinerary, options.configCosts, defaultFareKey)
-      const fare = fareInCents == null ? null : fareInCents / 100
-      if (fare == null) return null
+      const fare = fareInCents === null ? null : fareInCents / 100
+      if (fare === null) return <div>No fare info</div>
       return (
         <FormattedNumber
           currency={options.currency}
diff --git a/lib/util/state.js b/lib/util/state.js
index a01748ecc..215e1433d 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -339,8 +339,10 @@ function sortItineraries(type, direction, a, b, config) {
       else return b.duration - a.duration
     case 'COST':
       const configCosts = config.itinerary?.costs
-      const aTotal = getTotalFare(a, configCosts)
-      const bTotal = getTotalFare(b, configCosts)
+      // Sort an itinerary without fare information last (MAX_FARE is an arbitrarily high number)
+      const MAX_FARE = 999999.99 
+      const aTotal = getTotalFare(a, configCosts) === null ? MAX_FARE : getTotalFare(a, configCosts)
+      const bTotal = getTotalFare(b, configCosts) === null ? MAX_FARE : getTotalFare(b, configCosts)
       if (direction === 'ASC') return aTotal - bTotal
       else return bTotal - aTotal
     default:

From 24adf0b688525050b8c29e7cd68a1d1248698679 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 18 Mar 2022 08:08:53 -0700
Subject: [PATCH 262/270] refactor(api_v2): stability improvements

---
 lib/actions/apiV2.js               | 24 +++++++++++++++++-------
 lib/reducers/create-otp-reducer.js |  3 +++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index d090a0bf2..67aab4695 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -75,7 +75,8 @@ const findTrip = (params) =>
           tripBikesAllowed: bikesAllowed
 
           stops {
-			      gtfsId: id
+			      id: gtfsId
+			      stopId: gtfsId
 			      code
 			      name
 			      lat
@@ -256,7 +257,7 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
             id
             lat
             lon
-            ...on vehicleRentalStation {
+            ...on VehicleRentalStation {
               network
             }
           }
@@ -315,7 +316,9 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
                 lat: edge.node?.place?.lat,
                 lon: edge.node?.place?.lon,
                 name: edge.node?.place?.id || '',
-                networks: [edge.node?.place?.network || 'null']
+                networks: [edge.node?.place?.network || 'null'],
+                x: edge.node?.place?.lon,
+                y: edge.node?.place?.lat
               }
             })
           },
@@ -328,7 +331,9 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
                 lat: edge.node?.place?.lat,
                 lon: edge.node?.place?.lon,
                 name: edge.node?.place?.id || '',
-                networks: ['null']
+                networks: ['null'],
+                x: edge.node?.place?.lon,
+                y: edge.node?.place?.lat
               }
             }
           ),
@@ -342,7 +347,9 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
                 lat: edge.node?.place?.lat,
                 lon: edge.node?.place?.lon,
                 name: edge.node?.place?.id || '',
-                networks: ['null']
+                networks: [edge.node?.place?.network || 'null'],
+                x: edge.node?.place?.lon,
+                y: edge.node?.place?.lat
               }
             })
           }
@@ -354,7 +361,10 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
 
 const fetchStopInfo = (stop) => {
   const { stopId } = stop
-  if (!stopId) return {}
+  if (!stopId)
+    return function (dispatch, getState) {
+      console.warn("No stopId passed, can't fetch stop!")
+    }
 
   return createGraphQLQueryAction(
     `{
@@ -373,7 +383,7 @@ const fetchStopInfo = (stop) => {
           return findStopError(payload.errors)
         }
         const { stop } = payload?.data
-        if (!stop) return findStopError()
+        if (!stop || !stop.lat || !stop.lon) return findStopError()
 
         // Fetch nearby stops and amenities
         // TODO: add radius from config
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index ff92ee4b7..ce02fa8f0 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -487,6 +487,8 @@ function createOtpReducer(config) {
           config: { autoPlan: { $set: action.payload.autoPlan } }
         })
       case 'SET_MAP_CENTER':
+        if (isNaN(action.payload.lat) || isNaN(action.payload.lon)) return state
+
         return update(state, {
           config: {
             map: {
@@ -740,6 +742,7 @@ function createOtpReducer(config) {
           }
         })
       case 'FIND_STOP_TIMES_FOR_TRIP_RESPONSE':
+        if (!action.payload.stopTimes) return state
         return update(state, {
           transitIndex: {
             trips: {

From 7d118588b5ff9b430fb1815db57a3877096d8cf1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 18 Mar 2022 08:15:19 -0700
Subject: [PATCH 263/270] chore(deps): update route-viewer-overlay

---
 package.json | 4 ++--
 yarn.lock    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 17402dbf4..52d2b8ef2 100644
--- a/package.json
+++ b/package.json
@@ -38,12 +38,12 @@
     "@opentripplanner/geocoder": "^1.2.1",
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
-    "@opentripplanner/location-field": "1.12.0",
     "@opentripplanner/itinerary-body": "^2.9.0",
+    "@opentripplanner/location-field": "1.12.0",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
     "@opentripplanner/printable-itinerary": "^1.3.1",
-    "@opentripplanner/route-viewer-overlay": "^1.2.1-alpha.1",
+    "@opentripplanner/route-viewer-overlay": "^1.3.0",
     "@opentripplanner/stop-viewer-overlay": "^1.1.1",
     "@opentripplanner/stops-overlay": "^3.4.0",
     "@opentripplanner/transit-vehicle-overlay": "^2.3.1",
diff --git a/yarn.lock b/yarn.lock
index b778be97c..f3b3e99e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2599,10 +2599,10 @@
     "@opentripplanner/humanize-distance" "^1.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^1.2.1-alpha.1":
-  version "1.2.1-alpha.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.2.1-alpha.1.tgz#77dea0c1030f67d1447f4bab1c8dc888cb5486bd"
-  integrity sha512-tqUREK+Su5DhvkEUnF9ADMhB/q1lafoKU0GgO6XJkKFBYkQUMXY3LIpG3BsMU4suSsDwTg3NMhJXnJKQH+QI4w==
+"@opentripplanner/route-viewer-overlay@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-1.3.0.tgz#9a50efea8c06719ff03b413e8451d7cc48f91915"
+  integrity sha512-FW0Evav6S9wf50iNrZ/gDej7VeCDUKYTQkpnAKQQFWrM1V/nIT1+oFuG9lNSpAOtlO5/HaPTGmerhnDUBwjdhA==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@opentripplanner/core-utils" "^4.5.0"

From 6ce2ced72812deab20256563e3ec0379229cef90 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Fri, 18 Mar 2022 11:43:48 -0400
Subject: [PATCH 264/270] refactor(Tabbed-itineraries): Apply no fare info to
 tabbed itins, i18n of no fare info msg

---
 i18n/en-US.yml                                |  1 +
 .../narrative/default/default-itinerary.js    |  2 +-
 .../narrative/tabbed-itineraries.js           | 77 ++++++++++++++-----
 3 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 77c5977bd..f9d170406 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -785,6 +785,7 @@ common:
     calories: "{calories, number} Cal"
     noItineraryToDisplay: No itinerary to display.
     transfers: "{transfers, plural, =0 {} one {# transfer} other {# transfers}}"
+    noTransitFareProvided: No fare info
 
   # Note to translator: the strings below are used in sentences such as:
   # "No trip found for bike, walk, and transit."
diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index c72fa4837..c71fe4f7d 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -133,7 +133,7 @@ const ITINERARY_ATTRIBUTES = [
     render: (itinerary, options, defaultFareKey = 'regular') => {
       const fareInCents = getTotalFare(itinerary, options.configCosts, defaultFareKey)
       const fare = fareInCents === null ? null : fareInCents / 100
-      if (fare === null) return <div>No fare info</div>
+      if (fare === null) return <FormattedMessage id="common.itineraryDescriptions.noTransitFareProvided" />
       return (
         <FormattedNumber
           currency={options.currency}
diff --git a/lib/components/narrative/tabbed-itineraries.js b/lib/components/narrative/tabbed-itineraries.js
index e2bb82b42..e477a3432 100644
--- a/lib/components/narrative/tabbed-itineraries.js
+++ b/lib/components/narrative/tabbed-itineraries.js
@@ -18,8 +18,12 @@ import Icon from '../util/icon'
 
 import { FLEX_COLOR } from './default/flex-indicator'
 
-const { calculateFares, calculatePhysicalActivity, getTimeZoneOffset } =
-  coreUtils.itinerary
+const {
+  calculateFares,
+  calculatePhysicalActivity,
+  getTimeZoneOffset,
+  isTransit
+} = coreUtils.itinerary
 
 const Bullet = styled.span`
   ::before {
@@ -46,15 +50,40 @@ class TabButton extends Component {
     )
     // TODO: support non-USD
     const transitFare =
-      (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare || 0
+      (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare ||
+      null
     const minTotalFare = minTNCFare * 100 + transitFare
     const startTime = itinerary.startTime + timezoneOffset
     const endTime = itinerary.endTime + timezoneOffset
     const mustCallAhead = itinerary.legs.some(
       coreUtils.itinerary.isReservationRequired
     )
+    const transitFareNotProvided = itinerary.legs.some(
+      (leg) => isTransit(leg.mode) && transitFare == null
+    )
 
     if (isActive) classNames.push('selected')
+    const newLocal = minTotalFare > 0 && (
+      <>
+        <FormattedMessage
+          id="components.TabbedItineraries.fareCost"
+          values={{
+            hasMaxFare: maxTNCFare && maxTNCFare > minTNCFare,
+            minTotalFare: (
+              <FormattedNumber
+                currency={currency}
+                currencyDisplay="narrowSymbol"
+                // This isn't a "real" style prop
+                // eslint-disable-next-line react/style-prop-object
+                style="currency"
+                value={minTotalFare / 100}
+              />
+            )
+          }}
+        />
+        <Bullet />
+      </>
+    )
     return (
       <Button
         className={classNames.join(' ')}
@@ -92,26 +121,34 @@ class TabButton extends Component {
           </span>
           {/* the fare / calories summary line */}
           <span>
-            {minTotalFare > 0 && (
+            {/* Display "No Fare Info" if there is a transit leg w/o fare information */}
+            {transitFareNotProvided ? (
               <>
-                <FormattedMessage
-                  id="components.TabbedItineraries.fareCost"
-                  values={{
-                    hasMaxFare: maxTNCFare && maxTNCFare > minTNCFare,
-                    minTotalFare: (
-                      <FormattedNumber
-                        currency={currency}
-                        currencyDisplay="narrowSymbol"
-                        // This isn't a "real" style prop
-                        // eslint-disable-next-line react/style-prop-object
-                        style="currency"
-                        value={minTotalFare / 100}
-                      />
-                    )
-                  }}
-                />
+                <FormattedMessage id="common.itineraryDescriptions.noTransitFareProvided" />
                 <Bullet />
               </>
+            ) : (
+              minTotalFare > 0 && (
+                <>
+                  <FormattedMessage
+                    id="components.TabbedItineraries.fareCost"
+                    values={{
+                      hasMaxFare: maxTNCFare && maxTNCFare > minTNCFare,
+                      minTotalFare: (
+                        <FormattedNumber
+                          currency={currency}
+                          currencyDisplay="narrowSymbol"
+                          // This isn't a "real" style prop
+                          // eslint-disable-next-line react/style-prop-object
+                          style="currency"
+                          value={minTotalFare / 100}
+                        />
+                      )
+                    }}
+                  />
+                  <Bullet />
+                </>
+              )
             )}
             <FormattedMessage
               id="common.itineraryDescriptions.calories"

From 2f4185241c0e6bcd1c7a030edf1b8a2eb074f713 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 18 Mar 2022 09:25:45 -0700
Subject: [PATCH 265/270] refactor: update typescript after merge

---
 lib/components/app/app-menu.tsx              |  2 +-
 lib/components/user/stacked-pane-display.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/lib/components/app/app-menu.tsx b/lib/components/app/app-menu.tsx
index dbdc11430..c87eae577 100644
--- a/lib/components/app/app-menu.tsx
+++ b/lib/components/app/app-menu.tsx
@@ -27,7 +27,7 @@ type AppMenuProps = {
   fieldTripEnabled?: boolean
   location: { search: string }
   mailablesEnabled?: boolean
-  reactRouterConfig: { basename: string }
+  reactRouterConfig?: { basename: string }
   resetAndToggleCallHistory?: () => void
   resetAndToggleFieldTrips?: () => void
   setMainPanelContent: (panel: number) => void
diff --git a/lib/components/user/stacked-pane-display.tsx b/lib/components/user/stacked-pane-display.tsx
index cf3150797..225bfec4f 100644
--- a/lib/components/user/stacked-pane-display.tsx
+++ b/lib/components/user/stacked-pane-display.tsx
@@ -4,6 +4,12 @@ import React, { useState } from 'react'
 import { PageHeading, StackedPaneContainer } from './styled'
 import FormNavigationButtons from './form-navigation-buttons'
 
+type Props = {
+  onCancel: () => void
+  paneSequence: any[]
+  title?: string | JSX.Element
+}
+
 /**
  * This component handles the flow between screens for new OTP user accounts.
  *
@@ -13,11 +19,7 @@ const StackedPaneDisplay = ({
   onCancel,
   paneSequence,
   title
-}: {
-  onCancel: () => void
-  paneSequence: any[]
-  title?: string | JSX.Element
-}): JSX.Element => {
+}: Props): JSX.Element => {
   // Create indicator of if cancel button was clicked so that child components can know
   const [isBeingCanceled, updateBeingCanceled] = useState(false)
 

From 3d3e42dbe5f5f3fde91717ab8f46e34b99f56359 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 21 Mar 2022 17:23:44 -0400
Subject: [PATCH 266/270] chore(i18n): Match up FR messages, sort messages.

---
 i18n/en-US.yml | 3 ++-
 i18n/fr.yml    | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index f9d170406..31ea728df 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -784,8 +784,9 @@ common:
   itineraryDescriptions:
     calories: "{calories, number} Cal"
     noItineraryToDisplay: No itinerary to display.
-    transfers: "{transfers, plural, =0 {} one {# transfer} other {# transfers}}"
+    # Note to translator: noTransitFareProvided is width-constrained.
     noTransitFareProvided: No fare info
+    transfers: "{transfers, plural, =0 {} one {# transfer} other {# transfers}}"
 
   # Note to translator: the strings below are used in sentences such as:
   # "No trip found for bike, walk, and transit."
diff --git a/i18n/fr.yml b/i18n/fr.yml
index d6c57601e..984fb9bdf 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -734,6 +734,8 @@ common:
   itineraryDescriptions:
     calories: "{calories, number} kcal" # SI unit
     noItineraryToDisplay: Aucun trajet à afficher.
+    # Note to translator: noTransitFareProvided is width-constrained.
+    noTransitFareProvided: Tarif inconnu 
     transfers: "{transfers, plural, =0 {} one {# correspondance} other {# correspondances}}"
 
   # Note to translator: some of the strings below are used in sentences such as:

From 957ec4c2f601116e46a7c4cafa3b1e03ba7337bd Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Tue, 22 Mar 2022 16:12:24 -0400
Subject: [PATCH 267/270] refactor(Itins, state): Revert dev merge & address PR
 comments

---
 lib/components/narrative/default/default-itinerary.js | 4 +---
 lib/components/narrative/tabbed-itineraries.js        | 1 -
 lib/util/state.js                                     | 5 ++---
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index c71fe4f7d..11ca4ace9 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -139,9 +139,7 @@ const ITINERARY_ATTRIBUTES = [
           currency={options.currency}
           currencyDisplay='narrowSymbol'
           style='currency'
-          value={
-            fareInCents / 100
-          }
+          value={fare} 
         />
       )
     }
diff --git a/lib/components/narrative/tabbed-itineraries.js b/lib/components/narrative/tabbed-itineraries.js
index e477a3432..ea16df949 100644
--- a/lib/components/narrative/tabbed-itineraries.js
+++ b/lib/components/narrative/tabbed-itineraries.js
@@ -48,7 +48,6 @@ class TabButton extends Component {
       itinerary,
       true
     )
-    // TODO: support non-USD
     const transitFare =
       (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare ||
       null
diff --git a/lib/util/state.js b/lib/util/state.js
index 215e1433d..131d055a3 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -340,9 +340,8 @@ function sortItineraries(type, direction, a, b, config) {
     case 'COST':
       const configCosts = config.itinerary?.costs
       // Sort an itinerary without fare information last (MAX_FARE is an arbitrarily high number)
-      const MAX_FARE = 999999.99 
-      const aTotal = getTotalFare(a, configCosts) === null ? MAX_FARE : getTotalFare(a, configCosts)
-      const bTotal = getTotalFare(b, configCosts) === null ? MAX_FARE : getTotalFare(b, configCosts)
+      const aTotal = getTotalFare(a, configCosts) === null ? Number.MAX_VALUE : getTotalFare(a, configCosts)
+      const bTotal = getTotalFare(b, configCosts) === null ? Number.MAX_VALUE : getTotalFare(b, configCosts)
       if (direction === 'ASC') return aTotal - bTotal
       else return bTotal - aTotal
     default:

From 8ea612db5873329d34ba8f23582e1e4c806c69a2 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 23 Mar 2022 13:17:27 -0400
Subject: [PATCH 268/270] refactor(Itinerary components): Use itinerary fare
 currency code in formatted currency

---
 lib/components/narrative/default/default-itinerary.js | 5 ++++-
 lib/components/narrative/tabbed-itineraries.js        | 4 +++-
 lib/util/state.js                                     | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 11ca4ace9..9cc5aff8d 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -131,12 +131,15 @@ const ITINERARY_ATTRIBUTES = [
     id: 'cost',
     order: 2,
     render: (itinerary, options, defaultFareKey = 'regular') => {
+      debugger
       const fareInCents = getTotalFare(itinerary, options.configCosts, defaultFareKey)
+      const fareCurrency = itinerary.fare?.fare?.regular?.currency?.currencyCode
       const fare = fareInCents === null ? null : fareInCents / 100
       if (fare === null) return <FormattedMessage id="common.itineraryDescriptions.noTransitFareProvided" />
       return (
         <FormattedNumber
-          currency={options.currency}
+          // Currency from itinerary fare or from config.
+          currency={fareCurrency || options.currency}
           currencyDisplay='narrowSymbol'
           style='currency'
           value={fare} 
diff --git a/lib/components/narrative/tabbed-itineraries.js b/lib/components/narrative/tabbed-itineraries.js
index ea16df949..72fca06e5 100644
--- a/lib/components/narrative/tabbed-itineraries.js
+++ b/lib/components/narrative/tabbed-itineraries.js
@@ -51,6 +51,7 @@ class TabButton extends Component {
     const transitFare =
       (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare ||
       null
+    const fareCurrency = itinerary.fare?.fare?.regular?.currency?.currencyCode
     const minTotalFare = minTNCFare * 100 + transitFare
     const startTime = itinerary.startTime + timezoneOffset
     const endTime = itinerary.endTime + timezoneOffset
@@ -70,7 +71,8 @@ class TabButton extends Component {
             hasMaxFare: maxTNCFare && maxTNCFare > minTNCFare,
             minTotalFare: (
               <FormattedNumber
-                currency={currency}
+                // Currency from itinerary fare or from config.
+                currency={fareCurrency || currency}
                 currencyDisplay="narrowSymbol"
                 // This isn't a "real" style prop
                 // eslint-disable-next-line react/style-prop-object
diff --git a/lib/util/state.js b/lib/util/state.js
index 131d055a3..5f93747f0 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -339,7 +339,7 @@ function sortItineraries(type, direction, a, b, config) {
       else return b.duration - a.duration
     case 'COST':
       const configCosts = config.itinerary?.costs
-      // Sort an itinerary without fare information last (MAX_FARE is an arbitrarily high number)
+      // Sort an itinerary without fare information last
       const aTotal = getTotalFare(a, configCosts) === null ? Number.MAX_VALUE : getTotalFare(a, configCosts)
       const bTotal = getTotalFare(b, configCosts) === null ? Number.MAX_VALUE : getTotalFare(b, configCosts)
       if (direction === 'ASC') return aTotal - bTotal

From d9c5b8309c89e75580bfaac4e812dbd10f4bda29 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Wed, 23 Mar 2022 17:39:06 -0400
Subject: [PATCH 269/270] refactor(Itinerary Components): Address PR comments

---
 lib/components/narrative/default/default-itinerary.js | 1 -
 lib/components/narrative/tabbed-itineraries.js        | 7 ++++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 9cc5aff8d..b4f5a288a 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -131,7 +131,6 @@ const ITINERARY_ATTRIBUTES = [
     id: 'cost',
     order: 2,
     render: (itinerary, options, defaultFareKey = 'regular') => {
-      debugger
       const fareInCents = getTotalFare(itinerary, options.configCosts, defaultFareKey)
       const fareCurrency = itinerary.fare?.fare?.regular?.currency?.currencyCode
       const fare = fareInCents === null ? null : fareInCents / 100
diff --git a/lib/components/narrative/tabbed-itineraries.js b/lib/components/narrative/tabbed-itineraries.js
index 72fca06e5..5e9d2d211 100644
--- a/lib/components/narrative/tabbed-itineraries.js
+++ b/lib/components/narrative/tabbed-itineraries.js
@@ -51,7 +51,8 @@ class TabButton extends Component {
     const transitFare =
       (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare ||
       null
-    const fareCurrency = itinerary.fare?.fare?.regular?.currency?.currencyCode
+    const fareCurrency =
+      itinerary.fare?.fare?.regular?.currency?.currencyCode || currency
     const minTotalFare = minTNCFare * 100 + transitFare
     const startTime = itinerary.startTime + timezoneOffset
     const endTime = itinerary.endTime + timezoneOffset
@@ -72,7 +73,7 @@ class TabButton extends Component {
             minTotalFare: (
               <FormattedNumber
                 // Currency from itinerary fare or from config.
-                currency={fareCurrency || currency}
+                currency={fareCurrency}
                 currencyDisplay="narrowSymbol"
                 // This isn't a "real" style prop
                 // eslint-disable-next-line react/style-prop-object
@@ -137,7 +138,7 @@ class TabButton extends Component {
                       hasMaxFare: maxTNCFare && maxTNCFare > minTNCFare,
                       minTotalFare: (
                         <FormattedNumber
-                          currency={currency}
+                          currency={fareCurrency}
                           currencyDisplay="narrowSymbol"
                           // This isn't a "real" style prop
                           // eslint-disable-next-line react/style-prop-object

From 1633f44c8867253ba13bd0d9c0aed65a4043da92 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 24 Mar 2022 11:40:29 -0700
Subject: [PATCH 270/270] refactor: correct typo and correctly render stop
 depature times

---
 lib/actions/apiV2.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 67aab4695..41767d454 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -170,7 +170,7 @@ stopTimes: stoptimesForPatterns(numberOfDepartures: 3) {
     headsign
     realtime
     realtimeArrival
-    realtimeArrival
+    realtimeDeparture
     realtimeState
     scheduledArrival
     scheduledDeparture