DT-6182 rental scooters

app/component/AppBarHsl.js

@@ -34,9 +34,9 @@ const AppBarHsl = ({ lang, user, favourites }, context) => {
 
   useEffect(() => {
     if (config.URL.BANNERS && config.NODE_ENV !== 'test') {
-      getJson(`${config.URL.BANNERS}&language=${lang}`).then(data =>
-        setBanners(data),
-      );
+      getJson(`${config.URL.BANNERS}&language=${lang}`)
+        .then(data => setBanners(data))
+        .catch(() => setBanners([]));
     }
   }, [lang]);
 

app/component/ExternalLink.js

@@ -21,6 +21,8 @@ export default function ExternalLink({
             }}
             className="external-link"
             href={href}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             {name || children}
           </a>

app/component/MapLayersDialogContent.js

@@ -13,7 +13,8 @@ import MapLayerStore, { mapLayerShape } from '../store/MapLayerStore';
 import { updateMapLayers } from '../action/MapLayerActions';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import withGeojsonObjects from './map/withGeojsonObjects';
-import { getTransportModes, showCityBikes } from '../util/modeUtils';
+import { getTransportModes, showRentalVehiclesOfType } from '../util/modeUtils';
+import { TransportMode } from '../constants';
 
 const transportModeconfigShape = PropTypes.shape({
   availableForSelection: PropTypes.bool,
@@ -50,6 +51,7 @@ const mapLayersconfigShape = PropTypes.shape({
     rail: transportModeconfigShape,
     subway: transportModeconfigShape,
     tram: transportModeconfigShape,
+    scooter: transportModeconfigShape,
   }),
   mapLayers: PropTypes.shape({
     tooltip: PropTypes.shape({
@@ -115,7 +117,7 @@ class MapLayersDialogContent extends React.Component {
   };
 
   render() {
-    const { citybike, parkAndRide, stop, geoJson, vehicles } =
+    const { citybike, parkAndRide, stop, geoJson, vehicles, scooter } =
       this.props.mapLayers;
     let arr;
     if (this.props.geoJson) {
@@ -125,7 +127,8 @@ class MapLayersDialogContent extends React.Component {
     }
     const isTransportModeEnabled = transportMode =>
       transportMode && transportMode.availableForSelection;
-    const transportModes = getTransportModes(this.context.config);
+    const { config } = this.context;
+    const transportModes = getTransportModes(config);
     return (
       <Fragment>
         <button
@@ -145,7 +148,7 @@ class MapLayersDialogContent extends React.Component {
           })}
         </span>
         <div className="checkbox-grouping" />
-        {this.context.config.vehicles && (
+        {config.vehicles && (
           <div className="checkbox-grouping">
             <Checkbox
               large
@@ -205,9 +208,10 @@ class MapLayersDialogContent extends React.Component {
               }}
             />
           )}
-          {showCityBikes(
-            this.context.config?.cityBike?.networks,
-            this.context.config,
+          {showRentalVehiclesOfType(
+            config.cityBike?.networks,
+            config,
+            TransportMode.Citybike,
           ) && (
             <Checkbox
               large
@@ -221,6 +225,23 @@ class MapLayersDialogContent extends React.Component {
               }}
             />
           )}
+          {showRentalVehiclesOfType(
+            config.cityBike?.networks,
+            config,
+            TransportMode.Scooter,
+          ) && (
+            <Checkbox
+              large
+              checked={scooter}
+              disabled={!!this.props.mapLayerOptions?.scooter?.isLocked}
+              defaultMessage="Scooters"
+              labelId="map-layer-scooter"
+              onChange={e => {
+                this.updateSetting({ scooter: e.target.checked });
+                sendLayerChangeAnalytic('Scooter', e.target.checked);
+              }}
+            />
+          )}
           {isTransportModeEnabled(transportModes.funicular) && (
             <Checkbox
               large
@@ -234,20 +255,19 @@ class MapLayersDialogContent extends React.Component {
               }}
             />
           )}
-          {this.context.config.parkAndRide &&
-            this.context.config.parkAndRide.showParkAndRide && (
-              <Checkbox
-                large
-                checked={parkAndRide}
-                disabled={!!this.props.mapLayerOptions?.parkAndRide?.isLocked}
-                defaultMessage="Park &amp; ride"
-                labelId="map-layer-park-and-ride"
-                onChange={e => {
-                  this.updateSetting({ parkAndRide: e.target.checked });
-                  sendLayerChangeAnalytic('ParkAndRide', e.target.checked);
-                }}
-              />
-            )}
+          {config.parkAndRide?.showParkAndRide && (
+            <Checkbox
+              large
+              checked={parkAndRide}
+              disabled={!!this.props.mapLayerOptions?.parkAndRide?.isLocked}
+              defaultMessage="Park &amp; ride"
+              labelId="map-layer-park-and-ride"
+              onChange={e => {
+                this.updateSetting({ parkAndRide: e.target.checked });
+                sendLayerChangeAnalytic('ParkAndRide', e.target.checked);
+              }}
+            />
+          )}
         </div>
         {arr && Array.isArray(arr) && (
           <div className="checkbox-grouping">

app/component/ParkOrStationHeader.js

@@ -9,8 +9,12 @@ import { getJson } from '../util/xhrPromise';
 import getZoneId from '../util/zoneIconUtils';
 import ZoneIcon from './ZoneIcon';
 import withBreakpoint from '../util/withBreakpoint';
-import { hasStationCode } from '../util/vehicleRentalUtils';
+import {
+  hasVehicleRentalCode,
+  getVehicleRentalStationNetworkConfig,
+} from '../util/vehicleRentalUtils';
 import { getIdWithoutFeed } from '../util/feedScopedIdUtils';
+import { TransportMode } from '../constants';
 
 const modules = {
   FavouriteVehicleRentalStationContainer: () =>
@@ -46,8 +50,13 @@ const ParkOrBikeStationHeader = (
     });
   }, []);
 
-  const { name, stationId } = parkOrStation;
+  const { name, stationId, network } = parkOrStation;
+  const networkConfig = getVehicleRentalStationNetworkConfig(network, config);
   const parkHeaderId = parkType === 'bike' ? 'bike-park' : 'car-park';
+  const noIdHeaderName =
+    networkConfig.type === TransportMode.Citybike.toLowerCase()
+      ? 'citybike-station-no-id'
+      : 'e-scooter-station';
   return (
     <div className="bike-station-header">
       {breakpoint === 'large' && (
@@ -59,10 +68,8 @@ const ParkOrBikeStationHeader = (
       <div className="header">
         <h1>{name}</h1>
         <div className="bike-station-sub-header">
-          <FormattedMessage
-            id={stationId ? 'citybike-station-no-id' : parkHeaderId}
-          />
-          {stationId && hasStationCode(parkOrStation) && (
+          <FormattedMessage id={stationId ? noIdHeaderName : parkHeaderId} />
+          {stationId && hasVehicleRentalCode(parkOrStation.stationId) && (
             <StopCode code={getIdWithoutFeed(stationId)} />
           )}
           {zoneId && (
@@ -92,6 +99,7 @@ ParkOrBikeStationHeader.propTypes = {
     stationId: PropTypes.string,
     lat: PropTypes.number.isRequired,
     lon: PropTypes.number.isRequired,
+    network: PropTypes.string.isRequired,
   }).isRequired,
   parkType: PropTypes.string,
 };

app/component/RentalVehicle.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from './Icon';
+import {
+  getVehicleRentalStationNetworkIcon,
+  getVehicleRentalStationNetworkConfig,
+} from '../util/vehicleRentalUtils';
+import { rentalVehicleShape } from '../util/shapes';
+
+const RentalVehicle = ({ rentalVehicle }, { config }) => {
+  const disabled = !rentalVehicle.operative;
+
+  const vehicleIcon = getVehicleRentalStationNetworkIcon(
+    getVehicleRentalStationNetworkConfig(rentalVehicle.network, config),
+    disabled,
+  );
+  return (
+    <div className="scooter-content-container">
+      <Icon img={vehicleIcon} />
+    </div>
+  );
+};
+
+RentalVehicle.contextTypes = {
+  config: PropTypes.shape({
+    cityBike: { networks: PropTypes.arrayOf(PropTypes.string.isRequired) },
+  }).isRequired,
+};
+RentalVehicle.propTypes = {
+  rentalVehicle: rentalVehicleShape.isRequired,
+};
+export default RentalVehicle;