Merge branch 'develop' into depedency/update-babel-core

Merge branch 'develop'.

.env.example

@@ -51,6 +51,7 @@ REITTIOPAS_URL="https://reittiopas.foli.fi/reitti/"
 # New values for Eco-counter and mobility view.
 THEME_PKG=1
 MOBILITY_PLATFORM_API="https://palvelukartta-api.turku.fi"
+RAILWAYS_API="https://rata.digitraffic.fi/api/v1"
 
 # API URLs to fetch parking spaces data
 PARKING_SPACES_URL="https://parkkiopas.turku.fi/public/v1/parking_area/"

config/default.js

@@ -282,4 +282,5 @@ export default {
   "mobilityPlatformAPI": settings.MOBILITY_PLATFORM_API,
   "parkingSpacesURL": settings.PARKING_SPACES_URL,
   "parkingStatisticsURL": settings.PARKING_STATISTICS_URL,
+  "railwaysAPI": settings.RAILWAYS_API,
 }

server/server.js

@@ -270,6 +270,7 @@ const htmlTemplate = (req, reactDom, preloadedState, css, cssString, emotionCss,
         window.nodeEnvSettings.MOBILITY_PLATFORM_API = "${process.env.MOBILITY_PLATFORM_API}";
         window.nodeEnvSettings.PARKING_SPACES_URL = "${process.env.PARKING_SPACES_URL}";
         window.nodeEnvSettings.PARKING_STATISTICS_URL = "${process.env.PARKING_STATISTICS_URL}";
+        window.nodeEnvSettings.RAILWAYS_API = "${process.env.RAILWAYS_API}";
         window.nodeEnvSettings.FEATURE_SERVICEMAP_PAGE_TRACKING = "${process.env.FEATURE_SERVICEMAP_PAGE_TRACKING}";
 
         window.appVersion = {};

src/.eslintrc

@@ -5,7 +5,7 @@
         "no-shadow": 0,
         "no-console": ["error", { "allow": ["warn"] }],
         "no-param-reassign": ["error", { "props": false }],
-        "max-len": ["error", { "code": 150 }],
+        "max-len": ["error", { "code": 165 }],
         "arrow-parens": ["warn", "as-needed"],
         "react/function-component-definition": [
             "error",

src/components/MobilityPlatform/ChargerStationMarkers/ChargerStationMarkers.js

@@ -33,7 +33,7 @@ const ChargerStationMarkers = () => {
   useEffect(() => {
     const options = {
       type_name: 'ChargingStation',
-      page_size: 200,
+      page_size: 600,
     };
     if (showChargingStations || embedded) {
       fetchMobilityMapData(options, setChargerStations);
@@ -50,15 +50,13 @@ const ChargerStationMarkers = () => {
   }, [showChargingStations, chargerStations, embedded]);
 
   return (
-    <>
-      {renderData
-        ? chargerStations.map(item => (
-          <MarkerComponent key={item.id} item={item} icon={chargerStationIcon}>
-            <ChargerStationContent station={item} />
-          </MarkerComponent>
-        ))
-        : null}
-    </>
+    renderData
+      ? chargerStations.map(item => (
+        <MarkerComponent key={item.id} item={item} icon={chargerStationIcon}>
+          <ChargerStationContent station={item} />
+        </MarkerComponent>
+      ))
+      : null
   );
 };
 

src/components/MobilityPlatform/CityBikes/components/CityBikesContent/CityBikesContent.js

@@ -9,7 +9,7 @@ const CityBikesContent = ({
 
   const isCargoBike = getStationType();
 
-  const getStation = (data) => {
+  const getStation = data => {
     if (data && data.length > 0) {
       return data.find(item => item.station_id === bikeStation.station_id);
     }
@@ -20,14 +20,12 @@ const CityBikesContent = ({
 
   const renderText = (translationId, value) => (
     <div className={classes.paragraph}>
-      <Typography variant="body2">
-        {intl.formatMessage({ id: translationId }, { value })}
-      </Typography>
+      <Typography variant="body2">{intl.formatMessage({ id: translationId }, { value })}</Typography>
     </div>
   );
 
   /** Remove 'eCargo bikes' from station name before render  */
-  const formatStationName = (name) => {
+  const formatStationName = name => {
     const split = name.split(':');
     return split[1];
   };
@@ -53,6 +51,8 @@ const CityBikesContent = ({
     return null;
   };
 
+  const getNumberOfVacantPlaces = (capacity, numberOfBikes) => capacity - numberOfBikes;
+
   return (
     <div className={classes.popupInner}>
       <div className={classes.subtitle}>
@@ -66,7 +66,12 @@ const CityBikesContent = ({
         ? renderText('mobilityPlatform.content.cityBikes.name', formatStationName(bikeStation.name))
         : renderText('mobilityPlatform.content.cityBikes.name', bikeStation.name)}
       {renderStationType(bikeStation.is_virtual_station, 'mobilityPlatform.content.cityBikes.virtualStation')}
-      {!isCargoBike ? renderText('mobilityPlatform.content.cityBikes.capacity', bikeStation.capacity) : null}
+      {!isCargoBike
+        ? renderText(
+          'mobilityPlatform.content.cityBikes.vacantPlaces',
+          getNumberOfVacantPlaces(bikeStation.capacity, stationItem?.num_bikes_available),
+        )
+        : null}
       <div>
         {!isCargoBike
           ? renderText('mobilityPlatform.content.cityBikes.bikes.available', stationItem?.num_bikes_available)
@@ -94,10 +99,25 @@ const CityBikesContent = ({
 };
 
 CityBikesContent.propTypes = {
-  intl: PropTypes.objectOf(PropTypes.any).isRequired,
-  classes: PropTypes.objectOf(PropTypes.any).isRequired,
-  bikeStation: PropTypes.objectOf(PropTypes.any),
-  cityBikeStatistics: PropTypes.arrayOf(PropTypes.any),
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func,
+  }).isRequired,
+  classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  bikeStation: PropTypes.shape({
+    station_id: PropTypes.string,
+    name: PropTypes.string,
+    is_virtual_station: PropTypes.bool,
+    capacity: PropTypes.number,
+    rental_uris: PropTypes.shape({
+      android: PropTypes.string,
+      ios: PropTypes.string,
+    }),
+  }),
+  cityBikeStatistics: PropTypes.arrayOf(
+    PropTypes.shape({
+      station_id: PropTypes.string,
+    }),
+  ),
 };
 
 CityBikesContent.defaultProps = {

src/components/MobilityPlatform/CityBikes/components/CityBikesContent/__tests__/CityBikesContent.test.js

@@ -44,7 +44,7 @@ describe('<CityBikesContent />', () => {
     expect(h3.textContent).toContain(finnishTranslations['mobilityPlatform.content.cityBikes.title']);
     expect(p[0].textContent).toContain(`Asema: ${mockProps.bikeStation.name}`);
     expect(p[1].textContent).toContain(finnishTranslations['mobilityPlatform.content.cityBikes.virtualStation']);
-    expect(p[2].textContent).toContain(`Kapasiteetti: ${mockProps.bikeStation.capacity}`);
+    expect(p[2].textContent).toContain('Vapaita paikkoja: 10');
     expect(p[3].textContent).toContain('Pyöriä vapaana: 10');
     expect(p[4].textContent).toContain(finnishTranslations['mobilityPlatform.content.general.rentalUris']);
     expect(link[0].textContent).toEqual('Android');

src/components/MobilityPlatform/CityBikes/components/CityBikesContent/__tests__/__snapshots__/CityBikesContent.test.js.snap

@@ -38,7 +38,7 @@ exports[`<CityBikesContent /> should work 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body2 css-1ak20dk-MuiTypography-root"
       >
-        Kapasiteetti: 20
+        Vapaita paikkoja: 10
       </p>
     </div>
     <div>

src/components/MobilityPlatform/InfoTextBox/__tests__/__snapshots__/InfoTextBox.test.js.snap

@@ -6,10 +6,10 @@ exports[`<InfoTextBox /> should work 1`] = `
     class="injectIntl(InfoTextBox)-container-1 injectIntl(InfoTextBox)-padding-3"
   >
     <p
-      aria-label="Turun alueen julkiset autojen sähkölatauspisteet. Latauspistetiedot perustuvat 05/2022 tehtyyn kartoitukseen."
+      aria-label="Turun alueen julkiset autojen sähkölatauspisteet. Latauspistetiedot perustuvat 12/2023 tehtyyn kartoitukseen."
       class="MuiTypography-root MuiTypography-body2 css-1ak20dk-MuiTypography-root"
     >
-      Turun alueen julkiset autojen sähkölatauspisteet. Latauspistetiedot perustuvat 05/2022 tehtyyn kartoitukseen.
+      Turun alueen julkiset autojen sähkölatauspisteet. Latauspistetiedot perustuvat 12/2023 tehtyyn kartoitukseen.
     </p>
   </div>
 </div>

src/components/MobilityPlatform/RailwayStations/RailwayStations.js

@@ -0,0 +1,60 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useMap } from 'react-leaflet';
+import railwayIcon from 'servicemap-ui-turku/assets/icons/icons-icon_railway_station.svg';
+import railwayIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_railway_station-bw.svg';
+import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
+import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { fetchRailwaysData } from '../mobilityPlatformRequests/mobilityPlatformRequests';
+import { createIcon, isDataValid } from '../utils/utils';
+import RailwayStationsContent from './components/RailwayStationsContent';
+
+const RailwayStations = () => {
+  const [railwayStations, setRailwayStations] = useState([]);
+
+  const { showRailwayStations } = useMobilityPlatformContext();
+
+  const map = useMap();
+
+  const { Marker, Popup } = global.rL;
+  const { icon } = global.L;
+
+  const useContrast = useSelector(useAccessibleMap);
+
+  const customIcon = icon(createIcon(useContrast ? railwayIconBw : railwayIcon));
+
+  useEffect(() => {
+    if (showRailwayStations && !railwayStations.length) {
+      fetchRailwaysData('metadata/stations', setRailwayStations);
+    }
+  }, [showRailwayStations]);
+
+  /** Separate railway stations of Turku, eg. Turku station and Kupittaa */
+  const turkuStationCodes = ['TKU', 'KUT', 'TUS'];
+  const railwayStationsTku = railwayStations.filter(curr => turkuStationCodes.includes(curr.stationShortCode));
+
+  const renderData = isDataValid(showRailwayStations, railwayStationsTku);
+
+  useEffect(() => {
+    if (renderData) {
+      const bounds = [];
+      railwayStationsTku.forEach(item => {
+        bounds.push([item.latitude, item.longitude]);
+      });
+      map.fitBounds(bounds);
+    }
+  }, [showRailwayStations, railwayStationsTku]);
+
+  return renderData
+    ? railwayStationsTku.map(item => (
+      <Marker key={item.stationName} icon={customIcon} position={[item.latitude, item.longitude]}>
+        <Popup>
+          <RailwayStationsContent item={item} stationsData={railwayStations} />
+        </Popup>
+      </Marker>
+    ))
+    : null;
+};
+
+export default RailwayStations;