DT-4910: New texts for infobox

app/component/InfoBox.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+
+const InfoBox = (
+  { textId, values, href = null, configData = null },
+  { config },
+) => {
+  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={{ agencyName: get(config, values) }}
+        />
+
+        {href && (
+          <a href={href}>
+            <FormattedMessage id={configData} defaultMessage={configData} />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+InfoBox.propTypes = {
+  textId: PropTypes.string.isRequired,
+  values: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  configData: PropTypes.string,
+};
+
+InfoBox.contextTypes = {
+  config: PropTypes.object.isRequired,
+};
+
+export default InfoBox;

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 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,
+  isTrainLimitationPickupType,
+  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 InfoBox from './InfoBox';
 
 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,18 @@ 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 itineraryContainsCallLegs = itinerary.legs.some(leg =>
+      isCallAgencyPickupType(leg),
+    );
+    const isTrainLimitation = itinerary.legs.some(leg =>
+      isTrainLimitationPickupType(leg),
+    );
+
+    const isShowTrainLimitationInfo =
+      config.showTrainLimitationInfo && isTrainLimitation;
+    const isShowItineraryContainsCallLegsInfo =
+      config.callAgencyInfo && itineraryContainsCallLegs;
+
     return (
       <div className="itinerary-tab">
         <h2 className="sr-only">
@@ -241,7 +249,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 +294,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,
@@ -307,42 +320,44 @@ class ItineraryTab extends React.Component {
               >
                 {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`,
-                              ),
-                            }}
+                    <>
+                      {isShowTrainLimitationInfo && (
+                        <InfoBox
+                          textId="train-ticket-limited"
+                          values="appBarLink.name"
+                          href={
+                            config.showTrainLimitationInfo[currentLanguage]
+                              .showTrainLimitationInfoLink
+                          }
+                          configData={
+                            config.showTrainLimitationInfo[currentLanguage]
+                              .showTrainLimitationInfoLinkText
+                          }
+                        />
+                      )}
+
+                      {isShowItineraryContainsCallLegsInfo && (
+                        <InfoBox
+                          textId="separate-ticket-required-for-call-agency-disclaimer"
+                          values={`callAgencyInfo.${currentLanguage}.callAgencyInfoLink`}
+                          href={
+                            config.callAgencyInfo[currentLanguage]
+                              .callAgencyInfoLink
+                          }
+                          configData={
+                            config.callAgencyInfo[currentLanguage]
+                              .callAgencyInfoLinkText
+                          }
+                        />
+                      )}
+
+                      {!isShowItineraryContainsCallLegsInfo && !isShowTrainLimitationInfo && (
+                          <InfoBox
+                            textId="separate-ticket-required-disclaimer"
+                            values="ticketInformation.primaryAgencyName"
                           />
-                          <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>
+                    </>
                   )}
                 <ItineraryLegs
                   fares={fares}
@@ -406,7 +421,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 +458,7 @@ const withRelay = createFragmentContainer(
               tripHeadsign
               pattern {
                 code
-              } 
+              }
               occupancy {
                 occupancyStatus
               }