DT-4910: New texts for infobox

app/component/FareDisclaimer.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+
+const FareDisclaimer = ({ textId, values, href = null, linkText = null }) => {
+  return (
+    <div className="disclaimer-container unknown-fare-disclaimer__top">
+      <div className="icon-container">
+        <Icon className="info" img="icon-icon_info" />
+      </div>
+      <div className="description-container">
+        <FormattedMessage id={textId} values={values} />
+
+        {href && (
+          <a href={href}>
+            <FormattedMessage id={linkText} defaultMessage={linkText} />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+FareDisclaimer.propTypes = {
+  textId: PropTypes.string.isRequired,
+  values: PropTypes.oneOfType([
+    PropTypes.shape({
+      agencyName: PropTypes.string,
+    }),
+    PropTypes.object,
+  ]),
+  href: PropTypes.string,
+  linkText: PropTypes.string,
+};
+
+FareDisclaimer.defaultProps = {
+  values: {},
+  href: null,
+  linkText: null,
+};
+
+export default FareDisclaimer;

app/component/ItineraryTab.js

@@ -1,31 +1,29 @@
-import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 import cx from 'classnames';
 import { matchShape, routerShape } from 'found';
 import { FormattedMessage, intlShape } from 'react-intl';
 import connectToStores from 'fluxible-addons-react/connectToStores';
-
-import Icon from './Icon';
+import get from 'lodash/get';
 import TicketInformation from './TicketInformation';
 import RouteInformation from './RouteInformation';
 import ItinerarySummary from './ItinerarySummary';
 import ItineraryLegs from './ItineraryLegs';
 import BackButton from './BackButton';
 import MobileTicketPurchaseInformation from './MobileTicketPurchaseInformation';
 import {
-  getRoutes,
-  getZones,
   compressLegs,
+  getRoutes,
   getTotalBikingDistance,
   getTotalBikingDuration,
+  getTotalDrivingDistance,
+  getTotalDrivingDuration,
   getTotalWalkingDistance,
   getTotalWalkingDuration,
-  legContainsRentalBike,
-  getTotalDrivingDuration,
-  getTotalDrivingDistance,
+  getZones,
   isCallAgencyPickupType,
+  legContainsRentalBike,
 } from '../util/legUtils';
 import { BreakpointConsumer } from '../util/withBreakpoint';
 
@@ -36,14 +34,15 @@ import {
 } from '../util/fareUtils';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import {
+  getCurrentMillis,
+  getFormattedTimeDate,
   isToday,
   isTomorrow,
-  getFormattedTimeDate,
-  getCurrentMillis,
 } from '../util/timeUtils';
 import CityBikeDurationInfo from './CityBikeDurationInfo';
 import { getCityBikeNetworkId } from '../util/citybikes';
 import { FareShape } from '../util/shapes';
+import FareDisclaimer from './FareDisclaimer';
 
 const AlertShape = PropTypes.shape({ alertSeverityLevel: PropTypes.string });
 
@@ -87,7 +86,7 @@ class ItineraryTab extends React.Component {
 
   static defaultProps = {
     hideTitle: false,
-    currentLanguage: "fi"
+    currentLanguage: 'fi',
   };
 
   static contextTypes = {
@@ -159,7 +158,7 @@ class ItineraryTab extends React.Component {
       walkingDistance > 0 &&
       (bikingDistance > 0 || drivingDistance > 0) &&
       futureText !== '';
-    const extraProps = {
+    return {
       walking: {
         duration: walkingDuration,
         distance: walkingDistance,
@@ -175,7 +174,6 @@ class ItineraryTab extends React.Component {
       futureText,
       isMultiRow,
     };
-    return extraProps;
   };
 
   render() {
@@ -217,8 +215,60 @@ class ItineraryTab extends React.Component {
     const suggestionIndex = this.context.match.params.secondHash
       ? Number(this.context.match.params.secondHash) + 1
       : Number(this.context.match.params.hash) + 1;
-    const itineraryContainsCallLegs = itinerary.legs.some(leg => isCallAgencyPickupType(leg));
-
+
+    const disclaimers = [];
+
+    if (shouldShowFareInfo(config) && fares.some(fare => fare.isUnknown)) {
+      const found = {};
+      itinerary.legs.forEach(leg => {
+        if (
+          config.modeDisclaimers?.[leg.mode] &&
+          !found[leg.mode]
+        ) {
+          found[leg.mode] = true;
+          const disclaimer = config.modeDisclaimers[leg.mode][currentLanguage];
+          disclaimers.push(
+            <FareDisclaimer
+              key={leg.mode}
+              values={{}}
+              textId={disclaimer.disclaimer}
+              href={disclaimer.link}
+              linkText={disclaimer.text}
+            />,
+          );
+        }
+      });
+
+      if (config.callAgencyInfo && itinerary.legs.some(leg => isCallAgencyPickupType(leg))) {
+        disclaimers.push(
+          <FareDisclaimer
+            textId="separate-ticket-required-for-call-agency-disclaimer"
+            values={{
+              agencyName: get(
+                config,
+                `callAgencyInfo.${currentLanguage}.callAgencyInfoLink`,
+              ),
+            }}
+            href={config.callAgencyInfo[currentLanguage].callAgencyInfoLink}
+            linkText={
+              config.callAgencyInfo[currentLanguage].callAgencyInfoLinkText
+            }
+          />,
+        );
+      }
+
+      if (!disclaimers.length) {
+        disclaimers.push(
+          <FareDisclaimer
+            textId="separate-ticket-required-disclaimer"
+            values={{
+              agencyName: get(config, 'ticketInformation.primaryAgencyName'),
+            }}
+          />,
+        );
+      }
+    }
+
     return (
       <div className="itinerary-tab">
         <h2 className="sr-only">
@@ -241,7 +291,11 @@ class ItineraryTab extends React.Component {
                 futureText={extraProps.futureText}
                 isMultiRow={extraProps.isMultiRow}
                 isMobile={this.props.isMobile}
-                hideBottomDivider={shouldShowFarePurchaseInfo(config, breakpoint, fares)}
+                hideBottomDivider={shouldShowFarePurchaseInfo(
+                  config,
+                  breakpoint,
+                  fares,
+                )}
               />
             ) : (
               <>
@@ -282,18 +336,19 @@ class ItineraryTab extends React.Component {
                 config={config}
               />
             ),
-            shouldShowFareInfo(config) && (
-              shouldShowFarePurchaseInfo(config,breakpoint,fares) ? (
+            shouldShowFareInfo(config) &&
+              (shouldShowFarePurchaseInfo(config, breakpoint, fares) ? (
                 <MobileTicketPurchaseInformation
                   fares={fares}
                   zones={getZones(itinerary.legs)}
-                />) :
-            (  <TicketInformation
+                />
+              ) : (
+                <TicketInformation
                   fares={fares}
                   zones={getZones(itinerary.legs)}
                   legs={itinerary.legs}
-                />)
-            ),
+                />
+              )),
             <div
               className={cx('momentum-scroll itinerary-tabs__scroll', {
                 multirow: extraProps.isMultiRow,
@@ -305,45 +360,7 @@ class ItineraryTab extends React.Component {
                   'bp-large': breakpoint === 'large',
                 })}
               >
-                {shouldShowFareInfo(config) &&
-                  fares.some(fare => fare.isUnknown) && (
-                    <div className="disclaimer-container unknown-fare-disclaimer__top">
-                      <div className="icon-container">
-                        <Icon className="info" img="icon-icon_info" />
-                      </div>
-                      {config.callAgencyInfo && itineraryContainsCallLegs ?
-                        (<div className="description-container">
-                          <FormattedMessage
-                            id="separate-ticket-required-for-call-agency-disclaimer"
-                            values={{
-                              callAgencyInfoUrl: get(
-                                config,
-                                `callAgencyInfo.${currentLanguage}.callAgencyInfoLink`,
-                              ),
-                            }}
-                          />
-                          <a href={config.callAgencyInfo[currentLanguage].callAgencyInfoLink}>
-                            <FormattedMessage
-                              id={config.callAgencyInfo[currentLanguage].callAgencyInfoLinkText}
-                              defaultMessage={config.callAgencyInfo[currentLanguage].callAgencyInfoLinkText}
-                            />
-                          </a>
-                        </div>
-                        ) : (
-                          <div className="description-container">
-                            <FormattedMessage
-                              id="separate-ticket-required-disclaimer"
-                              values={{
-                                agencyName: get(
-                                  config,
-                                  'ticketInformation.primaryAgencyName',
-                                ),
-                              }}
-                            />
-                          </div>
-                        )}
-                    </div>
-                  )}
+                <>{disclaimers}</>
                 <ItineraryLegs
                   fares={fares}
                   itinerary={itinerary}
@@ -406,7 +423,11 @@ const withRelay = createFragmentContainer(
         }
         legs {
           mode
-          nextLegs(numberOfLegs: 2  originModesWithParentStation: [RAIL]  destinationModesWithParentStation: [RAIL]) {
+          nextLegs(
+            numberOfLegs: 2
+            originModesWithParentStation: [RAIL]
+            destinationModesWithParentStation: [RAIL]
+          ) {
             mode
             distance
             route {
@@ -439,7 +460,7 @@ const withRelay = createFragmentContainer(
               tripHeadsign
               pattern {
                 code
-              } 
+              }
               occupancy {
                 occupancyStatus
               }