Merge branch 'dev' into pass-render-other-first

__tests__/components/__snapshots__/date-time-options.js.snap

@@ -28,8 +28,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="12a"
         timeFormat="h:mm a"
       >
@@ -145,8 +151,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="12p"
         timeFormat="h:mm a"
       >
@@ -262,8 +274,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="133"
         timeFormat="h:mm a"
       >
@@ -379,8 +397,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="133p"
         timeFormat="h:mm a"
       >
@@ -496,8 +520,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="135p"
         timeFormat="h:mm a"
       >
@@ -613,8 +643,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="1335"
         timeFormat="h:mm a"
       >
@@ -730,8 +766,14 @@ exports[`components > form > call-taker > date time options should render 1`] =
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="12:34"
         timeFormat="h:mm a"
       >

__tests__/components/date-time-options.js

@@ -1,3 +1,4 @@
+import '../test-utils/mock-window-matchMedia'
 import '../test-utils/mock-window-url'
 import {
   getMockInitialState,

__tests__/test-utils/mock-window-matchMedia.js

@@ -0,0 +1,7 @@
+const mockedMediaQuery = jest.fn()
+mockedMediaQuery.mockReturnValue({ matches: [] })
+
+Object.defineProperty(window, 'matchMedia', {
+  value: mockedMediaQuery,
+  writable: true
+})

lib/components/form/call-taker/date-time-picker.tsx

@@ -1,12 +1,16 @@
 import { connect } from 'react-redux'
-import { format, toDate } from 'date-fns-tz'
+import { format, OptionsWithTZ, toDate } from 'date-fns-tz'
 import { getCurrentTime } from '@opentripplanner/core-utils/lib/time'
 import { IntlShape, useIntl } from 'react-intl'
 import { isMatch, parse } from 'date-fns'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { useEffect, useRef, useState } from 'react'
 
+import { AppReduxState, FilterType, SortType } from '../../../util/state-types'
+import { DepartArriveTypeMap, DepartArriveValue } from '../date-time-modal'
+import { updateItineraryFilter } from '../../../actions/narrative'
+
 const { getCurrentDate, OTP_API_DATE_FORMAT, OTP_API_TIME_FORMAT } =
   coreUtils.time
 
@@ -56,7 +60,7 @@ const SUPPORTED_TIME_FORMATS = [
   'HH:mm'
 ]
 
-const safeFormat = (date: Date | '', time: string, options: any) => {
+const safeFormat = (date: Date | '', time: string, options?: OptionsWithTZ) => {
   if (date === '') return ''
   try {
     return format(date, time, options)
@@ -68,8 +72,9 @@ const safeFormat = (date: Date | '', time: string, options: any) => {
 
 type Props = {
   date?: string
-  departArrive?: string
+  departArrive?: DepartArriveValue
   homeTimezone: string
+  importedUpdateItineraryFilter: (payload: FilterType) => void
   onKeyDown: () => void
   setQueryParam: ({
     date,
@@ -80,6 +85,8 @@ type Props = {
     departArrive: string
     time: string
   }) => void
+  sort: SortType
+  syncSortWithDepartArrive?: boolean
   time?: string
   timeFormat: string
 }
@@ -101,12 +108,15 @@ const DateTimeOptions = ({
   date: initialDate,
   departArrive: initialDepartArrive,
   homeTimezone,
+  importedUpdateItineraryFilter,
   onKeyDown,
   setQueryParam,
+  sort,
+  syncSortWithDepartArrive,
   time: initialTime,
   timeFormat
 }: Props) => {
-  const [departArrive, setDepartArrive] = useState(
+  const [departArrive, setDepartArrive] = useState<DepartArriveValue>(
     initialDate || initialTime ? 'DEPART' : 'NOW'
   )
   const [date, setDate] = useState<string | undefined>(initialDate)
@@ -187,6 +197,18 @@ const DateTimeOptions = ({
         })
       })
     }
+
+    if (
+      syncSortWithDepartArrive &&
+      DepartArriveTypeMap[departArrive] !== sort.type
+    ) {
+      importedUpdateItineraryFilter({
+        sort: {
+          ...sort,
+          type: DepartArriveTypeMap[departArrive]
+        }
+      })
+    }
   }, [dateTime, departArrive, homeTimezone, setQueryParam])
 
   // Handler for updating the time and date fields when NOW is selected
@@ -209,8 +231,8 @@ const DateTimeOptions = ({
   return (
     <>
       <select
-        onBlur={(e) => setDepartArrive(e.target.value)}
-        onChange={(e) => setDepartArrive(e.target.value)}
+        onBlur={(e) => setDepartArrive(e.target.value as DepartArriveValue)}
+        onChange={(e) => setDepartArrive(e.target.value as DepartArriveValue)}
         onKeyDown={onKeyDown}
         value={departArrive}
       >
@@ -282,12 +304,19 @@ const DateTimeOptions = ({
 }
 
 // connect to the redux store
-const mapStateToProps = (state: any) => {
-  const { dateTime, homeTimezone } = state.otp.config
+const mapStateToProps = (state: AppReduxState) => {
+  const { dateTime, homeTimezone, itinerary } = state.otp.config
+  const syncSortWithDepartArrive = itinerary?.syncSortWithDepartArrive
+  const { sort } = state.otp.filter
   return {
     homeTimezone,
+    sort,
+    syncSortWithDepartArrive,
     timeFormat: dateTime?.timeFormat || 'h:mm a'
   }
 }
+const mapDispatchToProps = {
+  importedUpdateItineraryFilter: updateItineraryFilter
+}
 
-export default connect(mapStateToProps)(DateTimeOptions)
+export default connect(mapStateToProps, mapDispatchToProps)(DateTimeOptions)

lib/components/form/date-time-modal.tsx

@@ -21,9 +21,9 @@ type Props = {
   updateItineraryFilter: (payload: FilterType) => void
 }
 
-type DepartArriveValue = 'NOW' | 'DEPART' | 'ARRIVE'
+export type DepartArriveValue = 'NOW' | 'DEPART' | 'ARRIVE'
 
-const DepartArriveTypeMap: Record<
+export const DepartArriveTypeMap: Record<
   DepartArriveValue,
   FilterType['sort']['type']
 > = {

lib/components/map/default-map.tsx

@@ -319,6 +319,9 @@ class DefaultMap extends Component {
     const baseLayerUrls = baseLayersWithNames?.map((bl) => bl.url)
     const baseLayerNames = baseLayersWithNames?.map((bl) => bl.name)
 
+    const routeBasedTransitVehicleOverlayNameOverride =
+      overlays?.find((o) => o.type === 'vehicles-one-route')?.name || undefined
+
     return (
       <MapContainer className="percy-hide">
         <BaseMap
@@ -342,7 +345,13 @@ class DefaultMap extends Component {
           {/* The default overlays */}
           <EndpointsOverlay />
           <RouteViewerOverlay />
-          <TransitVehicleOverlay ModeIcon={ModeIcon} />
+          <TransitVehicleOverlay
+            id={routeBasedTransitVehicleOverlayNameOverride}
+            key={routeBasedTransitVehicleOverlayNameOverride}
+            ModeIcon={ModeIcon}
+            name={routeBasedTransitVehicleOverlayNameOverride}
+            visible
+          />
           <GeolocateControl
             onGeolocate={() => {
               getCurrentPosition(intl)