[TDS-83] Add and style booking link for itineraries that can be booke…

…d through the tds booking portal

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/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}>
+              <Button className="tool-button">
+                <Icon type="book" withSpace />
+                <FormattedMessage id="common.forms.bookOnline" />
+              </Button>
+            </a>
+          </div>
         )}
         <TripTools itinerary={itinerary} />
       </ItineraryBodyContainer>