Merge branch 'dev' into fix-position-on-safari

__tests__/reducers/__snapshots__/create-otp-reducer.js.snap

@@ -83,6 +83,9 @@ Object {
   },
   "ui": Object {
     "diagramLeg": null,
+    "errors": Object {
+      "networkConnectionLost": false,
+    },
     "locale": null,
     "localizedMessages": null,
     "mainPanelContent": null,

example-config.yml

@@ -353,6 +353,8 @@ itinerary:
   showPlanFirstLastButtons: false
   # adds the 'about' and '~' prefixes to the duration of non transit legs and trip details panel
   showApproximatePrefixAccessLegs: false
+  # Whether to show the effective date and time of alerts
+  showAlertEffectiveDateTimeText: true
   # Show all walking legs regardless of distance
   showAllWalkLegs: false
   # Filters out trips returned by OTP by default, unless specifically requested.

i18n/en-US.yml

@@ -183,6 +183,8 @@ components:
     closeMenu: Close Menu
     fieldTrip: Field Trip
     mailables: Mailables
+    networkConnectionLost: Network connection lost
+    networkConnectionRestored: Network connection restored
     openMenu: Open Menu
     skipNavigation: Skip navigation
   BackToTripPlanner:

i18n/fr.yml

@@ -194,6 +194,8 @@ components:
     closeMenu: Fermer le menu
     fieldTrip: Groupes scolaires
     mailables: Prêt-à-poster
+    networkConnectionLost: Erreur de connexion réseau
+    networkConnectionRestored: Connexion réseau restaurée
     openMenu: Ouvrir le menu
     skipNavigation: Sauter la navigation
   BackToTripPlanner:

lib/actions/ui.js

@@ -47,6 +47,9 @@ const viewRoute = createAction('SET_VIEWED_ROUTE')
 export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
 const settingItineraryView = createAction('SET_ITINERARY_VIEW')
 export const setPopupContent = createAction('SET_POPUP_CONTENT')
+export const setNetworkConnectionLost = createAction(
+  'SET_NETWORK_CONNECTION_LOST'
+)
 
 // This code-less action calls the reducer code
 // and thus resets the session timeout.

lib/components/app/app.css

@@ -338,6 +338,9 @@
   height: 100%;
   width: 100%;
 }
+.otp .navbar {
+  z-index: 25;
+}
 
 /** These changes kick in when the map is hidden. These rules ensure that the entire "sidebar"
     (which at this point fills the entire screen) scrolls as a single unit.

lib/components/app/desktop-nav.tsx

@@ -13,6 +13,7 @@ import { DEFAULT_APP_TITLE } from '../../util/constants'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import NavLoginButtonAuth0 from '../user/nav-login-button-auth0'
 
+import { NetworkConnectionBanner } from './network-connection-banner'
 import AppMenu, { Icon } from './app-menu'
 import LocaleSelector from './locale-selector'
 import NavbarItem from './nav-item'
@@ -59,6 +60,7 @@ const NavItemOnLargeScreens = styled(NavbarItem)`
 // Typscript TODO: otpConfig type
 export type Props = {
   locale: string
+  networkConnectionLost: boolean
   otpConfig: AppConfig
   popupTarget?: string
   setPopupContent: (url: string) => void
@@ -79,6 +81,7 @@ export type Props = {
  */
 const DesktopNav = ({
   locale,
+  networkConnectionLost,
   otpConfig,
   popupTarget,
   setPopupContent
@@ -158,15 +161,18 @@ const DesktopNav = ({
           </StyledNav>
         </Navbar.Header>
       </Navbar>
+      <NetworkConnectionBanner networkConnectionLost={networkConnectionLost} />
     </header>
   )
 }
 
 // connect to the redux store
 const mapStateToProps = (state: AppReduxState) => {
   const { config: otpConfig } = state.otp
+  const { networkConnectionLost } = state.otp.ui.errors
   return {
     locale: state.otp.ui.locale,
+    networkConnectionLost,
     otpConfig,
     popupTarget: otpConfig.popups?.launchers?.toolbar
   }

lib/components/app/network-connection-banner.tsx

@@ -0,0 +1,83 @@
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { FormattedMessage } from 'react-intl'
+import React, { useRef } from 'react'
+import styled from 'styled-components'
+
+import { RED_ON_WHITE } from '../util/colors'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
+
+const containerClassname = 'network-connection-banner'
+const timeout = 250
+
+const TransitionStyles = styled.div`
+  .${containerClassname} {
+    background: ${RED_ON_WHITE};
+    border-left: 1px solid #e7e7e7;
+    border-right: 1px solid #e7e7e7;
+    color: #fff;
+    font-weight: 600;
+    padding: 5px;
+    position: absolute;
+    text-align: center;
+    top: 50px;
+    width: 100%;
+    // When banner is fully loaded, set z-index higher than nav so we're not seeing the nav border.
+    z-index: 26;
+
+    @media (max-width: 768px) {
+      border: 0;
+    }
+  }
+  .${containerClassname}-enter {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  .${containerClassname}-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity ${timeout}ms ease-in;
+  }
+  .${containerClassname}-exit {
+    opacity: 1;
+    transform: translateY(0);
+    z-index: 20;
+  }
+  .${containerClassname}-exit-active {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity ${timeout}ms ease-in, transform ${timeout}ms ease-in;
+    z-index: 20;
+  }
+`
+
+export const NetworkConnectionBanner = ({
+  networkConnectionLost
+}: {
+  networkConnectionLost: boolean
+}): JSX.Element => {
+  const connectionLostBannerRef = useRef<HTMLDivElement>(null)
+  return (
+    <TransitionStyles>
+      <InvisibleA11yLabel aria-live="assertive" role="status">
+        {networkConnectionLost ? (
+          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+        ) : (
+          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+        )}
+      </InvisibleA11yLabel>
+      <TransitionGroup style={{ display: 'content' }}>
+        {networkConnectionLost && (
+          <CSSTransition
+            classNames={containerClassname}
+            nodeRef={connectionLostBannerRef}
+            timeout={timeout}
+          >
+            <div className={containerClassname} ref={connectionLostBannerRef}>
+              <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+            </div>
+          </CSSTransition>
+        )}
+      </TransitionGroup>
+    </TransitionStyles>
+  )
+}

lib/components/app/responsive-webapp.js

@@ -154,10 +154,13 @@ class ResponsiveWebapp extends Component {
       map,
       matchContentToUrl,
       parseUrlQueryString,
-      receivedPositionResponse
+      receivedPositionResponse,
+      setNetworkConnectionLost
     } = this.props
     // Add on back button press behavior.
     window.addEventListener('popstate', handleBackButtonPress)
+    window.addEventListener('online', () => setNetworkConnectionLost(false))
+    window.addEventListener('offline', () => setNetworkConnectionLost(true))
 
     // If a URL is detected without hash routing (e.g., http://localhost:9966?sessionId=test),
     // window.location.search will have a value. In this case, we need to redirect to the URL root with the
@@ -438,6 +441,7 @@ const mapStateToWrapperProps = (state) => {
 const mapWrapperDispatchToProps = {
   processSignIn: authActions.processSignIn,
   setLocale: uiActions.setLocale,
+  setNetworkConnectionLost: uiActions.setNetworkConnectionLost,
   showAccessTokenError: authActions.showAccessTokenError,
   showLoginError: authActions.showLoginError
 }

lib/components/mobile/batch-search-screen.tsx

@@ -40,8 +40,9 @@ const MobileSearchSettings = styled.div<{
   top: 50px;
   transition: ${(props) => `all ${props.transitionDuration}ms ease`};
   transition-delay: ${(props) => props.transitionDelay}ms;
-  /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */
-  z-index: 999;
+  /* Must appear under the 'hamburger' dropdown which has z-index of 1000, and the "network lost"
+    banner which has a z-index of 10 */
+  z-index: 9;
 `
 
 interface Props {

lib/components/mobile/navigation-bar.js

@@ -1,5 +1,6 @@
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
 import { Navbar } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -8,7 +9,7 @@ import styled from 'styled-components'
 import * as uiActions from '../../actions/ui'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { ComponentContext } from '../../util/contexts'
-import { injectIntl } from 'react-intl'
+import { NetworkConnectionBanner } from '../app/network-connection-banner'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
 import LocaleSelector from '../app/locale-selector'
@@ -32,6 +33,7 @@ class MobileNavigationBar extends Component {
     headerText: PropTypes.string,
     intl: PropTypes.object,
     locale: PropTypes.string,
+    networkConnectionLost: PropTypes.bool,
     onBackClicked: PropTypes.func,
     setMobileScreen: PropTypes.func,
     showBackButton: PropTypes.bool
@@ -55,6 +57,7 @@ class MobileNavigationBar extends Component {
       headerText,
       intl,
       locale,
+      networkConnectionLost,
       showBackButton
     } = this.props
 
@@ -111,6 +114,9 @@ class MobileNavigationBar extends Component {
             )}
           </MobileBar>
         </Navbar>
+        <NetworkConnectionBanner
+          networkConnectionLost={networkConnectionLost}
+        />
       </header>
     )
   }
@@ -123,7 +129,8 @@ const mapStateToProps = (state) => {
     auth0Config: getAuth0Config(state.otp.config.persistence),
     configLanguages: state.otp.config.language,
     extraMenuItems: state.otp?.config?.extraMenuItems,
-    locale: state.otp.ui.locale
+    locale: state.otp.ui.locale,
+    networkConnectionLost: state.otp.ui.errors.networkConnectionLost
   }
 }
 

lib/components/narrative/line-itin/connected-itinerary-body.js

@@ -87,6 +87,8 @@ class ConnectedItineraryBody extends Component {
     const allowUserAlertCollapsing = config?.itinerary?.allowUserAlertCollapsing
     const showApproximatePrefixAccessLegs =
       config?.itinerary?.showApproximatePrefixAccessLegs
+    const showAlertEffectiveDateTimeText =
+      config?.itinerary?.showAlertEffectiveDateTimeText
 
     // Support OTP1 flex messages in Trip Details
     // Adding empty pickupBookingInfo and dropOffBookingInfo objects
@@ -139,6 +141,7 @@ class ConnectedItineraryBody extends Component {
             setMainPanelContent(MainPanelContent.TRIP_VIEWER)
           }}
           showAgencyInfo
+          showAlertEffectiveDateTimeText={showAlertEffectiveDateTimeText}
           showApproximateAccessLegTravelTimes={showApproximatePrefixAccessLegs}
           showElevationProfile={config.elevationProfile}
           showLegIcon

lib/components/user/monitored-trip/trip-basics-pane.tsx

@@ -180,9 +180,8 @@ const RenderAvailableDays = ({
               title={notAvailableText}
             >
               <Field
-                // Let users save an existing trip, even though it may not be available on some days.
                 // TODO: improve checking trip availability.
-                disabled={isDayDisabled && isCreating}
+                disabled={isDayDisabled}
                 id={day}
                 name={day}
                 type="checkbox"

lib/reducers/create-otp-reducer.js

@@ -225,6 +225,9 @@ export function getInitialState(userDefinedConfig) {
     },
     ui: {
       diagramLeg: null,
+      errors: {
+        networkConnectionLost: !navigator.onLine
+      },
       locale: null,
       localizedMessages: null,
       mainPanelContent: null,
@@ -1108,6 +1111,14 @@ function createOtpReducer(config) {
             }
           }
         })
+      case 'SET_NETWORK_CONNECTION_LOST':
+        return update(state, {
+          ui: {
+            errors: {
+              networkConnectionLost: { $set: action.payload }
+            }
+          }
+        })
       case 'SERVICE_TIME_RANGE_REQUEST':
         return update(state, {
           serviceTimeRange: { $set: { pending: true } }

package.json

@@ -50,7 +50,7 @@
     "@opentripplanner/geocoder": "^3.0.2",
     "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "3.0.1",
-    "@opentripplanner/itinerary-body": "6.0.3",
+    "@opentripplanner/itinerary-body": "6.1.0",
     "@opentripplanner/location-field": "3.0.0",
     "@opentripplanner/location-icon": "^1.4.1",
     "@opentripplanner/map-popup": "5.1.0",

yarn.lock

@@ -2542,10 +2542,10 @@
     "@opentripplanner/core-utils" "^11.4.4"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@6.0.3", "@opentripplanner/itinerary-body@^6.0.0":
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.0.3.tgz#84573d20ac9cc1fc7f2d2e032fac5a072ac3e142"
-  integrity sha512-1qrH8hpR5Rr9KMGNnajI7GJyuoV+rogmyGqd5Z5DErZGp4luVzksIsnyW1IbxRslnV3bqKll+DH8lTXy4QIyZg==
+"@opentripplanner/itinerary-body@6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.1.0.tgz#8a1399e8dc15b6918ede51a0f263519e4b891415"
+  integrity sha512-nv42+hJavdVS5nHtKLDv1Um04patzGD+/xh3zApgxpB9xG/D2Zy4JBqbyMtZ1eHKF4JYkmm+NsAq/7043WPXGA==
   dependencies:
     "@opentripplanner/core-utils" "^12.0.0"
     "@opentripplanner/humanize-distance" "^1.2.0"
@@ -2578,6 +2578,24 @@
     react-resize-detector "^4.2.1"
     string-similarity "^4.0.4"
 
+"@opentripplanner/itinerary-body@^6.0.0":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.0.3.tgz#84573d20ac9cc1fc7f2d2e032fac5a072ac3e142"
+  integrity sha512-1qrH8hpR5Rr9KMGNnajI7GJyuoV+rogmyGqd5Z5DErZGp4luVzksIsnyW1IbxRslnV3bqKll+DH8lTXy4QIyZg==
+  dependencies:
+    "@opentripplanner/core-utils" "^12.0.0"
+    "@opentripplanner/humanize-distance" "^1.2.0"
+    "@opentripplanner/icons" "^3.0.0"
+    "@opentripplanner/location-icon" "^1.4.1"
+    "@styled-icons/fa-solid" "^10.34.0"
+    "@styled-icons/foundation" "^10.34.0"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.2.2"
+    flat "^5.0.2"
+    react-animate-height "^3.0.4"
+    react-resize-detector "^4.2.1"
+    string-similarity "^4.0.4"
+
 "@opentripplanner/[email protected]":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-3.0.0.tgz#a6f8743290cf088bcd589cf8e6b0d07a651b704a"