@@ -93,4 +103,6 @@ const mapDispatchToProps = {
setQueryParam: formActions.setQueryParam
}
-export default connect(mapStateToProps, mapDispatchToProps)(BatchRoutingPanel)
+export default connect(mapStateToProps, mapDispatchToProps)(
+ injectIntl(BatchRoutingPanel)
+)
diff --git a/lib/components/app/not-found.js b/lib/components/app/not-found.js
index 4733b08b7..4202bdaa7 100644
--- a/lib/components/app/not-found.js
+++ b/lib/components/app/not-found.js
@@ -1,7 +1,10 @@
import React from 'react'
-import { Alert, Glyphicon } from 'react-bootstrap'
+import { Alert } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'
+import IconWithSpace from '../util/icon-with-space'
+
const StyledAlert = styled(Alert)`
margin-top: 25px;
`
@@ -11,8 +14,13 @@ const StyledAlert = styled(Alert)`
*/
const NotFound = () => (
- The content you requested is not available.
+
+
+
+
)
diff --git a/lib/components/app/print-layout.js b/lib/components/app/print-layout.js
index 1a48d07db..fc8402760 100644
--- a/lib/components/app/print-layout.js
+++ b/lib/components/app/print-layout.js
@@ -2,6 +2,7 @@ import PrintableItinerary from '@opentripplanner/printable-itinerary'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Button } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
import { connect } from 'react-redux'
import { parseUrlQueryString } from '../../actions/form'
@@ -9,6 +10,7 @@ import { routingQuery } from '../../actions/api'
import DefaultMap from '../map/default-map'
import TripDetails from '../narrative/connected-trip-details'
import { ComponentContext } from '../../util/contexts'
+import IconWithSpace from '../util/icon-with-space'
import { addPrintViewClassToRootHtml, clearClassFromRootHtml } from '../../util/print'
import { getActiveItinerary } from '../../util/state'
@@ -60,14 +62,16 @@ class PrintLayout extends Component {
-
{' '}
-
- Itinerary
+
{/* The map, if visible */}
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index b9d3b5220..a7dad2dda 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
import qs from 'qs'
import React, { Component } from 'react'
import { Col, Grid, Row } from 'react-bootstrap'
-import { IntlProvider } from 'react-intl'
+import { injectIntl, IntlProvider } from 'react-intl'
import { connect } from 'react-redux'
import { Route, Switch, withRouter } from 'react-router'
@@ -71,10 +71,10 @@ class ResponsiveWebapp extends Component {
currentPosition,
formChanged,
initZoomOnLocate,
+ intl,
location,
matchContentToUrl,
query,
- setLocale,
setLocationToCurrent,
setMapCenter,
setMapZoom,
@@ -107,7 +107,7 @@ class ResponsiveWebapp extends Component {
// if in mobile mode and from field is not set, use current location as from and recenter map
if (isMobile() && query.from === null) {
- setLocationToCurrent({ locationType: 'from' })
+ setLocationToCurrent({ locationType: 'from' }, intl)
setMapCenter(pt)
if (initZoomOnLocate) {
setMapZoom({ zoom: initZoomOnLocate })
@@ -120,11 +120,7 @@ class ResponsiveWebapp extends Component {
// console.log('url changed to', location.pathname)
matchContentToUrl(location)
}
- // If the URL locale parameter changes or is initially blank, (e.g., user modifies anything after ?, e.g. locale)
- // update the corresponding redux state.
- if ((!urlParams.locale && !prevProps.locale) || (urlParams.locale && urlParams.locale !== prevProps.locale)) {
- setLocale(urlParams.locale)
- }
+
// Check for change between ITINERARY and PROFILE routingTypes
// TODO: restore this for profile mode
/* if (query.routingType !== nextProps.query.routingType) {
@@ -148,6 +144,7 @@ class ResponsiveWebapp extends Component {
getCurrentPosition,
handleBackButtonPress,
initializeModules,
+ intl,
location,
matchContentToUrl,
parseUrlQueryString,
@@ -174,7 +171,7 @@ class ResponsiveWebapp extends Component {
if (isMobile()) {
// If on mobile browser, check position on load
- getCurrentPosition()
+ getCurrentPosition(intl)
// Also, watch for changes in position on mobile
navigator.geolocation.watchPosition(
@@ -196,7 +193,7 @@ class ResponsiveWebapp extends Component {
parseUrlQueryString()
}
// Initialize call taker/field trip modules (check for valid auth session).
- initializeModules()
+ initializeModules(intl)
}
componentWillUnmount () {
@@ -249,7 +246,7 @@ class ResponsiveWebapp extends Component {
// connect to the redux store
const mapStateToProps = (state, ownProps) => {
- const title = getTitle(state)
+ const title = getTitle(state, ownProps.intl)
return {
activeItinerary: getActiveItinerary(state),
activeSearchId: state.otp.activeSearchId,
@@ -272,7 +269,6 @@ const mapDispatchToProps = {
matchContentToUrl: uiActions.matchContentToUrl,
parseUrlQueryString: formActions.parseUrlQueryString,
receivedPositionResponse: locationActions.receivedPositionResponse,
- setLocale: uiActions.setLocale,
setLocationToCurrent: mapActions.setLocationToCurrent,
setMapCenter: configActions.setMapCenter,
setMapZoom: configActions.setMapZoom
@@ -282,7 +278,11 @@ const history = createHashHistory()
const WebappWithRouter = withRouter(
withLoggedInUserSupport(
- connect(mapStateToProps, mapDispatchToProps)(ResponsiveWebapp)
+ injectIntl(
+ connect(mapStateToProps, mapDispatchToProps)(
+ ResponsiveWebapp
+ )
+ )
)
)
@@ -377,6 +377,31 @@ export const routes = [
* so that Auth0 services are available everywhere.
*/
class RouterWrapperWithAuth0 extends Component {
+ constructor (props) {
+ super(props)
+ this._initializeOrUpdateLocale(props)
+ }
+
+ componentDidUpdate (prevProps) {
+ this._initializeOrUpdateLocale(this.props, prevProps)
+ }
+
+ /**
+ * On component initialization, or if the URL locale parameter
+ * changes or is initially blank, (e.g., user modifies anything after ?, e.g. locale)
+ * update the corresponding redux state.
+ * @param {*} props The current props for the component
+ * @param {*} prevProps Optional previous props, if available.
+ */
+ _initializeOrUpdateLocale (props, prevProps) {
+ const urlParams = coreUtils.query.getUrlParams()
+ const { locale: newLocale } = urlParams
+
+ if (!prevProps || (!newLocale && !prevProps.locale) || (newLocale && newLocale !== prevProps.locale)) {
+ props.setLocale(newLocale)
+ }
+ }
+
render () {
const {
auth0Config,
@@ -390,7 +415,8 @@ class RouterWrapperWithAuth0 extends Component {
showLoginError
} = this.props
- const router = (
+ // Don't render anything until the locale/localized messages have been initialized.
+ const router = localizedMessages && (
{
const mapWrapperDispatchToProps = {
processSignIn: authActions.processSignIn,
+ setLocale: uiActions.setLocale,
showAccessTokenError: authActions.showAccessTokenError,
showLoginError: authActions.showLoginError
}
diff --git a/lib/components/form/add-place-button.js b/lib/components/form/add-place-button.js
index 178fbf9ad..89120b675 100644
--- a/lib/components/form/add-place-button.js
+++ b/lib/components/form/add-place-button.js
@@ -1,4 +1,7 @@
import React from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import IconWithSpace from '../util/icon-with-space'
const AddPlaceButton = ({from, intermediatePlaces, onClick, to}) => {
// Only permit adding intermediate place if from/to is defined.
@@ -11,12 +14,12 @@ const AddPlaceButton = ({from, intermediatePlaces, onClick, to}) => {
onClick={onClick}
style={{marginBottom: '5px', marginLeft: '10px'}}
>
-
@@ -200,4 +214,6 @@ const mapDispatchToProps = {
setQueryParam: formActions.setQueryParam
}
-export default connect(mapStateToProps, mapDispatchToProps)(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 ca2c562d1..d90d3e757 100644
--- a/lib/components/form/connect-location-field.js
+++ b/lib/components/form/connect-location-field.js
@@ -1,3 +1,4 @@
+import { injectIntl } from 'react-intl'
import { connect } from 'react-redux'
import * as apiActions from '../../actions/api'
@@ -16,7 +17,7 @@ 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
+ let {actions = {}, includeLocation = false, intlActions = {}} = options
const mapStateToProps = (state, ownProps) => {
const { config, currentQuery, location, transitIndex, user } = state.otp
const { currentPosition, nearbyStops, sessionSearches } = location
@@ -42,12 +43,30 @@ export default function connectLocationField (StyledLocationField, options = {})
return stateToProps
}
- const mapDispatchToProps = {
- addLocationSearch: locationActions.addLocationSearch,
- findNearbyStops: apiActions.findNearbyStops,
- getCurrentPosition: locationActions.getCurrentPosition,
- ...actions
+ const mapDispatchToProps = (dispatch, ownProps) => {
+ actions = {
+ addLocationSearch: locationActions.addLocationSearch,
+ findNearbyStops: apiActions.findNearbyStops,
+ ...actions
+ }
+
+ intlActions = {
+ getCurrentPosition: locationActions.getCurrentPosition,
+ ...intlActions
+ }
+
+ const dispatchActions = {}
+
+ Object.entries(actions).forEach(([key, fn]) => {
+ dispatchActions[key] = (...args) => dispatch(fn(...args))
+ })
+ Object.entries(intlActions).forEach(([key, fn]) => {
+ dispatchActions[key] = (...args) => dispatch(fn(ownProps.intl, ...args))
+ })
+ return dispatchActions
}
- return connect(mapStateToProps, mapDispatchToProps)(StyledLocationField)
+ return injectIntl(
+ connect(mapStateToProps, mapDispatchToProps)(StyledLocationField)
+ )
}
diff --git a/lib/components/form/connected-location-field.js b/lib/components/form/connected-location-field.js
index 6be2c99d6..ac52fe42f 100644
--- a/lib/components/form/connected-location-field.js
+++ b/lib/components/form/connected-location-field.js
@@ -10,6 +10,7 @@ import {
import styled from 'styled-components'
import * as mapActions from '../../actions/map'
+
import connectLocationField from './connect-location-field'
const StyledLocationField = styled(LocationField)`
@@ -54,8 +55,10 @@ const StyledLocationField = styled(LocationField)`
export default connectLocationField(StyledLocationField, {
actions: {
- clearLocation: mapActions.clearLocation,
- onLocationSelected: mapActions.onLocationSelected
+ clearLocation: mapActions.clearLocation
},
- includeLocation: true
+ includeLocation: true,
+ intlActions: {
+ onLocationSelected: mapActions.onLocationSelected
+ }
})
diff --git a/lib/components/form/error-message.js b/lib/components/form/error-message.js
index f00285626..2276888e8 100644
--- a/lib/components/form/error-message.js
+++ b/lib/components/form/error-message.js
@@ -1,7 +1,9 @@
import React from 'react'
+import { FormattedMessage } from 'react-intl'
import { connect } from 'react-redux'
import TripTools from '../narrative/trip-tools'
+import IconWithSpace from '../util/icon-with-space'
import { getActiveError, getErrorMessage } from '../../util/state'
const ErrorMessage = ({ message }) => {
@@ -10,7 +12,8 @@ const ErrorMessage = ({ message }) => {
return (
-
{message}
@@ -24,13 +27,10 @@ const mapStateToProps = (state, ownProps) => {
return {
message: getErrorMessage(
getActiveError(state),
- state.otp.config.errorMessages
+ state.otp.config.errorMessages,
+ state.otp.ui.locale
)
}
}
-const mapDispatchToProps = (dispatch, ownProps) => {
- return {}
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ErrorMessage)
+export default connect(mapStateToProps)(ErrorMessage)
diff --git a/lib/components/form/mode-buttons.js b/lib/components/form/mode-buttons.js
index 3362cf979..b7c07bb46 100644
--- a/lib/components/form/mode-buttons.js
+++ b/lib/components/form/mode-buttons.js
@@ -1,5 +1,6 @@
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'
@@ -7,36 +8,41 @@ import Icon from '../util/icon'
import {buttonCss} from './batch-styled'
-export const MODE_OPTIONS = [
- {
- label: 'Transit',
- mode: 'TRANSIT'
- },
- {
- label: 'Walking',
- mode: 'WALK'
- },
- {
- label: 'Drive',
- mode: 'CAR'
- },
- {
- label: 'Bicycle',
- mode: 'BICYCLE'
- },
- {
- icon: 'mobile',
- label: 'Rental options',
- mode: 'RENT' // TODO: include HAIL?
- }
-]
+function getModeOptions (intl) {
+ // intl.formatMessage is used here instead of
because the text is
+ // rendered inside , which renders outside of the context.
+ return [
+ {
+ label: intl.formatMessage({id: 'components.ModeButtons.transit'}),
+ mode: 'TRANSIT'
+ },
+ {
+ label: intl.formatMessage({id: 'components.ModeButtons.walk'}),
+ mode: 'WALK'
+ },
+ {
+ label: intl.formatMessage({id: 'components.ModeButtons.car'}),
+ mode: 'CAR'
+ },
+ {
+ label: intl.formatMessage({id: 'components.ModeButtons.bicycle'}),
+ mode: 'BICYCLE'
+ },
+ {
+ icon: 'mobile',
+ label: intl.formatMessage({id: 'components.ModeButtons.rent'}),
+ mode: 'RENT' // TODO: include HAIL?
+ }
+ ]
+}
const ModeButtons = ({
className,
onClick,
selectedModes = []
}) => {
- return MODE_OPTIONS.map((item, index) => (
+ const intl = useIntl()
+ return getModeOptions(intl).map((item, index) => (
{text || 'Plan Trip'}
+ >{text ||
+
+ {editButtonText}{caret && }
+
+ {showDot &&
+ )
+ // Add tall class to account for vertical centering if there is only
+ // one line in the label (default is 2).
+ const addClass = messages.label.match(/\n/) ? '' : ' tall'
+ return (
+
+
+ {messages.label}
+
+ {button}
+
+
-
- {editButtonText}{caret && }
-
- {showDot &&
- )
- // Add tall class to account for vertical centering if there is only
- // one line in the label (default is 2).
- const addClass = messages.label.match(/\n/) ? '' : ' tall'
- return (
-
-
- {messages.label}
-
- {button}
-
-
{content}
- )
- }
+ return (
+ {content}
+ )
+}
+
+SwitchButton.propTypes = {
+ onClick: PropTypes.func,
+ switchLocations: PropTypes.func
}
const mapStateToProps = (state, ownProps) => {
diff --git a/lib/components/form/tabbed-form-panel.js b/lib/components/form/tabbed-form-panel.js
index dc9a55626..e7b4d29d9 100644
--- a/lib/components/form/tabbed-form-panel.js
+++ b/lib/components/form/tabbed-form-panel.js
@@ -1,14 +1,15 @@
import React, { Component } from 'react'
import { Button } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
import { connect } from 'react-redux'
+import { setMainPanelContent } from '../../actions/ui'
+
import DateTimePreview from './date-time-preview'
import SettingsPreview from './settings-preview'
import DateTimeModal from './date-time-modal'
import ConnectedSettingsSelectorPanel from './connected-settings-selector-panel'
-import { setMainPanelContent } from '../../actions/ui'
-
class TabbedFormPanel extends Component {
_onEditDateTimeClick = () => {
const { mainPanelContent, setMainPanelContent } = this.props
@@ -47,7 +48,10 @@ class TabbedFormPanel extends Component {
{mainPanelContent === 'EDIT_SETTINGS' && (
-
diff --git a/lib/components/form/user-settings.js b/lib/components/form/user-settings.js
index 870161e7c..43bda57f5 100644
--- a/lib/components/form/user-settings.js
+++ b/lib/components/form/user-settings.js
@@ -2,6 +2,7 @@ import moment from 'moment'
import coreUtils from '@opentripplanner/core-utils'
import React, { Component } from 'react'
import { Button } from 'react-bootstrap'
+import { FormattedMessage, injectIntl } from 'react-intl'
import { connect } from 'react-redux'
import { forgetSearch, toggleTracking } from '../../actions/api'
@@ -17,12 +18,12 @@ const BUTTON_WIDTH = 40
class UserSettings extends Component {
_disableTracking = () => {
- const { toggleTracking, user } = this.props
+ const { intl, toggleTracking, user } = this.props
if (!user.trackRecent) return
const hasRecents = user.recentPlaces.length > 0 || user.recentSearches.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?')) {
+ if (hasRecents && !window.confirm(intl.formatMessage({id: 'components.UserSettings.confirmDeletion'}))) {
return
}
// Disable tracking if we reach this statement.
@@ -55,7 +56,7 @@ class UserSettings extends Component {
}
render () {
- const { storageDisclaimer, user } = this.props
+ const { user } = this.props
const { favoriteStops, recentPlaces, recentSearches, trackRecent } = user
// Clone locations in order to prevent blank locations from seeping into the
// app state/store.
@@ -71,19 +72,19 @@ class UserSettings extends Component {
})}
Favorite stops
+
{favoriteStops.length > 0
? favoriteStops.map(location => {
return No favorite stops
+ :
{trackRecent && recentPlaces.length > 0 &&
-
Recent places
+
{recentPlaces.map(location => {
return
-
}
showBackButton
/>
diff --git a/lib/components/mobile/location-search.js b/lib/components/mobile/location-search.js
index 0e0df8d07..36b824d14 100644
--- a/lib/components/mobile/location-search.js
+++ b/lib/components/mobile/location-search.js
@@ -1,5 +1,6 @@
-import React, { Component } from 'react'
import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { injectIntl } from 'react-intl'
import { connect } from 'react-redux'
import LocationField from '../form/connected-location-field'
@@ -21,6 +22,7 @@ class MobileLocationSearch extends Component {
render () {
const {
backScreen,
+ intl,
location,
locationType,
otherLocation
@@ -31,13 +33,18 @@ class MobileLocationSearch extends Component {
}
showBackButton
/>
diff --git a/lib/components/mobile/results-error.js b/lib/components/mobile/results-error.js
index eb8728a1e..38d0a6918 100644
--- a/lib/components/mobile/results-error.js
+++ b/lib/components/mobile/results-error.js
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types'
import React from 'react'
+import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'
import ErrorMessage from '../form/error-message'
@@ -18,7 +19,9 @@ const ResultsError = ({ className, error }) => (
className='back-to-search-button'
style={{ width: '100%' }}
>
-
diff --git a/lib/components/mobile/results-header.js b/lib/components/mobile/results-header.js
index 39431c201..fb92f0025 100644
--- a/lib/components/mobile/results-header.js
+++ b/lib/components/mobile/results-header.js
@@ -2,6 +2,7 @@ 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'
@@ -58,10 +59,15 @@ class ResultsHeader extends Component {
const { errors, query, resultCount } = this.props
const hasNoResult = resultCount === 0 && errors.length > 0
const headerText = hasNoResult
- ? 'No Trip Found'
+ ?
: (resultCount
- ? `We Found ${resultCount} Option${resultCount > 1 ? 's' : ''}`
- : 'Waiting...'
+ ? (
+
+ )
+ :
)
return (
@@ -80,7 +86,7 @@ class ResultsHeader extends Component {
- Edit
+
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index 170eeeb56..e52e7f162 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -1,6 +1,7 @@
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'
@@ -129,7 +130,10 @@ class MobileResultsScreen extends Component {
expanded={expanded}
onClick={this._optionClicked}
>
- Option {activeItineraryIndex + 1}
+
}
onBackClicked={this._backClicked}
showBackButton
/>
@@ -47,9 +48,7 @@ class MobileRouteViewer extends Component {
// connect to the redux store
const mapStateToProps = (state, ownProps) => {
- return {
- languageConfig: state.otp.config.language
- }
+ return {}
}
const mapDispatchToProps = {
diff --git a/lib/components/mobile/search-screen.js b/lib/components/mobile/search-screen.js
index 01ce77a55..b8efa5817 100644
--- a/lib/components/mobile/search-screen.js
+++ b/lib/components/mobile/search-screen.js
@@ -1,7 +1,8 @@
-import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import React, { Component } from 'react'
import { Row, Col } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
+import { connect } from 'react-redux'
import DateTimePreview from '../form/date-time-preview'
import DefaultMap from '../map/default-map'
@@ -43,7 +44,9 @@ class MobileSearchScreen extends Component {
render () {
return (
-
}
onBackClicked={() => { this.props.setViewedStop(null) }}
showBackButton
/>
@@ -40,9 +41,7 @@ class MobileStopViewer extends Component {
// connect to the redux store
const mapStateToProps = (state, ownProps) => {
- return {
- languageConfig: state.otp.config.language
- }
+ return { }
}
const mapDispatchToProps = {
diff --git a/lib/components/mobile/trip-viewer.js b/lib/components/mobile/trip-viewer.js
index d8c74e1b4..a21ab69c8 100644
--- a/lib/components/mobile/trip-viewer.js
+++ b/lib/components/mobile/trip-viewer.js
@@ -1,5 +1,6 @@
-import React, { Component } from 'react'
import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { FormattedMessage } from 'react-intl'
import { connect } from 'react-redux'
import TripViewer from '../viewers/trip-viewer'
@@ -20,7 +21,7 @@ class MobileTripViewer extends Component {
return (
}
onBackClicked={this._onBackClicked}
showBackButton
/>
@@ -42,9 +43,7 @@ class MobileTripViewer extends Component {
// connect to the redux store
const mapStateToProps = (state, ownProps) => {
- return {
- languageConfig: state.otp.config.language
- }
+ return { }
}
const mapDispatchToProps = {
diff --git a/lib/components/mobile/welcome-screen.js b/lib/components/mobile/welcome-screen.js
index 31ced700b..4cb9accc5 100644
--- a/lib/components/mobile/welcome-screen.js
+++ b/lib/components/mobile/welcome-screen.js
@@ -1,15 +1,16 @@
-import React, { Component } from 'react'
import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { injectIntl } from 'react-intl'
import { connect } from 'react-redux'
-import MobileContainer from './container'
import LocationField from '../form/connected-location-field'
import DefaultMap from '../map/default-map'
-import MobileNavigationBar from './navigation-bar'
-
import { MobileScreens, setMobileScreen } from '../../actions/ui'
import { setLocationToCurrent } from '../../actions/map'
+import MobileNavigationBar from './navigation-bar'
+import MobileContainer from './container'
+
class MobileWelcomeScreen extends Component {
static propTypes = {
setLocationToCurrent: PropTypes.func,
@@ -25,11 +26,12 @@ class MobileWelcomeScreen extends Component {
* takes care of updating the query in the store w/ the selected location */
_locationSetFromPopup = (selection) => {
+ const { intl, setLocationToCurrent } = this.props
// If the tapped location was selected as the 'from' endpoint, set the 'to'
// endpoint to be the current user location. (If selected as the 'to' point,
// no action is needed since 'from' is the current location by default.)
if (selection.type === 'from') {
- this.props.setLocationToCurrent({ locationType: 'to' })
+ setLocationToCurrent({ locationType: 'to' }, intl)
}
}
@@ -39,7 +41,9 @@ class MobileWelcomeScreen extends Component {
{
currency: state.otp.config.localization?.currency || 'USD'
}
}
+
export default connect(mapStateToProps)(ItinerarySummary)
diff --git a/lib/components/narrative/narrative-itineraries-errors.js b/lib/components/narrative/narrative-itineraries-errors.js
index fa94c77af..35977a799 100644
--- a/lib/components/narrative/narrative-itineraries-errors.js
+++ b/lib/components/narrative/narrative-itineraries-errors.js
@@ -1,4 +1,5 @@
import { getCompanyIcon } from '@opentripplanner/icons/lib/companies'
+import { connect } from 'react-redux'
import styled from 'styled-components'
import Icon from '../util/icon'
@@ -22,7 +23,7 @@ const IssueContents = styled.div`
text-align: left;
`
-export default function NarrativeItinerariesErrors ({ errorMessages, errors }) {
+function NarrativeItinerariesErrors ({ errorMessages, errors, locale }) {
return errors.map((error, idx) => {
let icon =
- {getErrorMessage(error, errorMessages)}
+ {getErrorMessage(error, errorMessages, locale)}
)
})
}
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ locale: state.otp.ui.locale
+ }
+}
+
+export default connect(mapStateToProps)(NarrativeItinerariesErrors)
diff --git a/lib/components/narrative/narrative-itineraries-header.js b/lib/components/narrative/narrative-itineraries-header.js
index e462de55d..a23da33c6 100644
--- a/lib/components/narrative/narrative-itineraries-header.js
+++ b/lib/components/narrative/narrative-itineraries-header.js
@@ -58,14 +58,14 @@ export default function NarrativeItinerariesHeader ({
: <>
{
const useRealtime = state.otp.useRealtime
return {
+ // swap out realtime itineraries with non-realtime depending on boolean
activeItinerary: activeSearch && activeSearch.activeItinerary,
activeLeg: activeSearch && activeSearch.activeLeg,
activeStep: activeSearch && activeSearch.activeStep,
diff --git a/lib/components/narrative/trip-tools.js b/lib/components/narrative/trip-tools.js
index 641ca8bf8..9b89a814b 100644
--- a/lib/components/narrative/trip-tools.js
+++ b/lib/components/narrative/trip-tools.js
@@ -39,7 +39,7 @@ class TripTools extends Component {
// FIXME: The Spanish string does not fit in button width.
)
diff --git a/lib/components/user/account-setup-finish-pane.js b/lib/components/user/account-setup-finish-pane.js
index 60f4b71cf..468b8fa0f 100644
--- a/lib/components/user/account-setup-finish-pane.js
+++ b/lib/components/user/account-setup-finish-pane.js
@@ -1,8 +1,11 @@
import React from 'react'
+import { FormattedMessage } from 'react-intl'
const AccountSetupFinishPane = () => (
-
You are ready to start planning your trips.
+
+
-
Redirecting...
+
+
- If the page does not load after a few seconds,{' '}
-
)
diff --git a/lib/components/user/back-link.js b/lib/components/user/back-link.js
index 7f2cc82e5..173233d79 100644
--- a/lib/components/user/back-link.js
+++ b/lib/components/user/back-link.js
@@ -1,5 +1,6 @@
import React from 'react'
import { Button } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'
import { IconWithMargin } from './styled'
@@ -19,8 +20,9 @@ const BackLink = () => (
bsStyle='link'
onClick={navigateBack}
>
+ {/** FIXME: handle right-to-left languages */}
+ {/** FIXME: handle right-to-left languages */}
)
diff --git a/lib/components/user/before-signin-screen.js b/lib/components/user/before-signin-screen.js
index b6f2e7e96..4d6ec56e4 100644
--- a/lib/components/user/before-signin-screen.js
+++ b/lib/components/user/before-signin-screen.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { FormattedMessage } from 'react-intl'
/**
* This screen is flashed just before the Auth0 login page is shown.
@@ -6,10 +7,11 @@ import React from 'react'
*/
const BeforeSignInScreen = () => (
-
Signing you in
+
+
- In order to access this page you will need to sign in.
- Please wait while we redirect you to the login page...
+
- Delete my account
+
)
diff --git a/lib/components/user/existing-account-display.js b/lib/components/user/existing-account-display.js
index 78ceabe8a..9d291136b 100644
--- a/lib/components/user/existing-account-display.js
+++ b/lib/components/user/existing-account-display.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { FormattedMessage } from 'react-intl'
import BackToTripPlanner from './back-to-trip-planner'
import DeleteUser from './delete-user'
@@ -20,17 +21,17 @@ const ExistingAccountDisplay = props => {
{
pane: FavoritePlacesList,
props,
- title: 'My locations'
+ title:
)
diff --git a/lib/components/user/form-navigation-buttons.js b/lib/components/user/form-navigation-buttons.js
index f20cf9b5c..45e0ffe5b 100644
--- a/lib/components/user/form-navigation-buttons.js
+++ b/lib/components/user/form-navigation-buttons.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types'
import React from 'react'
import { Button, FormGroup } from 'react-bootstrap'
+import { injectIntl } from 'react-intl'
import styled from 'styled-components'
// Styles
@@ -20,10 +21,11 @@ const RightButton = styled(Button)`
*/
const FormNavigationButtons = ({
backButton,
+ intl,
okayButton
}) => (
-
+
{backButton && (
{
{
pane: panes.basics,
props,
- title: 'Trip information'
+ title:
+ <>
+
)
}
return (
<>
- Trip Not Found
- Sorry, the requested trip was not found.
+
+
+
+
)
}
diff --git a/lib/components/user/monitored-trip/saved-trip-list.js b/lib/components/user/monitored-trip/saved-trip-list.js
index 11149c989..72e056412 100644
--- a/lib/components/user/monitored-trip/saved-trip-list.js
+++ b/lib/components/user/monitored-trip/saved-trip-list.js
@@ -1,6 +1,7 @@
import { withAuthenticationRequired } from '@auth0/auth0-react'
import React, { Component } from 'react'
import { Button, Glyphicon, Panel } from 'react-bootstrap'
+import { injectIntl, FormattedMessage } from 'react-intl'
import { connect } from 'react-redux'
import AccountPage from '../account-page'
@@ -9,11 +10,12 @@ import * as uiActions from '../../../actions/ui'
import * as userActions from '../../../actions/user'
import BackToTripPlanner from '../back-to-trip-planner'
import AwaitingScreen from '../awaiting-screen'
-import TripSummaryPane from './trip-summary-pane'
import { TRIPS_PATH } from '../../../util/constants'
import { RETURN_TO_CURRENT_ROUTE } from '../../../util/ui'
import withLoggedInUserSupport from '../with-logged-in-user-support'
+import TripSummaryPane from './trip-summary-pane'
+
/**
* This component displays the list of saved trips for the logged-in user.
*/
@@ -29,8 +31,12 @@ class SavedTripList extends Component {
content = (
<>
You have no saved trips
- Perform a trip search from the map first.
+
+
+
+
)
} else {
@@ -38,7 +44,9 @@ class SavedTripList extends Component {
content = (
<>
My trips
+
+
{trips.map((trip, index) => (
{trip.isActive
- ? <>
-
-
@@ -154,4 +178,4 @@ const itemMapDispatchToProps = {
const ConnectedTripListItem = connect(
itemMapStateToProps,
itemMapDispatchToProps
-)(TripListItem)
+)(injectIntl(TripListItem))
diff --git a/lib/components/user/monitored-trip/saved-trip-screen.js b/lib/components/user/monitored-trip/saved-trip-screen.js
index e6c93bc61..0052070b4 100644
--- a/lib/components/user/monitored-trip/saved-trip-screen.js
+++ b/lib/components/user/monitored-trip/saved-trip-screen.js
@@ -2,6 +2,7 @@ import { withAuthenticationRequired } from '@auth0/auth0-react'
import clone from 'clone'
import { Form, Formik } from 'formik'
import React, { Component } from 'react'
+import { injectIntl } from 'react-intl'
import { connect } from 'react-redux'
import * as yup from 'yup'
@@ -27,13 +28,13 @@ const validationSchemaShape = {
isActive: yup.boolean(),
leadTimeInMinutes: yup.number().positive().integer(),
tripName: yup.string()
- .required('Please enter a trip name')
+ .required('components.SavedTripScreen.tripNameRequired')
}
// Add the checks on each day that at least one day is monitored.
ALL_DAYS.forEach(day => {
validationSchemaShape[day] = yup.boolean().test(
'one-day-selected',
- 'Please select at least one day to monitor',
+ 'selectAtLeastOneDay', // not directly shown.
function () {
let selectedDays = 0
ALL_DAYS.forEach(day => {
@@ -88,8 +89,14 @@ class SavedTripScreen extends Component {
* @param {*} monitoredTrip The trip edited state to be saved, provided by Formik.
*/
_updateMonitoredTrip = monitoredTrip => {
- const { createOrUpdateUserMonitoredTrip, isCreating } = this.props
- createOrUpdateUserMonitoredTrip(monitoredTrip, isCreating)
+ const { createOrUpdateUserMonitoredTrip, intl, isCreating } = this.props
+ createOrUpdateUserMonitoredTrip(
+ monitoredTrip,
+ isCreating,
+ undefined,
+ undefined,
+ intl
+ )
}
/**
@@ -110,13 +117,11 @@ class SavedTripScreen extends Component {
}
componentDidMount () {
- const { isCreating, monitoredTrips } = this.props
+ const { intl, isCreating, monitoredTrips } = this.props
if (isCreating && hasMaxTripCount(monitoredTrips)) {
// There is a middleware limit of 5 saved trips,
// so if that limit is already reached, alert, then show editing mode.
- alert('You already have reached the maximum of five saved trips.\n' +
- 'Please remove unused trips from your saved trips, and try again.')
-
+ alert(intl.formatMessage({id: 'components.SavedTripScreen.tooManyTrips'}))
this._goToSavedTrips()
}
@@ -148,8 +153,8 @@ class SavedTripScreen extends Component {
const clonedSchemaShape = clone(validationSchemaShape)
clonedSchemaShape.tripName = yup.string()
- .required('Please enter a trip name')
- .notOneOf(otherTripNames, 'Another saved trip already uses this name. Please choose a different name.')
+ .required('components.SavedTripScreen.tripNameRequired')
+ .notOneOf(otherTripNames, 'components.SavedTripScreen.tripNameAlreadyUsed')
const validationSchema = yup.object(clonedSchemaShape)
screenContents = (
@@ -219,7 +224,9 @@ const mapDispatchToProps = {
export default withLoggedInUserSupport(
withAuthenticationRequired(
- connect(mapStateToProps, mapDispatchToProps)(SavedTripScreen),
+ connect(mapStateToProps, mapDispatchToProps)(
+ injectIntl(SavedTripScreen)
+ ),
RETURN_TO_CURRENT_ROUTE
),
true
diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js
index bc6566df0..f8095bcff 100644
--- a/lib/components/user/monitored-trip/trip-basics-pane.js
+++ b/lib/components/user/monitored-trip/trip-basics-pane.js
@@ -9,11 +9,13 @@ import {
HelpBlock,
ProgressBar
} from 'react-bootstrap'
+import { FormattedMessage, injectIntl } from 'react-intl'
import { connect } from 'react-redux'
import { Prompt } from 'react-router'
import styled from 'styled-components'
import * as userActions from '../../../actions/user'
+import { ALL_DAYS } from '../../../util/monitored-trip'
import { getErrorStates } from '../../../util/ui'
import TripStatus from './trip-status'
@@ -40,16 +42,6 @@ const TripDayLabel = styled.label`
}
`
-const allDays = [
- { fullText: 'Mondays', name: 'monday', text: 'Mon.' },
- { fullText: 'Tuesdays', name: 'tuesday', text: 'Tue.' },
- { fullText: 'Wednesdays', name: 'wednesday', text: 'Wed.' },
- { fullText: 'Thursdays', name: 'thursday', text: 'Thu.' },
- { fullText: 'Fridays', name: 'friday', text: 'Fri.' },
- { fullText: 'Saturdays', name: 'saturday', text: 'Sat.' },
- { fullText: 'Sundays', name: 'sunday', text: 'Sun.' }
-]
-
/**
* This component shows summary information for a trip
* and lets the user edit the trip name and day.
@@ -66,9 +58,9 @@ class TripBasicsPane extends Component {
itineraryExistence &&
itineraryExistence !== prevProps.itineraryExistence
) {
- allDays.forEach(({ name }) => {
- if (!itineraryExistence[name].valid) {
- setFieldValue(name, false)
+ ALL_DAYS.forEach(day => {
+ if (!itineraryExistence[day].valid) {
+ setFieldValue(day, false)
}
})
}
@@ -76,8 +68,8 @@ class TripBasicsPane extends Component {
componentDidMount () {
// Check itinerary availability (existence) for all days.
- const { checkItineraryExistence, values: monitoredTrip } = this.props
- checkItineraryExistence(monitoredTrip)
+ const { checkItineraryExistence, intl, values: monitoredTrip } = this.props
+ checkItineraryExistence(monitoredTrip, intl)
}
componentDidUpdate (prevProps) {
@@ -93,6 +85,7 @@ class TripBasicsPane extends Component {
canceled,
dirty,
errors,
+ intl,
isCreating,
isSubmitting,
itineraryExistence,
@@ -104,12 +97,16 @@ class TripBasicsPane extends Component {
// but don't show it when they click submit or cancel.
const unsavedChanges = dirty && !isSubmitting && !canceled
// Message changes depending on if the new or existing trip is being edited
- const unsavedChangesNewTripMessage = 'You haven\'t saved your new trip yet. If you leave, it will be lost.'
- const unsavedChangesExistingTripMessage = 'You haven\'t saved your trip yet. If you leave, changes will be lost.'
- const unsavedChangesMessage = isCreating ? unsavedChangesNewTripMessage : unsavedChangesExistingTripMessage
+ const unsavedChangesMessage = intl.formatMessage({
+ id: `components.TripBasicsPane.unsavedChanges${isCreating ? 'New' : 'Existing'}Trip`
+ })
if (!itinerary) {
- return No itinerary to display.
+ return (
+
+
+ )
} else {
// Show an error indication when
// - monitoredTrip.tripName is not blank and that tripName is not already used.
@@ -117,9 +114,9 @@ class TripBasicsPane extends Component {
const errorStates = getErrorStates(this.props)
let monitoredDaysValidationState = null
- allDays.forEach(({ name }) => {
+ ALL_DAYS.forEach(day => {
if (!monitoredDaysValidationState) {
- monitoredDaysValidationState = errorStates[name]
+ monitoredDaysValidationState = errorStates[day]
}
})
@@ -135,33 +132,50 @@ class TripBasicsPane extends Component {
{/* Do not show trip status when saving trip for the first time
(it doesn't exist in backend yet). */}
{!isCreating && Selected itinerary:
+
+
- Please provide a name for this trip:
+
+
{/* onBlur, onChange, and value are passed automatically. */}
{errors.tripName} }
+ {errors.tripName && (
+
+
+ )}
- What days do you take this trip?
+
+
- {allDays.map(({ fullText, name, text }, index) => {
- const isDayDisabled = itineraryExistence && !itineraryExistence[name].valid
- const boxClass = isDayDisabled ? 'alert-danger' : (monitoredTrip[name] ? 'bg-primary' : '')
- const notAvailableText = isDayDisabled ? `Trip not available on ${fullText}` : null
+ {ALL_DAYS.map(day => {
+ const isDayDisabled = itineraryExistence && !itineraryExistence[day].valid
+ const boxClass = isDayDisabled ? 'alert-danger' : (monitoredTrip[day] ? 'bg-primary' : '')
+ const notAvailableText = isDayDisabled
+ ? intl.formatMessage(
+ {id: 'components.TripBasicsPane.tripNotAvailableOnDay'},
+ {repeatedDay: intl.formatMessage({id: `common.daysOfWeekPlural.${day}`})}
+ )
+ : null
return (
-
- {text}
+
+
+
{ // Let users save an existing trip, even though it may not be available on some days.
// TODO: improve checking trip availability.
isDayDisabled && isCreating
?
)
@@ -171,13 +185,21 @@ class TripBasicsPane extends Component {
{itineraryExistence
? (
- <>Your trip is available on the days of the week as indicated above.
+
- {monitoredDaysValidationState && Please select at least one day to monitor. }
+ {monitoredDaysValidationState && (
+
+
+ )}
{/* Scroll to the trip name/days fields if submitting and there is an error on these fields. */}
is kept outside of to accommodate layout in table/grid cells.
<>
- {label}
+ {label && {label} }
(
)
+function Options ({ defaultValue, options }) {
+ // can't be used inside .
+ const intl = useIntl()
+ return options.map(({ text, value }, i) => (
+
+ {value === defaultValue
+ ? intl.formatMessage(
+ { id: 'common.forms.defaultValue' },
+ { value: text }
+ )
+ : text
+ }
+
+ ))
+}
+
+const basicYesNoOptions = [
+ {
+ id: 'yes',
+ value: true
+ },
+ {
+ id: 'no',
+ value: false
+ }
+]
+
+/**
+ * Produces a yes/no list of options with the specified
+ * default value (true for yes, false for no).
+ */
+function YesNoOptions ({ defaultValue }) {
+ // can't be used inside .
+ const intl = useIntl()
+ const options = basicYesNoOptions.map(({ id, value }) => ({
+ text: intl.formatMessage({id: `common.forms.${id}`}),
+ value
+ }))
+ return can't be used inside .
+ const intl = useIntl()
+ const options = minuteOptions.map(minutes => ({
+ text: intl.formatMessage(
+ { id: minutes === 60
+ ? 'components.TripNotificationsPane.oneHour'
+ : 'common.time.tripDurationFormatZeroHours'
+ },
+ { minutes }
+ ),
+ value: minutes
+ }))
+ return
- Notifications are turned off for your account.
+
+
- To receive alerts for your saved trips, enable notifications
- in your account settings, and try saving a trip again.
+
)
@@ -120,37 +179,43 @@ class TripNotificationsPane extends Component {
const { showAdvancedSettings } = this.state
notificationSettingsContent = (
<>
- Notify me via {notificationChannelLabels[notificationChannel]} when:
+
+
Yes (default)
- No
+
Yes (default)
- No
+
- There are delays or disruptions of more than
+
+
as above.
onChange={this._handleDelayThresholdChange}
value={commonDelayThreshold}
>
- 5 min (default)
- 10 min
- 15 min
+
@@ -163,23 +228,27 @@ class TripNotificationsPane extends Component {
type='button'
>
-
- 15 min
- 30 min (default)
- 45 min
- 1 hour
-
- before it begins until it ends.
+
+
+
)}
diff --git a/lib/components/user/monitored-trip/trip-status-rendering-strategies/active-trip-renderer.js b/lib/components/user/monitored-trip/trip-status-rendering-strategies/active-trip-renderer.js
index 3dda64721..8981d6fb7 100644
--- a/lib/components/user/monitored-trip/trip-status-rendering-strategies/active-trip-renderer.js
+++ b/lib/components/user/monitored-trip/trip-status-rendering-strategies/active-trip-renderer.js
@@ -1,8 +1,11 @@
import moment from 'moment'
-import { formatDuration } from '@opentripplanner/core-utils/lib/time'
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
-import baseRenderer from './base-renderer'
import { getTripStatus, REALTIME_STATUS } from '../../../../util/viewer'
+import FormattedDuration from '../../../util/formatted-duration'
+
+import baseRenderer from './base-renderer'
/**
* Calculates various data for monitored trips that are currently active.
@@ -27,9 +30,6 @@ export default function activeTripRenderer ({
data.matchingItinerary.endTime -
data.journeyState.scheduledArrivalTimeEpochMillis
) / 1000
- const deviationHumanDuration = formatDuration(
- Math.abs(arrivalDeviationSeconds)
- )
const tripStatus = getTripStatus(
true,
arrivalDeviationSeconds,
@@ -38,23 +38,39 @@ export default function activeTripRenderer ({
if (tripStatus === REALTIME_STATUS.ON_TIME) {
// about on time
data.panelBsStyle = 'success'
- data.headingText = 'Trip is in progress and is about on time.'
+ data.headingText =
- {alertsHeader}
+
+
@@ -122,7 +118,9 @@ const mapStateToProps = (state, ownProps) => {
const { monitoredTrip } = ownProps
const dateFormat = getDateFormat(state.otp.config)
const longDateFormat = getLongDateFormat(state.otp.config)
- const timeFormat = getTimeFormat(state.otp.config)
+ // const timeFormat = getTimeFormat(state.otp.config)
+ const use24HourFormat = state.user.loggedInUser?.use24HourFormat ?? false
+ const timeFormat = use24HourFormat ? 'H:mm' : 'h:mm a'
const renderData = getRenderData({
dateFormat,
@@ -141,17 +139,19 @@ const mapStateToProps = (state, ownProps) => {
}
const mapDispatchToProps = (dispatch, ownProps) => {
- const { monitoredTrip } = ownProps
+ const { intl, monitoredTrip } = ownProps
return {
confirmAndDeleteUserMonitoredTrip: () => dispatch(
- confirmAndDeleteUserMonitoredTrip(monitoredTrip.id)
+ confirmAndDeleteUserMonitoredTrip(monitoredTrip.id, intl)
),
planNewTripFromMonitoredTrip: () => dispatch(
planNewTripFromMonitoredTrip(monitoredTrip)
),
- togglePauseTrip: () => dispatch(togglePauseTrip(monitoredTrip)),
- toggleSnoozeTrip: () => dispatch(toggleSnoozeTrip(monitoredTrip))
+ togglePauseTrip: () => dispatch(togglePauseTrip(monitoredTrip, intl)),
+ toggleSnoozeTrip: () => dispatch(toggleSnoozeTrip(monitoredTrip, intl))
}
}
-export default connect(mapStateToProps, mapDispatchToProps)(TripStatus)
+export default connect(mapStateToProps, mapDispatchToProps)(
+ injectIntl(TripStatus)
+)
diff --git a/lib/components/user/monitored-trip/trip-summary-pane.js b/lib/components/user/monitored-trip/trip-summary-pane.js
index efcb8d2e6..10cc6b96c 100644
--- a/lib/components/user/monitored-trip/trip-summary-pane.js
+++ b/lib/components/user/monitored-trip/trip-summary-pane.js
@@ -1,41 +1,53 @@
-import React, { Component } from 'react'
+import React from 'react'
+import { FormattedList, FormattedMessage } from 'react-intl'
import { dayFieldsToArray } from '../../../util/monitored-trip'
-import TripSummary from './trip-summary'
-
-class TripSummaryPane extends Component {
- render () {
- const { monitoredTrip } = this.props
- const { itinerary } = monitoredTrip
+import { BoldText } from '../../../util/i18n'
- if (!itinerary) {
- return No itinerary to display.
- } else {
- // TODO: use the modern itinerary summary built for trip comparison.
+import TripSummary from './trip-summary'
- // For now, just capitalize the day fields from monitoredTrip.
- const capitalizedDays = dayFieldsToArray(monitoredTrip).map(
- day => `${day.charAt(0).toUpperCase()}${day.substr(1)}`
- )
+/**
+ * Displays the summary information of a monitored trip.
+ */
+const TripSummaryPane = ({ monitoredTrip }) => {
+ const { itinerary, leadTimeInMinutes } = monitoredTrip
- return (
- <>
-
+
+ )
+ } else {
+ const days = (
+
- Happens on: {capitalizedDays.join(', ')}
-
-
- Notifications:{' '}
-
- {monitoredTrip.isActive
- ? `${monitoredTrip.leadTimeInMinutes} min. before scheduled departure`
- : 'Disabled'}
-
-
-
- )
- }
+ return (
+ <>
+ {/* TODO: use the modern itinerary summary built for trip comparison. */}
+
+
+
+
+
+ )
}
}
diff --git a/lib/components/user/monitored-trip/trip-summary.js b/lib/components/user/monitored-trip/trip-summary.js
index a4ec3c8be..33746f126 100644
--- a/lib/components/user/monitored-trip/trip-summary.js
+++ b/lib/components/user/monitored-trip/trip-summary.js
@@ -1,27 +1,46 @@
-import coreUtils from '@opentripplanner/core-utils'
import { ClassicLegIcon } from '@opentripplanner/icons'
import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { connect } from 'react-redux'
+import FormattedDuration from '../../util/formatted-duration'
+import FormattedTimeRange from '../../util/formatted-time-range'
import ItinerarySummary from '../../narrative/default/itinerary-summary'
-const { formatDuration, formatTime } = coreUtils.time
-
-const TripSummary = ({ monitoredTrip }) => {
+const TripSummary = ({ monitoredTrip, use24HourFormat }) => {
const { itinerary } = monitoredTrip
const { duration, endTime, startTime } = itinerary
+ const timeFormat = use24HourFormat ? 'H:mm' : 'h:mm a'
// TODO: use the modern itinerary summary built for trip comparison.
return (
+ className='otp option default-itin active'
+ style={{borderTop: '0px', padding: '0px'}}
+ >
- Itinerary {' '}
- {formatDuration(duration)} {' '}
- {formatTime(startTime)}—{formatTime(endTime)}
+
+ {' '}
+
+ {' '}
+
+
- {link.text}
+
+
))}
Sign out
+
+
)
}
@@ -92,7 +97,7 @@ export default class NavLoginButton extends Component {
// Display the sign-in link if no profile is passed (user is not logged in).
return (
- Sign in
+
)
}
diff --git a/lib/components/user/new-account-wizard.js b/lib/components/user/new-account-wizard.js
index 4a76bbd62..9451e7d71 100644
--- a/lib/components/user/new-account-wizard.js
+++ b/lib/components/user/new-account-wizard.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
+import { FormattedMessage } from 'react-intl'
import AccountSetupFinishPane from './account-setup-finish-pane'
import NotificationPrefsPane from './notification-prefs-pane'
@@ -28,8 +29,7 @@ class NewAccountWizard extends Component {
// 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 props = this.props
- const { activePaneId, values: userData } = props
+ const { activePaneId, values: userData } = this.props
const {
hasConsentedToTerms,
notificationChannel = 'email'
@@ -40,44 +40,41 @@ class NewAccountWizard extends Component {
// and thus doesn't carry a nextId.
verify: {
hideNavigation: true,
- pane: VerifyEmailPane,
- props,
- title: 'Verify your email address'
+ pane: VerifyEmailPane
},
// eslint-disable-next-line sort-keys
terms: {
disableNext: !hasConsentedToTerms,
nextId: 'notifications',
onNext: this._handleCreateNewUser,
- pane: TermsOfUsePane,
- props,
- title: 'Create a new account'
+ pane: TermsOfUsePane
},
// eslint-disable-next-line sort-keys
notifications: {
disableNext: notificationChannel === 'sms' && !userData.phoneNumber,
nextId: 'places',
pane: NotificationPrefsPane,
- prevId: 'terms',
- props,
- title: 'Notification preferences'
+ prevId: 'terms'
},
places: {
nextId: 'finish',
pane: FavoritePlacesList,
- prevId: 'notifications',
- props,
- title: 'Add your locations'
+ prevId: 'notifications'
},
// eslint-disable-next-line sort-keys
finish: {
pane: AccountSetupFinishPane,
- prevId: 'places',
- props,
- title: 'Account setup complete!'
+ prevId: 'places'
}
}
+ // Pass props and title to each entry above
+ Object.keys(paneSequence).forEach(k => {
+ const pane = paneSequence[k]
+ pane.props = this.props
+ pane.title = ` in PhoneNumberEditor.
const codeValidationSchema = yup.object({
validationCode: yup.string()
- .required(VALIDATION_CODE_MSG)
- .matches(/^\d{6}$/, VALIDATION_CODE_MSG) // 6-digit string
+ .required()
+ .matches(/^\d{6}$/) // 6-digit string
})
/**
@@ -101,17 +90,19 @@ const NotificationPrefsPane = ({
return (
- You can receive notifications about trips you frequently take.
+
- How would you like to receive notifications?
+
+
- {allowedNotificationChannels.map(({ text, type }, index) => (
+ {allowedNotificationChannels.map((type, index) => (
// TODO: If removing the Save/Cancel buttons on the account screen,
// persist changes immediately when onChange is triggered.
- {text}
+
))}
@@ -132,7 +123,9 @@ const NotificationPrefsPane = ({
{notificationChannel === 'email' && (
- Notification emails will be sent to:
+
+
{email}
)}
@@ -147,7 +140,7 @@ const NotificationPrefsPane = ({
// (The validation for this component is independent of the validation set in UserAccountScreen.)
innerProps => {
return (
- a