feat(trip-details): make use of enhanced fare display

Author: miles-grant-ibigroup

lib/components/narrative/connected-trip-details.js

@@ -13,6 +13,8 @@ const TripDetails = styled(TripDetailsBase)`
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    defaultFare: state.otp.config.itinerary?.defaultFare || undefined,
+    keyMap: state.otp.config.itinerary?.fareKeyMap || {},
     longDateFormat: coreUtils.time.getLongDateFormat(state.otp.config),
     messages: state.otp.config.language.tripDetails,
     routingType: state.otp.currentQuery.routingType,

lib/components/narrative/default/default-itinerary.js

@@ -102,13 +102,13 @@ const ITINERARY_ATTRIBUTES = [
   {
     id: 'cost',
     order: 2,
-    render: (itinerary, options) => {
+    render: (itinerary, options, defaultFare = 'regular') => {
       return (
         <FormattedNumber
           currency={options.currency}
           currencyDisplay='narrowSymbol'
           style='currency'
-          value={getTotalFare(itinerary, options.configCosts) / 100}
+          value={getTotalFare(itinerary, options.configCosts, defaultFare) / 100}
         />
       )
     }
@@ -166,6 +166,7 @@ class DefaultItinerary extends NarrativeItinerary {
       active,
       configCosts,
       currency,
+      defaultFare,
       expanded,
       itinerary,
       LegIcon,
@@ -214,7 +215,7 @@ class DefaultItinerary extends NarrativeItinerary {
                 options.currency = currency
                 return (
                   <li className={`${attribute.id}${isSelected ? ' main' : ''}`} key={attribute.id}>
-                    {attribute.render(itinerary, options)}
+                    {attribute.render(itinerary, options, defaultFare)}
                   </li>
                 )
               })
@@ -245,7 +246,8 @@ const mapStateToProps = (state, ownProps) => {
     // The configured (ambient) currency is needed for rendering the cost
     // of itineraries whether they include a fare or not, in which case
     // we show $0.00 or its equivalent in the configured currency and selected locale.
-    currency: state.otp.config.localization?.currency || 'USD'
+    currency: state.otp.config.localization?.currency || 'USD',
+    defaultFare: state.otp.config.itinerary?.defaultFare
   }
 }
 

lib/components/narrative/line-itin/itin-summary.js

@@ -87,14 +87,15 @@ export class ItinerarySummary extends Component {
   }
 
   render () {
-    const { currency, itinerary } = this.props
+    const { currency, defaultFare, itinerary } = this.props
     const { LegIcon } = this.context
 
     const {
       maxTNCFare,
       minTNCFare,
-      transitFare
+      transitFares
     } = coreUtils.itinerary.calculateFares(itinerary)
+    const transitFare = transitFares[defaultFare]?.transitFare
     // TODO: support non-USD
     const minTotalFare = minTNCFare * 100 + transitFare
     const maxTotalFare = maxTNCFare * 100 + transitFare
@@ -210,7 +211,8 @@ function getRouteColorForBadge (leg) {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    currency: state.otp.config.localization?.currency || 'USD'
+    currency: state.otp.config.localization?.currency || 'USD',
+    defaultFare: state.otp.config.itinerary?.defaultFare
   }
 }
 export default connect(mapStateToProps)(ItinerarySummary)

lib/components/narrative/tabbed-itineraries.js

@@ -118,15 +118,16 @@ class TabButton extends Component {
   }
 
   render () {
-    const {currency, index, isActive, itinerary} = this.props
+    const {currency, defaultFare, index, isActive, itinerary} = this.props
     const classNames = ['tab-button', 'clear-button-formatting']
     const { caloriesBurned } = calculatePhysicalActivity(itinerary)
     const {
       maxTNCFare,
       minTNCFare,
-      transitFare
+      transitFares
     } = calculateFares(itinerary)
     // TODO: support non-USD
+    const transitFare = transitFares[defaultFare]?.transitFare
     const minTotalFare = minTNCFare * 100 + transitFare
     if (isActive) classNames.push('selected')
     return (
@@ -207,6 +208,7 @@ const mapStateToProps = (state, ownProps) => {
     activeStep: activeSearch && activeSearch.activeStep,
     companies: state.otp.currentQuery.companies,
     currency,
+    defaultFare: state.otp.config.itinerary?.defaultFare,
     pending,
     // swap out realtime itineraries with non-realtime depending on boolean
     realtimeEffects,

lib/util/state.js

@@ -330,7 +330,7 @@ function calculateItineraryCost (itinerary, config = {}) {
   // If config contains values to override defaults, apply those.
   const configWeights = config.itinerary && config.itinerary.weights
   if (configWeights) Object.assign(weights, configWeights)
-  return getTotalFare(itinerary, config.itinerary?.costs) * weights.fareFactor +
+  return getTotalFare(itinerary, config.itinerary?.costs, config.itinerary?.defaultFare) * weights.fareFactor +
     itinerary.duration * weights.durationFactor +
     itinerary.walkDistance * weights.walkReluctance +
     getDriveTime(itinerary) * weights.driveReluctance +
@@ -369,9 +369,10 @@ const DEFAULT_COSTS = {
  * FIXME: Move to otp-ui?
  * TODO: Add GBFS fares
  */
-export function getTotalFare (itinerary, configCosts = {}) {
+export function getTotalFare (itinerary, configCosts = {}, defaultFare = 'regular') {
   // Get transit/TNC fares.
-  const {maxTNCFare, transitFare} = calculateFares(itinerary)
+  const {maxTNCFare, transitFares} = calculateFares(itinerary)
+  const transitFare = transitFares[defaultFare]?.transitFare
   // Start with default cost values.
   const costs = DEFAULT_COSTS
   // If config contains values to override defaults, apply those.