From b708163ca79bb1711122ecbe3842507659d4f4ed Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 8 Mar 2021 11:09:01 -0500
Subject: [PATCH 1/3] fix(ResponsiveWebApp): Implement terms routes and
 component stubs.

---
 example.js                               | 21 ++++++++++++-
 lib/components/app/app-frame.js          | 40 ++++++++++++++++++++++++
 lib/components/app/responsive-webapp.js  | 13 +++++++-
 lib/components/user/account-page.js      | 18 +++--------
 lib/components/user/terms-of-use-pane.js |  6 ++--
 lib/util/constants.js                    |  2 ++
 6 files changed, 82 insertions(+), 18 deletions(-)
 create mode 100644 lib/components/app/app-frame.js

diff --git a/example.js b/example.js
index 1845f3ee5..7cd41139c 100644
--- a/example.js
+++ b/example.js
@@ -47,16 +47,35 @@ if (useCustomIcons) {
   MyModeIcon = CustomIcons.CustomModeIcon
 }
 
+// Stubs for terms of service/storage for development purposes only.
+// These components should be placed in their own files with appropriate content.
+const TermsOfService = () => (
+  <>
+    <h1>Terms of Service</h1>
+    <p>Content for terms of service.</p>
+  </>
+)
+const TermsOfStorage = () => (
+  <>
+    <h1>Terms of Storage</h1>
+    <p>Content for terms of storage.</p>
+  </>
+)
+
 // define some application-wide components that should be used in
 // various places. The following components can be provided here:
 // - ItineraryBody (required)
 // - ItineraryFooter (optional)
 // - LegIcon (required)
 // - ModeIcon (required)
+// - PrivacyPolicy (optional)
+// - TermsAndConditions (optional)
 const components = {
   ItineraryBody: DefaultItinerary,
   LegIcon: MyLegIcon,
-  ModeIcon: MyModeIcon
+  ModeIcon: MyModeIcon,
+  TermsOfService,
+  TermsOfStorage
 }
 
 // Get the initial query from config (for demo/testing purposes).
diff --git a/lib/components/app/app-frame.js b/lib/components/app/app-frame.js
new file mode 100644
index 000000000..e6dc00129
--- /dev/null
+++ b/lib/components/app/app-frame.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+
+import DesktopNav from './desktop-nav'
+
+/**
+ * This component defines the general application frame, to which
+ * content and an optional sub-navigation component can be inserted.
+ */
+const AppFrame = ({ children, SubNav }) => (
+  <div className='otp'>
+    {/* TODO: Do mobile view. */}
+    <DesktopNav />
+    {SubNav && <SubNav />}
+    <div className='container'>
+      <Row xs={12}>
+        <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+          {children}
+        </Col>
+      </Row>
+    </div>
+  </div>
+)
+
+/**
+ * Creates a simple wrapper component consisting of an AppFrame that surrounds
+ * the provided component. (Displays "no content" if none provided.)
+ */
+export function frame (Component) {
+  return () => (
+    <AppFrame>
+      {Component
+        ? <Component />
+        : <p>No content provided.</p>
+      }
+    </AppFrame>
+  )
+}
+
+export default AppFrame
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index 1a57a467f..b2f3f5f22 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -9,7 +9,6 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Route, Switch, withRouter } from 'react-router'
 
-import PrintLayout from './print-layout'
 import * as authActions from '../../actions/auth'
 import * as callTakerActions from '../../actions/call-taker'
 import * as configActions from '../../actions/config'
@@ -17,7 +16,9 @@ import * as formActions from '../../actions/form'
 import * as locationActions from '../../actions/location'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
+import { frame } from '../app/app-frame'
 import { RedirectWithQuery } from '../form/connected-links'
+import PrintLayout from './print-layout'
 import { getAuth0Config } from '../../util/auth'
 import {
   ACCOUNT_PATH,
@@ -28,6 +29,8 @@ import {
   CREATE_ACCOUNT_PLACES_PATH,
   CREATE_ACCOUNT_VERIFY_PATH,
   PLACES_PATH,
+  TERMS_OF_SERVICE_PATH,
+  TERMS_OF_STORAGE_PATH,
   TRIPS_PATH,
   URL_ROOT
 } from '../../util/constants'
@@ -280,6 +283,14 @@ class RouterWrapperWithAuth0 extends Component {
               component={UserAccountScreen}
               path={[`${CREATE_ACCOUNT_PATH}/:step`, ACCOUNT_SETTINGS_PATH]}
             />
+            <Route
+              component={frame(components.TermsOfService)}
+              path={TERMS_OF_SERVICE_PATH}
+            />
+            <Route
+              component={frame(components.TermsOfStorage)}
+              path={TERMS_OF_STORAGE_PATH}
+            />
             <Route
               component={SavedTripList}
               path={TRIPS_PATH}
diff --git a/lib/components/user/account-page.js b/lib/components/user/account-page.js
index fac69d7f0..6a412f40b 100644
--- a/lib/components/user/account-page.js
+++ b/lib/components/user/account-page.js
@@ -1,7 +1,6 @@
 import { withAuthenticationRequired } from '@auth0/auth0-react'
 import { replace } from 'connected-react-router'
 import React, { Component } from 'react'
-import { Col, Row } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
 import * as uiActions from '../../actions/ui'
@@ -12,7 +11,7 @@ import {
 } from '../../util/constants'
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
 import withLoggedInUserSupport from './with-logged-in-user-support'
-import DesktopNav from '../app/desktop-nav'
+import AppFrame from '../app/app-frame'
 import SubNav from './sub-nav'
 
 /**
@@ -42,18 +41,9 @@ class AccountPage extends Component {
   render () {
     const {children, subnav = true} = this.props
     return (
-      <div className='otp'>
-        {/* TODO: Do mobile view. */}
-        <DesktopNav />
-        {subnav && <SubNav />}
-        <div className='container'>
-          <Row xs={12}>
-            <Col xs={12} sm={10} smOffset={1} md={8} mdOffset={2}>
-              {children}
-            </Col>
-          </Row>
-        </div>
-      </div>
+      <AppFrame SubNav={subnav && SubNav}>
+        {children}
+      </AppFrame>
     )
   }
 }
diff --git a/lib/components/user/terms-of-use-pane.js b/lib/components/user/terms-of-use-pane.js
index e220d4588..fa723c582 100644
--- a/lib/components/user/terms-of-use-pane.js
+++ b/lib/components/user/terms-of-use-pane.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
 
+import { TERMS_OF_SERVICE_PATH, TERMS_OF_STORAGE_PATH } from '../../util/constants'
+
 /**
  * User terms of use pane.
  */
@@ -28,7 +30,7 @@ const TermsOfUsePane = ({
           onChange={disableCheckTerms ? null : handleChange}
         >
           {/* TODO: Implement the link */}
-            I have read and consent to the <a href='/#/terms-of-service'>Terms of Service</a> for using the Trip Planner.
+            I have read and consent to the <a href={`/#${TERMS_OF_SERVICE_PATH}`} target='_blank'>Terms of Service</a> for using the Trip Planner.
         </Checkbox>
       </FormGroup>
 
@@ -41,7 +43,7 @@ const TermsOfUsePane = ({
         >
           {/* TODO: Implement the link */}
             Optional: I consent to the Trip Planner storing my historical planned trips in order to
-            improve transit services in my area. <a href='/#/terms-of-storage'>More info...</a>
+            improve transit services in my area. <a href={`/#${TERMS_OF_STORAGE_PATH}`} target='_blank'>More info...</a>
         </Checkbox>
       </FormGroup>
     </div>
diff --git a/lib/util/constants.js b/lib/util/constants.js
index 2d5f69964..b37da6ead 100644
--- a/lib/util/constants.js
+++ b/lib/util/constants.js
@@ -19,6 +19,8 @@ export const CREATE_ACCOUNT_TERMS_PATH = `${CREATE_ACCOUNT_PATH}/terms`
 export const CREATE_ACCOUNT_VERIFY_PATH = `${CREATE_ACCOUNT_PATH}/verify`
 export const CREATE_ACCOUNT_PLACES_PATH = `${CREATE_ACCOUNT_PATH}/places`
 export const CREATE_TRIP_PATH = `${TRIPS_PATH}/new`
+export const TERMS_OF_SERVICE_PATH = `/terms-of-service`
+export const TERMS_OF_STORAGE_PATH = `/terms-of-storage`
 
 // Gets the root URL, e.g. https://otp-instance.example.com:8080, computed once for all.
 // TODO: support root URLs that involve paths or subfolders, as in https://otp-ui.example.com/path-to-ui/

From f95638817c7736ad80cb0d6a83f1e52ee3581ebc Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 8 Mar 2021 15:41:33 -0500
Subject: [PATCH 2/3] refactor(NotFound): Add enhanced format for not found
 content.

---
 lib/components/app/app-frame.js |  3 ++-
 lib/components/app/not-found.js | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 lib/components/app/not-found.js

diff --git a/lib/components/app/app-frame.js b/lib/components/app/app-frame.js
index e6dc00129..a1719ba8a 100644
--- a/lib/components/app/app-frame.js
+++ b/lib/components/app/app-frame.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { Col, Row } from 'react-bootstrap'
 
 import DesktopNav from './desktop-nav'
+import NotFound from './not-found'
 
 /**
  * This component defines the general application frame, to which
@@ -31,7 +32,7 @@ export function frame (Component) {
     <AppFrame>
       {Component
         ? <Component />
-        : <p>No content provided.</p>
+        : <NotFound />
       }
     </AppFrame>
   )
diff --git a/lib/components/app/not-found.js b/lib/components/app/not-found.js
new file mode 100644
index 000000000..4733b08b7
--- /dev/null
+++ b/lib/components/app/not-found.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Alert, Glyphicon } from 'react-bootstrap'
+import styled from 'styled-components'
+
+const StyledAlert = styled(Alert)`
+  margin-top: 25px;
+`
+
+/**
+ * Displays a not-found alert if some content is not found.
+ */
+const NotFound = () => (
+  <StyledAlert bsStyle='warning'>
+    <h1><Glyphicon glyph='alert' /> Content not found</h1>
+    <p>The content you requested is not available.</p>
+  </StyledAlert>
+)
+
+export default NotFound

From 7c1513e34b29b6548a7793176b9f44a10b195385 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 12 Mar 2021 11:10:02 -0500
Subject: [PATCH 3/3] refactor(example.js): Tweak comments

---
 example.js                      | 6 ++++--
 lib/components/app/app-frame.js | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/example.js b/example.js
index 51e8576ed..9c42dafe0 100644
--- a/example.js
+++ b/example.js
@@ -50,6 +50,8 @@ if (useCustomIcons) {
 }
 
 // Stubs for terms of service/storage for development purposes only.
+// They are required if otpConfig.persistence.strategy === 'otp_middleware'
+// (otherwise, a "Content not found" box will be shown).
 // These components should be placed in their own files with appropriate content.
 const TermsOfService = () => (
   <>
@@ -75,8 +77,8 @@ const TermsOfStorage = () => (
 // - MapWindows (optional)
 // - MobileSearchScreen (required)
 // - ModeIcon (required)
-// - PrivacyPolicy (optional)
-// - TermsAndConditions (optional)
+// - TermsOfService (required if otpConfig.persistence.strategy === 'otp_middleware')
+// - TermsOfStorage (required if otpConfig.persistence.strategy === 'otp_middleware')
 const components = {
   defaultMobileTitle: () => <div className='navbar-title'>OpenTripPlanner</div>,
   ItineraryBody: DefaultItinerary,
diff --git a/lib/components/app/app-frame.js b/lib/components/app/app-frame.js
index a1719ba8a..30aa4776f 100644
--- a/lib/components/app/app-frame.js
+++ b/lib/components/app/app-frame.js
@@ -25,7 +25,7 @@ const AppFrame = ({ children, SubNav }) => (
 
 /**
  * Creates a simple wrapper component consisting of an AppFrame that surrounds
- * the provided component. (Displays "no content" if none provided.)
+ * the provided component. (Displays "Content not found" if none provided.)
  */
 export function frame (Component) {
   return () => (