Fare Table comaptibility with OTP2 FareProduct API

packages/core-utils/src/__tests__/itinerary.js

@@ -94,18 +94,20 @@ describe("util > itinerary", () => {
     const leg = {
       fareProducts: [
         {
+          id: "testId",
           product: {
             medium: { id: "cash" },
-            riderCategory: { id: "regular" },
             name: "rideCost",
-            price: { amount: 200, currency: "USD" }
+            price: { amount: 200, currency: "USD" },
+            riderCategory: { id: "regular" }
           }
         },
         {
+          id: "testId",
           product: {
+            medium: { id: "cash" },
             name: "transfer",
             price: { amount: 50, currency: "USD" },
-            medium: { id: "cash" },
             riderCategory: { id: "regular" }
           }
         }
@@ -141,7 +143,10 @@ describe("util > itinerary", () => {
         "orca:regular"
       );
       expect(result.amount).toEqual(5.75);
-      expect(result.currency).toMatchSnapshot();
+      expect(result.currency).toEqual({
+        code: "USD",
+        digits: 2
+      });
     });
     it("should return undefined when the keys are invalid", () => {
       const result = getItineraryCost(

packages/itinerary-body/src/ItineraryBody/index.tsx

@@ -18,6 +18,7 @@ const ItineraryBody = ({
   alwaysCollapseAlerts = false,
   className,
   config,
+  defaultFareSelector,
   diagramVisible,
   frameLeg = noop,
   itinerary,
@@ -61,6 +62,7 @@ const ItineraryBody = ({
           // eslint-disable-next-line react/no-array-index-key
           key={i + (isDestination ? 1 : 0)}
           config={config}
+          defaultFareSelector={defaultFareSelector}
           diagramVisible={diagramVisible}
           followsTransit={followsTransit}
           frameLeg={frameLeg}

packages/itinerary-body/src/ItineraryBody/place-row.tsx

@@ -45,6 +45,7 @@ export default function PlaceRow({
   TimeColumnContent = DefaultTimeColumnContent,
   toRouteAbbreviation,
   TransitLegSubheader,
+  defaultFareSelector,
   TransitLegSummary
 }: PlaceRowProps): ReactElement {
   // NOTE: Previously there was a check for itineraries that changed vehicles
@@ -146,6 +147,7 @@ export default function PlaceRow({
               timeZone={config.homeTimezone}
               TransitLegSubheader={TransitLegSubheader}
               TransitLegSummary={TransitLegSummary}
+              defaultFareSelector={defaultFareSelector}
               transitOperator={coreUtils.route.getTransitOperatorFromLeg(
                 leg,
                 config.transitOperators

packages/itinerary-body/src/TransitLegBody/index.tsx

@@ -14,7 +14,7 @@ import {
   injectIntl,
   IntlShape
 } from "react-intl";
-import { getLegCost } from "@opentripplanner/core-utils/lib/itinerary";
+
 import { Duration } from "../defaults";
 
 import * as S from "../styled";
@@ -35,11 +35,12 @@ interface Props {
   AlertBodyIcon?: FunctionComponent;
   AlertToggleIcon?: FunctionComponent;
   alwaysCollapseAlerts: boolean;
+  defaultFareSelector?: FareProductSelector;
   intl: IntlShape;
   leg: Leg;
+  legDestination: string;
   LegIcon: LegIconComponent;
   legIndex: number;
-  legDestination: string;
   RouteDescription: FunctionComponent<RouteDescriptionProps>;
   setActiveLeg: SetActiveLegFunction;
   setViewedTrip: SetViewedTripFunction;
@@ -49,7 +50,6 @@ interface Props {
   TransitLegSubheader?: FunctionComponent<TransitLegSubheaderProps>;
   TransitLegSummary: FunctionComponent<TransitLegSummaryProps>;
   transitOperator?: TransitOperator;
-  defaultFareSelector?: FareProductSelector;
 }
 
 interface State {
@@ -126,22 +126,22 @@ class TransitLegBody extends Component<Props, State> {
 
   render(): ReactElement {
     const {
-      AlertToggleIcon = S.DefaultAlertToggleIcon,
       AlertBodyIcon,
+      AlertToggleIcon = S.DefaultAlertToggleIcon,
       alwaysCollapseAlerts,
+      defaultFareSelector,
       intl,
       leg,
-      LegIcon,
       legDestination,
+      LegIcon,
       RouteDescription,
       setViewedTrip,
       showAgencyInfo,
       showViewTripButton,
       timeZone,
       TransitLegSubheader,
       TransitLegSummary,
-      transitOperator,
-      defaultFareSelector
+      transitOperator
     } = this.props;
     const { agencyBrandingUrl, agencyName, agencyUrl, alerts } = leg;
     const { alertsExpanded, stopsExpanded } = this.state;
@@ -171,7 +171,7 @@ class TransitLegBody extends Component<Props, State> {
 
     const legCost =
       defaultFareSelector &&
-      getLegCost(
+      coreUtils.itinerary.getLegCost(
         leg,
         defaultFareSelector.mediumId,
         defaultFareSelector.riderCategoryId
@@ -341,31 +341,31 @@ class TransitLegBody extends Component<Props, State> {
                 >
                   <S.TransitLegExpandedBody>
                     <IntermediateStops stops={leg.intermediateStops} />
+                    {legCost?.price && (
+                      <S.TransitLegFare>
+                        <FormattedMessage
+                          defaultMessage={
+                            defaultMessages["otpUi.TransitLegBody.fare"]
+                          }
+                          description="Describes the fare for a leg"
+                          id="otpUi.TransitLegBody.fare"
+                          values={{
+                            fare: (
+                              <FormattedNumber
+                                currency={legCost.price.currency.code}
+                                currencyDisplay="narrowSymbol"
+                                // This isn't a "real" style prop
+                                // eslint-disable-next-line react/style-prop-object
+                                style="currency"
+                                value={legCost.price.amount}
+                              />
+                            )
+                          }}
+                        />
+                      </S.TransitLegFare>
+                    )}
                   </S.TransitLegExpandedBody>
                 </AnimateHeight>
-                {legCost && (
-                  <S.TransitLegFare>
-                    <FormattedMessage
-                      defaultMessage={
-                        defaultMessages["otpUi.TransitLegBody.fare"]
-                      }
-                      description="Describes the fare for a leg"
-                      id="otpUi.TransitLegBody.fare"
-                      values={{
-                        fare: (
-                          <FormattedNumber
-                            currency={legCost.price.currency.code}
-                            currencyDisplay="narrowSymbol"
-                            // This isn't a "real" style prop
-                            // eslint-disable-next-line react/style-prop-object
-                            style="currency"
-                            value={legCost.price.amount}
-                          />
-                        )
-                      }}
-                    />
-                  </S.TransitLegFare>
-                )}
                 {/* Average wait details, if present */}
                 {leg.averageWait && (
                   <span>

packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx

@@ -1,4 +1,4 @@
-import { Itinerary } from "@opentripplanner/types";
+import { FareProductSelector, Itinerary } from "@opentripplanner/types";
 import React, { ReactElement } from "react";
 
 import ItineraryBody from "..";
@@ -47,20 +47,21 @@ if (!isRunningJest()) {
 
 interface StoryWrapperProps {
   itinerary: Itinerary;
-  showRouteFares: boolean;
-  TimeColumnContent: FunctionComponent<TimeColumnContentProps>;
-  alwaysCollapseAlerts: boolean;
+  TimeColumnContent?: FunctionComponent<TimeColumnContentProps>;
+  defaultFareSelector?: FareProductSelector;
+  alwaysCollapseAlerts?: boolean;
 }
 
 function OtpRRItineraryBodyWrapper({
+  alwaysCollapseAlerts,
+  defaultFareSelector,
   itinerary,
-  showRouteFares,
-  TimeColumnContent,
-  alwaysCollapseAlerts
+  TimeColumnContent
 }: StoryWrapperProps): ReactElement {
   return (
     <ItineraryBodyDefaultsWrapper
       alwaysCollapseAlerts={alwaysCollapseAlerts}
+      defaultFareSelector={defaultFareSelector}
       itinerary={itinerary}
       LegIcon={LegIconWithA11y}
       LineColumnContent={OtpRRLineColumnContent}
@@ -69,7 +70,6 @@ function OtpRRItineraryBodyWrapper({
       showAgencyInfo
       showLegIcon
       showMapButtonColumn={false}
-      showRouteFares={showRouteFares}
       showViewTripButton
       styledItinerary="otp-rr"
       TimeColumnContent={TimeColumnContent}
@@ -148,7 +148,13 @@ export const OTP2FlexItinerary = (): ReactElement => (
 );
 
 export const IndividualLegFareComponents = (): ReactElement => (
-  <OtpRRItineraryBodyWrapper itinerary={fareProductsItinerary} showRouteFares />
+  <OtpRRItineraryBodyWrapper
+    itinerary={fareProductsItinerary}
+    defaultFareSelector={{
+      mediumId: "orca:cash",
+      riderCategoryId: "orca:regular"
+    }}
+  />
 );
 
 export const CustomTimeColumn = (): ReactElement => (

packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx

@@ -147,10 +147,7 @@ export const OTP2FlexItinerary = (): ReactElement => (
 );
 
 export const IndividualLegFareComponents = (): ReactElement => (
-  <ItineraryBodyDefaultsWrapper
-    itinerary={fareProductsItinerary}
-    showRouteFares
-  />
+  <ItineraryBodyDefaultsWrapper itinerary={fareProductsItinerary} />
 );
 
 export const CustomAlertIconsItinerary = (): ReactElement => (

packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx

@@ -42,6 +42,7 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
   render(): ReactElement {
     const {
       alwaysCollapseAlerts,
+      defaultFareSelector,
       itinerary,
       LegIcon = TriMetLegIcon,
       LineColumnContent,
@@ -50,7 +51,6 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
       showAgencyInfo,
       showLegIcon,
       showMapButtonColumn = true,
-      showRouteFares,
       showViewTripButton,
       styledItinerary,
       TimeColumnContent,
@@ -78,6 +78,7 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
         AlertToggleIcon={AlertToggleIcon}
         alwaysCollapseAlerts={alwaysCollapseAlerts}
         config={config}
+        defaultFareSelector={defaultFareSelector}
         diagramVisible={diagramVisible}
         frameLeg={action("frameLeg")}
         itinerary={itinerary}
@@ -94,7 +95,6 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
         showElevationProfile
         showLegIcon={showLegIcon}
         showMapButtonColumn={showMapButtonColumn}
-        showRouteFares={showRouteFares}
         showViewTripButton={showViewTripButton}
         TimeColumnContent={TimeColumnContent}
         toRouteAbbreviation={toRouteAbbreviation}

packages/itinerary-body/src/types.ts

@@ -2,6 +2,7 @@ import { FunctionComponent } from "react";
 
 import {
   Config,
+  FareProductSelector,
   GradationMap,
   Itinerary,
   Leg,
@@ -108,6 +109,12 @@ interface ItineraryBodySharedProps {
   className?: string;
   /** Contains OTP configuration details. */
   config: Config;
+  /**
+   * Allows selection of a fare product type for display in the itinerary body.
+   * When fare leg information is available, it will be shown per-leg.
+   * Example: regular, cash or regular, electronic.
+   */
+  defaultFareSelector?: FareProductSelector;
   /**
    * Should be either null or a legType. Indicates that a particular leg diagram
    * has been selected and is active.
@@ -183,8 +190,6 @@ interface ItineraryBodySharedProps {
   showLegIcon?: boolean;
   /** If true, will show the right column with the map button */
   showMapButtonColumn?: boolean;
-  /** If true, will show fare information in transit leg bodies */
-  showRouteFares?: boolean;
   /** If true, shows the view trip button in transit leg bodies */
   showViewTripButton?: boolean;
   /**

packages/trip-details/__mocks__/custom-french-messages.yml

@@ -3,7 +3,7 @@ otpUi:
     FareTable:
       cash: Espèces
       electronic: ORCA
-      regular: Ordinaire
+      regular: Plein tarif
       senior: Senior
       special: LIFT
       youth: Jeune

packages/trip-details/i18n/fr.yml

@@ -3,7 +3,7 @@ otpUi:
     FareTable:
       cash: Espèces
       electronic: Électronique
-      regular: Normal
+      regular: Plein tarif
       senior: Séniors
       special: Spécial
       youth: Jeunes