DT-5904 (DT-5325) CO2 emissions

app/component/ItinerarySummaryListContainer/ItinerarySummaryListContainer.js

@@ -55,6 +55,13 @@ function ItinerarySummaryListContainer(
     itineraries.length > 0 &&
     !itineraries.includes(undefined)
   ) {
+    const lowestCo2value = Math.round(
+      itineraries
+        .filter(itinerary => itinerary.emissionsPerPerson?.co2 >= 0)
+        .reduce((a, b) => {
+          return a.emissionsPerPerson?.co2 < b.emissionsPerPerson?.co2 ? a : b;
+        }, 0).emissionsPerPerson?.co2,
+    );
     const summaries = itineraries.map((itinerary, i) => (
       <SummaryRow
         refTime={searchTime}
@@ -72,6 +79,7 @@ function ItinerarySummaryListContainer(
         zones={
           config.zones.stops && itinerary.legs ? getZones(itinerary.legs) : []
         }
+        lowestCo2value={lowestCo2value}
       />
     ));
     if (
@@ -334,6 +342,9 @@ const containerComponent = createFragmentContainer(
         walkDistance
         startTime
         endTime
+        emissionsPerPerson {
+          co2
+        }
         legs {
           realTime
           realtimeState

app/component/ItineraryTab.js

@@ -6,7 +6,6 @@ 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';
@@ -44,6 +43,7 @@ import {
 import CityBikeDurationInfo from './CityBikeDurationInfo';
 import { getCityBikeNetworkId } from '../util/citybikes';
 import { FareShape } from '../util/shapes';
+import { getCo2Value } from '../util/itineraryUtils';
 
 const AlertShape = PropTypes.shape({ alertSeverityLevel: PropTypes.string });
 
@@ -67,6 +67,9 @@ const ItineraryShape = PropTypes.shape({
     }),
   ),
   fares: PropTypes.arrayOf(FareShape),
+  emissionsPerPerson: PropTypes.shape({
+    co2: PropTypes.number,
+  }),
 });
 
 /* eslint-disable prettier/prettier */
@@ -81,6 +84,7 @@ class ItineraryTab extends React.Component {
     isMobile: PropTypes.bool.isRequired,
     currentTime: PropTypes.number.isRequired,
     hideTitle: PropTypes.bool,
+    carItinerary: ItineraryShape,
     currentLanguage: PropTypes.string,
     changeHash: PropTypes.func,
   };
@@ -185,7 +189,6 @@ class ItineraryTab extends React.Component {
     if (!itinerary || !itinerary.legs[0]) {
       return null;
     }
-
     const fares = getFares(itinerary.fares, getRoutes(itinerary.legs), config);
     const extraProps = this.setExtraProps(itinerary);
     const legsWithRentalBike = compressLegs(itinerary.legs).filter(leg =>
@@ -217,8 +220,15 @@ 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 co2value = getCo2Value(itinerary);
+    const itineraryIsCar = itinerary.legs.every((leg) => leg.mode === 'CAR');
+    const carCo2Value = !itineraryIsCar && this.props.carItinerary ? Math.round(this.props.carItinerary?.emissionsPerPerson?.co2) : null;
+    const useCo2SimpleDesc = !carCo2Value || itineraryIsCar;
+    const co2DescriptionId = useCo2SimpleDesc ? "itinerary-co2.description-simple" : "itinerary-co2.description";
+
     const itineraryContainsCallLegs = itinerary.legs.some(leg => isCallAgencyPickupType(leg));
-    
+
     return (
       <div className="itinerary-tab">
         <h2 className="sr-only">
@@ -288,12 +298,38 @@ class ItineraryTab extends React.Component {
                   fares={fares}
                   zones={getZones(itinerary.legs)}
                 />) :
-            (  <TicketInformation
+                (<TicketInformation
                   fares={fares}
                   zones={getZones(itinerary.legs)}
                   legs={itinerary.legs}
                 />)
             ),
+            config.showCO2InItinerarySummary && co2value >= 0 && (
+              <div className={cx("itinerary-co2-information", { mobile: this.props.isMobile })}>
+                <div className="itinerary-co2-line">
+                  <div className={cx("co2-container", { mobile: this.props.isMobile })}>
+                    <div className="co2-title-container">
+                      <Icon img="icon-icon_co2_leaf" className="co2-leaf" />
+                      <span aria-hidden="true" className="itinerary-co2-title">
+                        <FormattedMessage
+                          id="itinerary-co2.title"
+                          defaultMessage="CO2 emissions for this route"
+                        />
+                      </span>
+                      <span className="sr-only">
+                        <FormattedMessage
+                          id="itinerary-co2.title-sr"
+                          defaultMessage="CO2 emissions for this route"
+                        />
+                      </span>
+                    </div>
+                    <div className="itinerary-co2-value-container">
+                      <div className="itinerary-co2-value">{co2value} g</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ),
             <div
               className={cx('momentum-scroll itinerary-tabs__scroll', {
                 multirow: extraProps.isMultiRow,
@@ -354,6 +390,50 @@ class ItineraryTab extends React.Component {
                 />
                 {config.showRouteInformation && <RouteInformation />}
               </div>
+              {config.showCO2InItinerarySummary && co2value >= 0 ? (
+                <div className="itinerary-co2-comparison">
+                  <div className="itinerary-co2-line">
+                    <div className={cx('divider-top')} />
+                    <div className="co2-container">
+                      <div className="co2-description-container">
+                        <Icon img="icon-icon_co2_leaf" className="co2-leaf" />
+                        <span className={cx("itinerary-co2-description", { simple: useCo2SimpleDesc })}>
+                          <span aria-hidden="true">
+                            <FormattedMessage id={co2DescriptionId}
+                              defaultMessage={`CO₂ emissions for this route: ${co2value} g`}
+                              values={{
+                                co2value,
+                                carCo2Value,
+                              }}
+                            />
+                          </span>
+                          <span className="sr-only">
+                            <FormattedMessage id={`${co2DescriptionId}-sr`}
+                              defaultMessage={`Carbondioxide emissions for this route: ${co2value} g`}
+                              values={{
+                                co2value,
+                                carCo2Value,
+                              }}
+                            />
+                          </span>
+                          {config.URL.EMISSIONSINFO && (
+                            <div>
+                              <a href={`${config.URL.EMISSIONSINFO[currentLanguage]}`}>
+                                <FormattedMessage
+                                  id="itinerary-co2.link"
+                                  defaultMessage="Näin vähennämme päästöjä ›"
+                                />
+                              </a>
+                            </div>
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                    <div className={cx('divider-bottom')} />
+                  </div>
+                </div>
+              ) :
+                (null)}
               {this.shouldShowDisclaimer(config) && (
                 <div className="itinerary-disclaimer">
                   <FormattedMessage
@@ -404,6 +484,9 @@ const withRelay = createFragmentContainer(
           }
           type
         }
+        emissionsPerPerson {
+          co2
+        }
         legs {
           mode
           nextLegs(numberOfLegs: 2  originModesWithParentStation: [RAIL]  destinationModesWithParentStation: [RAIL]) {

app/component/MobileItineraryWrapper.js

@@ -4,6 +4,7 @@ import { matchShape, routerShape } from 'found';
 import { FormattedMessage, intlShape } from 'react-intl';
 import ItineraryTab from './ItineraryTab';
 import SwipeableTabs from './SwipeableTabs';
+import ItineraryShape from '../prop-types/ItineraryShape';
 
 const MobileItineraryWrapper = (props, context) => {
   const index = props.params.secondHash
@@ -41,6 +42,7 @@ const MobileItineraryWrapper = (props, context) => {
           focusToLeg={props.focusToLeg}
           changeHash={props.changeHash}
           isMobile
+          carItinerary={props.carItinerary}
         />
       </div>
     );
@@ -73,6 +75,7 @@ MobileItineraryWrapper.propTypes = {
   plan: PropTypes.object,
   serviceTimeRange: PropTypes.object.isRequired,
   onSwipe: PropTypes.func,
+  carItinerary: ItineraryShape,
   changeHash: PropTypes.func,
 };
 

app/component/SummaryPage.js

@@ -737,6 +737,9 @@ class SummaryPage extends React.Component {
             endTime
             ...ItineraryTab_itinerary
             ...SummaryPlanContainer_itineraries
+            emissionsPerPerson {
+              co2
+            }
             legs {
               mode
               ...ItineraryLine_legs
@@ -790,6 +793,9 @@ class SummaryPage extends React.Component {
             endTime
             ...ItineraryTab_itinerary
             ...SummaryPlanContainer_itineraries
+            emissionsPerPerson {
+              co2
+            }
             legs {
               mode
               ...ItineraryLine_legs
@@ -849,6 +855,9 @@ class SummaryPage extends React.Component {
             endTime
             ...ItineraryTab_itinerary
             ...SummaryPlanContainer_itineraries
+            emissionsPerPerson {
+              co2
+            }
             legs {
               mode
               ...ItineraryLine_legs
@@ -1029,6 +1038,9 @@ class SummaryPage extends React.Component {
             endTime
             ...ItineraryTab_itinerary
             ...SummaryPlanContainer_itineraries
+            emissionsPerPerson {
+              co2
+            }
             legs {
               mode
               ...ItineraryLine_legs
@@ -2501,6 +2513,7 @@ class SummaryPage extends React.Component {
                   focusToPoint={this.focusToPoint}
                   focusToLeg={this.focusToLeg}
                   isMobile={false}
+                  carItinerary={carPlan?.itineraries[0]}
                 />
               </div>
             );
@@ -2732,6 +2745,7 @@ class SummaryPage extends React.Component {
           serviceTimeRange={this.props.serviceTimeRange}
           focusToLeg={this.focusToLeg}
           onSwipe={this.changeHash}
+          carItinerary={carPlan?.itineraries[0]}
           changeHash={this.changeHash}
         >
           {this.props.content &&
@@ -2961,6 +2975,9 @@ const containerComponent = createRefetchContainer(
             endTime
             ...ItineraryTab_itinerary
             ...SummaryPlanContainer_itineraries
+            emissionsPerPerson {
+              co2
+            }
             legs {
               mode
               ...ItineraryLine_legs

app/component/SummaryPlanContainer.js

@@ -344,6 +344,9 @@ const connectedContainer = createFragmentContainer(
         itineraries {
           startTime
           endTime
+          emissionsPerPerson {
+            co2
+          }
           legs {
             mode
             ...ItineraryLine_legs
@@ -401,6 +404,9 @@ const connectedContainer = createFragmentContainer(
         ...ItinerarySummaryListContainer_itineraries
         endTime
         startTime
+        emissionsPerPerson {
+          co2
+        }
         legs {
           mode
           to {

app/component/SummaryRow.js

@@ -30,6 +30,7 @@ import {
 } from '../util/citybikes';
 import { getRouteMode } from '../util/modeUtils';
 import { getCapacityForLeg } from '../util/occupancyUtil';
+import { getCo2Value } from '../util/itineraryUtils';
 
 const Leg = ({
   mode,
@@ -244,6 +245,7 @@ const SummaryRow = (
     intermediatePlaces,
     zones,
     onlyHasWalkingItineraries,
+    lowestCo2value,
     ...props
   },
   { intl, intl: { formatMessage }, config },
@@ -259,7 +261,7 @@ const SummaryRow = (
   const startTime = moment(data.startTime);
   const endTime = moment(data.endTime);
   const duration = endTime.diff(startTime);
-
+  const co2value = getCo2Value(data);
   const mobile = bp => !(bp === 'large');
   const legs = [];
   let noTransitLegs = true;
@@ -720,6 +722,17 @@ const SummaryRow = (
       />
     </div>
   );
+  const co2summary = (
+    <div className="sr-only">
+      <FormattedMessage
+        id="itinerary-co2.description-simple"
+        defaultMessage="CO₂ emissions for this route"
+        values={{
+          co2value,
+        }}
+      />
+    </div>
+  );
 
   const ariaLabelMessage = intl.formatMessage(
     {
@@ -755,6 +768,7 @@ const SummaryRow = (
         />
       </h3>
       {textSummary}
+      {config.showCO2InItinerarySummary && co2value >= 0 && co2summary}
       <div
         className="itinerary-summary-visible"
         style={{
@@ -804,6 +818,14 @@ const SummaryRow = (
                     {(getTotalDistance(data) / 1000).toFixed(1)} km
                   </div>
                 )}
+                {config.showCO2InItinerarySummary && co2value >= 0 && (
+                  <div className="itinerary-co2-value-container">
+                    {lowestCo2value === co2value && (
+                      <Icon img="icon-icon_co2_leaf" className="co2-leaf" />
+                    )}
+                    <div className="itinerary-co2-value">{co2value} g</div>
+                  </div>
+                )}
                 <div className="itinerary-duration">
                   <RelativeDuration duration={duration} />
                 </div>
@@ -898,10 +920,17 @@ SummaryRow.propTypes = {
   showCancelled: PropTypes.bool,
   zones: PropTypes.arrayOf(PropTypes.string),
   onlyHasWalkingItineraries: PropTypes.bool,
+  lowestCo2value: PropTypes.number,
 };
 
 SummaryRow.defaultProps = {
   zones: [],
+  passive: false,
+  intermediatePlaces: [],
+  isCancelled: false,
+  showCancelled: false,
+  onlyHasWalkingItineraries: false,
+  lowestCo2value: 0,
 };
 
 SummaryRow.contextTypes = {

app/component/itinerary-profile.scss

@@ -6,6 +6,7 @@
   font-size: 15px;
   line-height: 18px;
   margin-top: 7px;
+  margin-bottom: 7px;
 
   &.small {
     font-size: 10pt;