From dd8a7d967791790f6fe19771fc98bf721a69cd51 Mon Sep 17 00:00:00 2001
From: aandrade <aandrade@camsys.com>
Date: Mon, 26 Aug 2024 13:43:58 -0400
Subject: [PATCH 1/3] [TDS-84] Add configurable booking management link to
 hamburger menu

---
 lib/components/app/app-menu.tsx | 13 +++++++++++++
 lib/config.js                   |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/lib/components/app/app-menu.tsx b/lib/components/app/app-menu.tsx
index 82994c773..c4a024ca4 100644
--- a/lib/components/app/app-menu.tsx
+++ b/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" />
diff --git a/lib/config.js b/lib/config.js
index f5e9a18f9..7cb17a380 100644
--- a/lib/config.js
+++ b/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,

From ef68cc96f6cc4262430a6b0616587ab3706f3c73 Mon Sep 17 00:00:00 2001
From: aandrade <aandrade@camsys.com>
Date: Tue, 27 Aug 2024 16:33:58 -0400
Subject: [PATCH 2/3] [TDS-83] Add and style booking link for itineraries that
 can be booked through the tds booking portal

---
 example.css                                   | 17 +++++++++++
 i18n/en-US.yml                                |  1 +
 .../line-itin/connected-itinerary-body.js     | 30 ++++++++++++-------
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/example.css b/example.css
index 6d16851ef..5787d6fa7 100644
--- a/example.css
+++ b/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;
diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 96e964ed1..89f000b99 100644
--- a/i18n/en-US.yml
+++ b/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!
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index b34128ff5..86a6d6628 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/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>

From cecf5e2fa9bb88aa9b970a725d4d7f2f0df3889a Mon Sep 17 00:00:00 2001
From: aandrade <aandrade@camsys.com>
Date: Tue, 27 Aug 2024 16:44:21 -0400
Subject: [PATCH 3/3] [TDS-83] Add booking link parameters to open in new tab

---
 lib/components/narrative/line-itin/connected-itinerary-body.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 86a6d6628..722e1dd41 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -131,7 +131,7 @@ class ConnectedItineraryBody extends Component {
         {bookingUrl && (
           <div className="booking-link">
             <p>OR</p>
-            <a href={bookingUrl}>
+            <a href={bookingUrl} rel="noreferrer" target="_blank">
               <Button className="tool-button">
                 <Icon type="book" withSpace />
                 <FormattedMessage id="common.forms.bookOnline" />