Add TOS Link from Config

example-config.yml

@@ -35,6 +35,11 @@ api:
 #   mobile: BOTH_LOCATIONS_CHANGED
 #   default: ONE_LOCATION_CHANGED
 
+### If Terms of Service is hosted at an outside link, provide it here. If translations 
+### are provided, host each translation by including the language code (eg. en-US, fr, es) 
+### in the URL and use {locale} to represent the language in the link below
+# termsOfServiceLink:
+
 ### The default query parameters can be overridden be uncommenting this object.
 ### Note: the override values must be valid values within otp-ui's query-params.js
 # defaultQueryParams:

lib/components/user/terms-of-use-pane.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
 import React, { FormEventHandler } from 'react'
 
+import { AppReduxState } from '../../util/state-types'
 import { LinkOpensNewWindow } from '../util/externalLink'
 import {
   TERMS_OF_SERVICE_PATH,
@@ -16,11 +17,15 @@ const TermsOfUsePane = ({
   disableCheckTerms,
   handleBlur,
   handleChange,
+  locale,
+  termsOfServiceLink,
   values: userData
 }: {
   disableCheckTerms: boolean
   handleBlur: () => void
   handleChange: FormEventHandler<Checkbox>
+  locale: string
+  termsOfServiceLink?: string
   values: {
     hasConsentedToTerms: boolean
     storeTripHistory: boolean
@@ -29,6 +34,10 @@ const TermsOfUsePane = ({
   const intl = useIntl()
   const { hasConsentedToTerms, storeTripHistory } = userData
 
+  const TOSLinkWithI18n = termsOfServiceLink?.replace('{locale}', locale)
+
+  const termsURL = TOSLinkWithI18n || `/#${TERMS_OF_SERVICE_PATH}`
+
   return (
     <div>
       <ControlLabel>
@@ -46,11 +55,7 @@ const TermsOfUsePane = ({
             id="components.TermsOfUsePane.termsOfServiceStatement"
             values={{
               termsOfUseLink: (contents: JSX.Element) => (
-                <LinkOpensNewWindow
-                  contents={contents}
-                  inline
-                  url={`/#${TERMS_OF_SERVICE_PATH}`}
-                />
+                <LinkOpensNewWindow contents={contents} inline url={termsURL} />
               )
             }}
           />
@@ -97,8 +102,10 @@ const TermsOfUsePane = ({
     </div>
   )
 }
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppReduxState) => {
   return {
+    locale: state.otp.ui?.locale,
+    termsOfServiceLink: state.otp.config.termsOfServiceLink,
     termsOfStorageSet: state.otp.config.persistence?.terms_of_storage
   }
 }

lib/util/config-types.ts

@@ -104,6 +104,8 @@ export type PersistenceConfig = (
   | MiddlewarePersistenceConfig
 ) & {
   enabled?: boolean
+  // eslint-disable-next-line camelcase
+  terms_of_storage?: boolean
 }
 
 /** Popup target settings */
@@ -370,6 +372,8 @@ export interface AppConfig {
   /** Whether to show the x minutes late/early in the itinerary body */
   showScheduleDeviation?: boolean
   stopViewer?: StopViewerConfig
+  /** Externally hosted terms of service URL */
+  termsOfServiceLink?: string
   /** App title shown in the browser title bar. */
   title?: string
   transitOperators?: TransitOperatorConfig[]