Add mini react-intl i18n implementation.

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

@@ -98,6 +98,8 @@ Object {
   },
   "ui": Object {
     "diagramLeg": null,
+    "locale": null,
+    "localizedMessages": Object {},
     "mobileScreen": 1,
     "printView": false,
   },

example-config.yml

@@ -259,6 +259,29 @@ itinerary:
 #       - WALK
 #       - BICYCLE
 
+### Language section to override strings.
+### Strings can be set globally for all languages (e.g. for strings that are brands/nouns,
+### e.g. TriMet's "TransitTracker") or by language.
+### The nested structure should be the same as the language files under the i18n folder.
+# language:
+#   allLanguages
+#     common:
+#       accessModes:
+#         bikeshare: Relay Bike
+#   en-US:
+#     common:
+#       accessModes:
+#         bikeshare: Blue Bike
+
+### Localization section to provide language/locale settings
+#localization:
+#  # An ambient currency should be defined here (defaults to USD).
+#  # In some components such as DefaultItinerary, we display a cost element
+#  # that falls back to $0.00 (or its equivalent in the configured ambient currency
+#  # and in the user-selected locale) if no fare or currency info is available.
+#  currency: 'USD' 
+#  defaultLocale: 'en-US'
+
 ### If using OTP Middleware, you can define the optional phone number options below.
 # phoneFormatOptions:
 #  # ISO 2-letter country code for phone number formats (defaults to 'US')

i18n/en-US.yml

@@ -0,0 +1,65 @@
+_id: en-US
+_name: English
+
+# 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
+#           otpTransitModes
+#             subway: Metro#
+#     then use the snippet below with the corresponding message id:
+#         <FormattedMessage id='common.otpTransitModes.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 is a 'components' category and a 'common' category.
+#     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.
+
+
+# Component-specific messages (e.g. button captions)
+# are defined for each component under the 'components' category.
+components:
+  DefaultItinerary:
+    clickDetails: Click to view details
+    # Use ordered placeholders for the departure-arrival string
+    # (this will accommodate right-to-left languages by swapping the order in this string).
+    departureArrivalTimes: "{startTime}—{endTime}"
+    # Use ordered placeholders when multiple modes are involved
+    # (this will accommodate right-to-left languages by swapping the order/separator in this string).
+    multiModeSummary: "{accessMode} to {transitMode}"
+    # If trip is less than one hour only display the minutes.
+    tripDurationFormatZeroHours: "{minutes, number} min"
+    # TODO: Distinguish between one hour (singular) and 2 hours or more?
+    tripDurationFormat: "{hours, number} hr {minutes, number} min"
+
+# Common messages that appear in multiple components and modules
+# are grouped below by topic.
+common:
+  # OTP access modes
+  accessModes:
+    bike: Bike
+    bikeshare: Bikeshare
+    drive: Drive
+    micromobility: E-Scooter
+    micromobilityRent: Rental E-Scooter
+    walk: Walk 
+
+  # OTP transit modes
+  # Note that identifiers are OTP modes converted to lowercase.
+  otpTransitModes:
+    tram: Streetcar
+    subway: Subway
+    rail: Rail
+    bus: Bus
+    ferry: Ferry
+    # The original OTP mode id is CABLE_CAR. Lowercase makes it cable_car.
+    cable_car: Cable Car
+    gondola: Gondola
+    funicular: Funicular

i18n/fr-FR.yml

@@ -0,0 +1,29 @@
+_id: fr-FR
+_name: Unofficial French Translations!
+
+components:
+  DefaultItinerary:
+    clickDetails: Cliquez pour afficher les détails
+    departureArrivalTimes: "{startTime}—{endTime}"
+    multiModeSummary: "{accessMode} + {transitMode}"
+    tripDurationFormatZeroHours: "{minutes, number} mn"
+    tripDurationFormat: "{hours, number} h, {minutes, number} mn"
+
+common:
+  accessModes:
+    bike: Vélo
+    bikeshare: Vélo en libre-service
+    drive: Voiture
+    micromobility: Trottinette électrique
+    micromobilityRent: Trottinette électrique en libre-service
+    walk: Marche
+
+  otpTransitModes:
+    tram: Tram
+    subway: Métro
+    rail: Train
+    bus: Bus
+    ferry: Ferry
+    cable_car: Tram tiré par câble
+    gondola: Téléphérique
+    funicular: Funiculaire

lib/actions/ui.js

@@ -4,6 +4,7 @@ import { createAction } from 'redux-actions'
 import { matchPath } from 'react-router'
 
 import { getUiUrlParams } from '../util/state'
+import { getDefaultLocale, loadLocaleData } from '../util/i18n'
 
 import { findRoute, setUrlSearch } from './api'
 import { setMapCenter, setMapZoom, setRouterId } from './config'
@@ -15,6 +16,8 @@ import {
 import { clearLocation } from './map'
 import { setActiveItinerary } from './narrative'
 
+const updateLocale = createAction('UPDATE_LOCALE')
+
 /**
  * Wrapper function for history#push (or, if specified, replace, etc.)
  * that preserves the current search or, if
@@ -312,3 +315,20 @@ export function showMobileSearchScreen () {
     dispatch(setMobileScreen(MobileScreens.SEARCH_FORM))
   }
 }
+
+/**
+ * Sets the locale to the specified value,
+ * and loads the corresponding localized messages.
+ * If the specified locale is null, fall back to the defaultLocale
+ * set in the configuration.
+ */
+export function setLocale (locale) {
+  return async function (dispatch, getState) {
+    const { config } = getState().otp
+    const { language: customMessages } = config
+    const effectiveLocale = locale || getDefaultLocale(config)
+    const messages = await loadLocaleData(effectiveLocale, customMessages)
+
+    dispatch(updateLocale({ locale: effectiveLocale, messages }))
+  }
+}

lib/actions/user.js

@@ -34,7 +34,8 @@ function createNewUser (auth0User) {
     notificationChannel: 'email',
     phoneNumber: '',
     savedLocations: [],
-    storeTripHistory: false // User must opt in.
+    storeTripHistory: false, // User must opt in.
+    use24HourFormat: true
   }
 }