Fix schedule view input

__tests__/components/viewers/__snapshots__/stop-viewer.js.snap

@@ -101,6 +101,8 @@ exports[`components > viewers > stop viewer should render countdown times after
         >
           <StopViewer
             autoRefreshStopTimes={true}
+            calendarMax="2024-12-31"
+            calendarMin="2023-01-01"
             enableFavoriteStops={false}
             favoriteStops={Array []}
             fetchStopInfo={[Function]}
@@ -353,6 +355,11 @@ exports[`components > viewers > stop viewer should render countdown times after
                   }
                 />
               </Connect(PageTitle)>
+              <Connect(ServiceTimeRangeRetriever)>
+                <ServiceTimeRangeRetriever
+                  retrieveServiceTimeRangeIfNeeded={[Function]}
+                />
+              </Connect(ServiceTimeRangeRetriever)>
               <div
                 className="stop-viewer-header"
               >
@@ -2813,6 +2820,8 @@ exports[`components > viewers > stop viewer should render countdown times for st
         >
           <StopViewer
             autoRefreshStopTimes={true}
+            calendarMax="2024-12-31"
+            calendarMin="2023-01-01"
             enableFavoriteStops={false}
             favoriteStops={Array []}
             fetchStopInfo={[Function]}
@@ -2966,6 +2975,11 @@ exports[`components > viewers > stop viewer should render countdown times for st
                   }
                 />
               </Connect(PageTitle)>
+              <Connect(ServiceTimeRangeRetriever)>
+                <ServiceTimeRangeRetriever
+                  retrieveServiceTimeRangeIfNeeded={[Function]}
+                />
+              </Connect(ServiceTimeRangeRetriever)>
               <div
                 className="stop-viewer-header"
               >
@@ -4524,6 +4538,8 @@ exports[`components > viewers > stop viewer should render times after midnight w
         >
           <StopViewer
             autoRefreshStopTimes={true}
+            calendarMax="2024-12-31"
+            calendarMin="2023-01-01"
             enableFavoriteStops={false}
             favoriteStops={Array []}
             fetchStopInfo={[Function]}
@@ -4776,6 +4792,11 @@ exports[`components > viewers > stop viewer should render times after midnight w
                   }
                 />
               </Connect(PageTitle)>
+              <Connect(ServiceTimeRangeRetriever)>
+                <ServiceTimeRangeRetriever
+                  retrieveServiceTimeRangeIfNeeded={[Function]}
+                />
+              </Connect(ServiceTimeRangeRetriever)>
               <div
                 className="stop-viewer-header"
               >
@@ -7279,6 +7300,8 @@ exports[`components > viewers > stop viewer should render with OTP transit index
         >
           <StopViewer
             autoRefreshStopTimes={true}
+            calendarMax="2024-12-31"
+            calendarMin="2023-01-01"
             enableFavoriteStops={false}
             favoriteStops={Array []}
             fetchStopInfo={[Function]}
@@ -7789,6 +7812,11 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                   }
                 />
               </Connect(PageTitle)>
+              <Connect(ServiceTimeRangeRetriever)>
+                <ServiceTimeRangeRetriever
+                  retrieveServiceTimeRangeIfNeeded={[Function]}
+                />
+              </Connect(ServiceTimeRangeRetriever)>
               <div
                 className="stop-viewer-header"
               >
@@ -13935,6 +13963,8 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
         >
           <StopViewer
             autoRefreshStopTimes={true}
+            calendarMax="2024-12-31"
+            calendarMin="2023-01-01"
             enableFavoriteStops={false}
             favoriteStops={Array []}
             fetchStopInfo={[Function]}
@@ -14440,6 +14470,11 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                   }
                 />
               </Connect(PageTitle)>
+              <Connect(ServiceTimeRangeRetriever)>
+                <ServiceTimeRangeRetriever
+                  retrieveServiceTimeRangeIfNeeded={[Function]}
+                />
+              </Connect(ServiceTimeRangeRetriever)>
               <div
                 className="stop-viewer-header"
               >
@@ -18461,6 +18496,8 @@ exports[`components > viewers > stop viewer should render with initial stop id a
         >
           <StopViewer
             autoRefreshStopTimes={true}
+            calendarMax="2024-12-31"
+            calendarMin="2023-01-01"
             enableFavoriteStops={false}
             favoriteStops={Array []}
             fetchStopInfo={[Function]}
@@ -18548,6 +18585,11 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                   }
                 />
               </Connect(PageTitle)>
+              <Connect(ServiceTimeRangeRetriever)>
+                <ServiceTimeRangeRetriever
+                  retrieveServiceTimeRangeIfNeeded={[Function]}
+                />
+              </Connect(ServiceTimeRangeRetriever)>
               <div
                 className="stop-viewer-header"
               >

lib/actions/apiV2.js

@@ -2,6 +2,7 @@ import {
   aggregateModes,
   populateSettingWithValue
 } from '@opentripplanner/trip-form'
+import { createAction } from 'redux-actions'
 import { decodeQueryParams, DelimitedArrayParam } from 'use-query-params'
 import clone from 'clone'
 import coreUtils from '@opentripplanner/core-utils'
@@ -976,13 +977,39 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
   }
 }
 
+const requestingServiceTimeRange = createAction('SERVICE_TIME_RANGE_REQUEST')
+const receivedServiceTimeRange = createAction('SERVICE_TIME_RANGE_RESPONSE')
+const receivedServiceTimeRangeError = createAction('SERVICE_TIME_RANGE_ERROR')
+
+/** Queries for service time range. */
+const retrieveServiceTimeRangeIfNeeded = () =>
+  function (dispatch, getState) {
+    if (getState().otp.serviceTimeRange) return
+    dispatch(requestingServiceTimeRange)
+    return dispatch(
+      createGraphQLQueryAction(
+        `{
+          serviceTimeRange {
+            start
+            end
+          }
+        }`,
+        {},
+        receivedServiceTimeRange,
+        receivedServiceTimeRangeError,
+        {}
+      )
+    )
+  }
+
 export default {
   fetchStopInfo,
   findPatternsForRoute,
   findRoute,
   findRoutes,
   findTrip,
   getVehiclePositionsForRoute,
+  retrieveServiceTimeRangeIfNeeded,
   routingQuery,
   vehicleRentalQuery
 }

lib/components/util/service-time-range-retriever.ts

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux'
+import { useEffect } from 'react'
+
+import apiActionsV2 from '../../actions/apiV2'
+
+interface Props {
+  retrieveServiceTimeRangeIfNeeded: () => void
+}
+
+/**
+ * Invisible component that retrieves the date range available
+ * for OTP planning and schedule retrieval.
+ */
+const ServiceTimeRangeRetriever = ({
+  retrieveServiceTimeRangeIfNeeded
+}: Props): null => {
+  // If not already done, retrieve the OTP available date range on mount.
+  useEffect(() => {
+    retrieveServiceTimeRangeIfNeeded()
+  }, [retrieveServiceTimeRangeIfNeeded])
+
+  // Component renders nothing
+  return null
+}
+
+// Connect to redux
+const mapDispatchToProps = {
+  retrieveServiceTimeRangeIfNeeded:
+    apiActionsV2.retrieveServiceTimeRangeIfNeeded
+}
+
+export default connect(null, mapDispatchToProps)(ServiceTimeRangeRetriever)

lib/components/viewers/stop-viewer.js

@@ -4,8 +4,9 @@ import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { Calendar } from '@styled-icons/fa-solid/Calendar'
 import { Clock } from '@styled-icons/fa-regular/Clock'
 import { connect } from 'react-redux'
-import { format } from 'date-fns-tz'
+import { format, parse } from 'date-fns'
 import { FormattedMessage, injectIntl } from 'react-intl'
+import { format as formatTz, utcToZonedTime } from 'date-fns-tz'
 import { InfoCircle } from '@styled-icons/fa-solid/InfoCircle'
 import { Search } from '@styled-icons/fa-solid/Search'
 import { Star as StarRegular } from '@styled-icons/fa-regular/Star'
@@ -24,10 +25,11 @@ import * as userActions from '../../actions/user'
 import { getPersistenceMode } from '../../util/user'
 import { getShowUserSettings, getStopViewerConfig } from '../../util/state'
 import { Icon, IconWithText, StyledIconWrapper } from '../util/styledIcon'
-import { navigateBack } from '../../util/ui'
+import { isBlank, navigateBack } from '../../util/ui'
 import { stopIsFlex } from '../../util/viewer'
 import OperatorLogo from '../util/operator-logo'
 import PageTitle from '../util/page-title'
+import ServiceTimeRangeRetriever from '../util/service-time-range-retriever'
 import Strong from '../util/strong-text'
 import withMap from '../map/with-map'
 
@@ -36,9 +38,13 @@ import StopScheduleTable from './stop-schedule-table'
 
 const { getCurrentDate, getUserTimezone } = coreUtils.time
 
+/** The native date format used with <input type="date" /> elements */
+const inputDateFormat = 'yyyy-MM-dd'
+
 function getDefaultState(timeZone) {
   return {
     // Compare dates/times in the stop viewer based on the agency's timezone.
+    // TODO: mock this date for percy tests.
     date: getCurrentDate(timeZone),
     isShowingSchedule: false
   }
@@ -180,8 +186,16 @@ class StopViewer extends Component {
   }
 
   handleDateChange = (evt) => {
+    // Check for non-empty date, and that date is within range before making request.
+    // (Users can enter a date outside of the range using the Up/Down arrow keys in Firefox and Safari.)
     const date = evt.target.value
-    this._findStopTimesForDate(date)
+    if (!isBlank(date)) {
+      const { calendarMax, calendarMin } = this.props
+      // Lazily using lexicographic order ("2023-04-01" > "2023-01-01")
+      if (date >= calendarMin && date <= calendarMax) {
+        this._findStopTimesForDate(date)
+      }
+    }
     this.setState({ date })
   }
 
@@ -272,11 +286,11 @@ class StopViewer extends Component {
 
   /**
    * Plan trip from/to here buttons, plus the schedule/next arrivals toggle.
-   * TODO: Can this use SetFromToButtons?
    */
   _renderControls = () => {
-    const { homeTimezone, intl, stopData } = this.props
-    const { isShowingSchedule } = this.state
+    const { calendarMax, calendarMin, homeTimezone, intl, stopData } =
+      this.props
+    const { date, isShowingSchedule } = this.state
     const inHomeTimezone = homeTimezone && homeTimezone === getUserTimezone()
 
     // Rewrite stop ID to not include Agency prefix, if present
@@ -292,11 +306,21 @@ class StopViewer extends Component {
 
     let timezoneWarning
     if (!inHomeTimezone) {
-      const timezoneCode = format(Date.now(), 'z', {
-        // To avoid ambiguities for now, use the English-US timezone abbreviations ("EST", "PDT", etc.)
-        locale: dateFnsUSLocale,
-        timeZone: homeTimezone
-      })
+      // In schedule view, the time zone code should be that of the entered date,
+      // or the current day in the live view.
+      // This is to account for daylight time changes, especially when the live and
+      // schedule views are in different daylight saving periods.
+      const timezoneCode = formatTz(
+        isShowingSchedule && date
+          ? parse(date, inputDateFormat, new Date())
+          : new Date(), // TODO: mock for percy tests,
+        'z',
+        {
+          // To avoid ambiguities for now, use the English-US timezone abbreviations ("EST", "PDT", etc.)
+          locale: dateFnsUSLocale,
+          timeZone: homeTimezone
+        }
+      )
 
       // Display a banner about the departure timezone if user's timezone is not the configured 'homeTimezone'
       // (e.g. cases where a user in New York looks at a schedule in Los Angeles).
@@ -361,6 +385,8 @@ class StopViewer extends Component {
               id: 'components.StopViewer.findSchedule'
             })}
             className="pull-right"
+            max={calendarMax}
+            min={calendarMin}
             onChange={this.handleDateChange}
             onKeyDown={this.props.onKeyDown}
             required
@@ -453,6 +479,7 @@ class StopViewer extends Component {
     return (
       <div className="stop-viewer base-color-bg">
         <PageTitle title={this.getTitle()} />
+        <ServiceTimeRangeRetriever />
         {/* Header Block */}
         {this._renderHeader(agencyCount)}
 
@@ -475,7 +502,7 @@ class StopViewer extends Component {
 const mapStateToProps = (state) => {
   const showUserSettings = getShowUserSettings(state)
   const stopViewerConfig = getStopViewerConfig(state)
-  const { config, transitIndex, ui } = state.otp
+  const { config, serviceTimeRange = {}, transitIndex, ui } = state.otp
   const { homeTimezone, language, persistence, stopViewer, transitOperators } =
     config
   const { autoRefreshStopTimes = true, favoriteStops } = state.user.localUser
@@ -484,8 +511,33 @@ const mapStateToProps = (state) => {
   const nearbyStops = Array.from(new Set(stopData?.nearbyStops))?.map(
     (stopId) => stopLookup[stopId]
   )
+  const now = new Date()
+  const thisYear = now.getFullYear()
+  const { end = 0, start = 0 } = serviceTimeRange
+  // If start is not provided, default to the first day of the current calendar year in the user's timezone.
+  // (No timezone conversion is needed in this case.)
+  // If start is provided in OTP, convert that date in the agency's home time zone.
+  const calendarMin = format(
+    start
+      ? utcToZonedTime(start * 1000, homeTimezone)
+      : new Date(thisYear, 0, 1),
+    inputDateFormat
+  )
+  // If end is not provided, default to the last day of the next calendar year in the user's timezone.
+  // (No timezone conversion is needed in this case.)
+  // If end date is provided and falls at midnight agency time,
+  // use the previous second to get the last service day available.
+  const calendarMax = format(
+    end
+      ? utcToZonedTime((end - 1) * 1000, homeTimezone)
+      : new Date(thisYear + 1, 11, 31),
+    inputDateFormat
+  )
+
   return {
     autoRefreshStopTimes,
+    calendarMax,
+    calendarMin,
     enableFavoriteStops: getPersistenceMode(persistence).isLocalStorage,
     favoriteStops,
     homeTimezone,

lib/reducers/create-otp-reducer.js

@@ -1088,6 +1088,18 @@ function createOtpReducer(config) {
             }
           }
         })
+      case 'SERVICE_TIME_RANGE_REQUEST':
+        return update(state, {
+          serviceTimeRange: { $set: { pending: true } }
+        })
+      case 'SERVICE_TIME_RANGE_RESPONSE':
+        return update(state, {
+          serviceTimeRange: { $set: action.payload.data.serviceTimeRange }
+        })
+      case 'SERVICE_TIME_RANGE_ERROR':
+        return update(state, {
+          serviceTimeRange: { $set: { error: true } }
+        })
       default:
         return state
     }