diff --git a/i18n/en-US.yml b/i18n/en-US.yml index 08367b1dd..3faa3cca6 100644 --- a/i18n/en-US.yml +++ b/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 diff --git a/i18n/fr.yml b/i18n/fr.yml index 9e0995ef6..7b94eac4e 100644 --- a/i18n/fr.yml +++ b/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é diff --git a/lib/components/user/monitored-trip/saved-trip-list.tsx b/lib/components/user/monitored-trip/saved-trip-list.tsx index 135884db1..3dc7284be 100644 --- a/lib/components/user/monitored-trip/saved-trip-list.tsx +++ b/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 { } 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 { return ( + {alerts && alerts.length > 0 && ( + + + + + + )} {trip.tripName} @@ -165,6 +180,16 @@ class TripListItem extends Component { } // 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)) diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts index ae2c07e0d..d5137b6ac 100644 --- a/lib/components/user/styled.ts +++ b/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;