Camsys/v1/dev

example.css

@@ -67,6 +67,23 @@
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }
+.otp:not(.mobile) .sidebar .desktop-narrative-container div[class*=TripDetails-sc].with-booking-link {
+  border-bottom: none;
+  margin-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.otp:not(.mobile) .sidebar .desktop-narrative-container .booking-link {
+  border: 1px solid #003865;
+  border-top: none;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .otp .sidebar-footer a {
   color: #212121;
   text-decoration: underline;

i18n/en-US.yml

@@ -769,6 +769,7 @@ common:
   # Note to translator: these values are width-constrained.
   forms:
     back: Back
+    bookOnline: Book Online
     cancel: Cancel
     clear: Clear
     error: error!

lib/components/app/app-menu.tsx

@@ -182,6 +182,7 @@ class AppMenu extends Component<
     const { isPaneOpen } = this.state || false
     const { ContactLink } = this.context
     const { surveyProps } = this.context
+    const { bookingProps } = this.context
     return (
       <>
         <div
@@ -238,6 +239,18 @@ class AppMenu extends Component<
                 <FormattedMessage id={surveyProps.linkText} />
               </MenuItem>
             )}
+            {bookingProps &&
+              !!bookingProps.linkText &&
+              !!bookingProps.linkHref && (
+                <MenuItem
+                  className="menu-item"
+                  href={bookingProps.linkHref}
+                  target="_blank"
+                >
+                  <Icon type="book" />
+                  <FormattedMessage id={bookingProps.linkText} />
+                </MenuItem>
+              )}
             <MenuItem className="menu-item" onClick={this._startOver}>
               <Icon type="undo" />
               <FormattedMessage id="common.forms.startOver" />

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

@@ -1,11 +1,18 @@
 /* eslint-disable react/prop-types */
 // TODO: Typescript (otp-rr config object)
+import { Button } from 'react-bootstrap'
 import { clone, cloneDeep } from 'lodash'
+
+import { ComponentContext } from '../../../util/contexts'
 import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
 import {
   PlaceName as PlaceNameWrapper,
   PlaceRowWrapper
 } from '@opentripplanner/itinerary-body/lib/styled'
+import { setLegDiagram, setMapillaryId } from '../../../actions/map'
+import { setViewedTrip } from '../../../actions/ui'
+import Icon from '../../util/icon'
 import isEqual from 'lodash.isequal'
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
@@ -14,10 +21,6 @@ import React, { Component } from 'react'
 import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import styled from 'styled-components'
 import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
-
-import { ComponentContext } from '../../../util/contexts'
-import { setLegDiagram, setMapillaryId } from '../../../actions/map'
-import { setViewedTrip } from '../../../actions/ui'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
 
@@ -89,10 +92,8 @@ class ConnectedItineraryBody extends Component {
     })
 
     let bookingUrl = ''
-    console.log(itinerary.legs[0].bookingUrl)
     if (itinerary.legs && itinerary.legs[0] && itinerary.legs[0].bookingUrl) {
       bookingUrl = itinerary.legs[0].bookingUrl
-      console.log(bookingUrl)
     }
 
     return (
@@ -123,11 +124,20 @@ class ConnectedItineraryBody extends Component {
           TransitLegSubheader={TransitLegSubheader}
           TransitLegSummary={TransitLegSummary}
         />
-        <TripDetails itinerary={tripDetailItin} />
+        <TripDetails
+          className={bookingUrl ? 'with-booking-link' : ''}
+          itinerary={tripDetailItin}
+        />
         {bookingUrl && (
-          <a href={bookingUrl} rel="noreferrer" target="_blank">
-            [DEMO USE ONLY] Click here to book
-          </a>
+          <div className="booking-link">
+            <p>OR</p>
+            <a href={bookingUrl} rel="noreferrer" target="_blank">
+              <Button className="tool-button">
+                <Icon type="book" withSpace />
+                <FormattedMessage id="common.forms.bookOnline" />
+              </Button>
+            </a>
+          </div>
         )}
         <TripTools itinerary={itinerary} />
       </ItineraryBodyContainer>

lib/config.js

@@ -30,6 +30,11 @@ const surveyProps = {
   linkText: 'Survey',
   menuOnly: false
 }
+const bookingProps = {
+  linkHref: '',
+  linkText: 'Manage Bookings',
+  menuOnly: true
+}
 class ContactLink extends Component {
   static propTypes = {
     linkHref: PropTypes.string,
@@ -90,6 +95,7 @@ class ContactLink extends Component {
  */
 export function configure(otpConfig) {
   return {
+    bookingProps,
     ContactLink,
     ItineraryBody,
     ItineraryFooter,