Add alert tag on saved trips

i18n/en-US.yml

@@ -513,6 +513,7 @@ components:
     tripNotFoundDescription: Sorry, the requested trip was not found.
     tripNotifications: Trip notifications
   SavedTripList:
+    alertTag: "{alert, plural, one {View one alert} other {View # alerts}}"
     fromTo: From {from} to {to}
     myTrips: My trips
     noSavedTrips: You have no saved trips

i18n/fr.yml

@@ -532,6 +532,7 @@ components:
     tripNotFoundDescription: Le trajet recherché est introuvable.
     tripNotifications: Notifications du trajet
   SavedTripList:
+    alertTag: "{alert, plural, one {Afficher une alerte} other {Afficher # alertes}}"
     fromTo: De {from} à {to}
     myTrips: Mes trajets
     noSavedTrips: Vous n'avez aucun trajet enregistré

lib/components/user/monitored-trip/saved-trip-list.tsx

@@ -5,6 +5,7 @@ import { Pause } from '@styled-icons/fa-solid/Pause'
 import { PencilAlt } from '@styled-icons/fa-solid/PencilAlt'
 import { Play } from '@styled-icons/fa-solid/Play'
 import { Trash } from '@styled-icons/fa-solid/Trash'
+import { TriangleExclamation } from '@styled-icons/fa-solid/TriangleExclamation'
 import { withAuthenticationRequired } from '@auth0/auth0-react'
 import React, { Component } from 'react'
 
@@ -17,6 +18,7 @@ import { MonitoredTrip } from '../types'
 import {
   PageHeading,
   TripHeader,
+  TripPanelAlert,
   TripPanelFooter,
   TripPanelHeading
 } from '../styled'
@@ -28,11 +30,13 @@ import BackToTripPlanner from '../back-to-trip-planner'
 import PageTitle from '../../util/page-title'
 import withLoggedInUserSupport from '../with-logged-in-user-support'
 
+import getRenderData from './trip-status-rendering-strategies'
 import TripSummaryPane from './trip-summary-pane'
 
 interface ItemProps {
   confirmAndDeleteUserMonitoredTrip: (id: string, intl: IntlShape) => void
   intl: IntlShape
+  renderData: any
   routeTo: (url: any) => void
   togglePauseTrip: (trip: MonitoredTrip, intl: IntlShape) => void
   trip: MonitoredTrip
@@ -92,9 +96,10 @@ class TripListItem extends Component<ItemProps, ItemState> {
   }
 
   render() {
-    const { trip } = this.props
+    const { renderData, trip } = this.props
     const { itinerary } = trip
     const { legs } = itinerary
+    const { alerts } = renderData
     // Assuming the monitored itinerary has at least one leg:
     // - get the 'from' location of the first leg,
     // - get the 'to' location of the last leg.
@@ -103,6 +108,16 @@ class TripListItem extends Component<ItemProps, ItemState> {
     return (
       <Panel>
         <TripPanelHeading>
+          {alerts && alerts.length > 0 && (
+            <TripPanelAlert onClick={this._handleEditTrip}>
+              <IconWithText Icon={TriangleExclamation}>
+                <FormattedMessage
+                  id="components.SavedTripList.alertTag"
+                  values={{ alert: alerts.length }}
+                />
+              </IconWithText>
+            </TripPanelAlert>
+          )}
           <Panel.Title>
             <TripHeader>{trip.tripName}</TripHeader>
             <small>
@@ -165,6 +180,16 @@ class TripListItem extends Component<ItemProps, ItemState> {
 }
 
 // connect to the redux store
+const itemMapStateToProps = (ownProps: ItemProps) => {
+  const { trip } = ownProps
+  const renderData = getRenderData({
+    monitoredTrip: trip
+  })
+
+  return {
+    renderData
+  }
+}
 
 const itemMapDispatchToProps = {
   confirmAndDeleteUserMonitoredTrip:
@@ -173,7 +198,7 @@ const itemMapDispatchToProps = {
   togglePauseTrip: userActions.togglePauseTrip
 }
 const ConnectedTripListItem = connect(
-  null,
+  itemMapStateToProps,
   itemMapDispatchToProps
 )(injectIntl(TripListItem))
 

lib/components/user/styled.ts

@@ -1,6 +1,8 @@
-import { Panel } from 'react-bootstrap'
+import { Button, Panel } from 'react-bootstrap'
 import styled, { css } from 'styled-components'
 
+import { RED_ON_WHITE } from '../util/colors'
+
 export const PageHeading = styled.h2`
   margin: 10px 0px 45px 0px;
 `
@@ -48,6 +50,18 @@ export const TripPanelHeading = styled(Panel.Heading)`
   background-color: white !important;
 `
 
+export const TripPanelAlert = styled.a`
+  color: ${RED_ON_WHITE};
+  cursor: pointer;
+  float: right;
+  text-decoration: underline;
+  &:hover {
+    background-color: transparent;
+    color: ${RED_ON_WHITE};
+    opacity: 80%;
+  }
+`
+
 export const TripPanelFooter = styled(Panel.Footer)`
   background-color: white !important;
   padding: 0px;