AB#74 refactor near you view

app/component/DepartureRow.js

@@ -47,10 +47,11 @@ export default function DepartureRow(
   );
   let icon;
   let iconColor;
-  let backgroundShape;
+  let background;
+  let backgroundClass;
   let sr;
   if (
-    route?.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
+    route.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
       ?.length > 0
   ) {
     const alert = getMostSevereAlert(route);
@@ -61,18 +62,20 @@ export default function DepartureRow(
         })}
       </span>
     );
-    icon =
-      alert.alertSeverityLevel !== 'INFO'
-        ? 'icon_caution-white-excl-stroke'
-        : 'icon_info';
-    iconColor = alert.alertSeverityLevel !== 'INFO' ? '#DC0451' : '#888';
-    backgroundShape =
-      alert.alertSeverityLevel !== 'INFO' ? undefined : 'circle';
+    if (alert.alertSeverityLevel === 'INFO') {
+      icon = 'icon_info';
+      iconColor = '#888';
+      background = <IconBackground backgroundShape="circle" />;
+      backgroundClass = 'circle';
+    } else {
+      icon = 'icon_caution-white-excl-stroke';
+      iconColor = '#DC0451';
+    }
   }
   const headsign =
     departure.headsign ||
     trip.tripHeadsign ||
-    getHeadsignFromRouteLongName(trip.route);
+    getHeadsignFromRouteLongName(route);
   let shownTime;
   if (timeDiffInMinutes <= 0) {
     shownTime = intl.formatMessage({
@@ -90,7 +93,7 @@ export default function DepartureRow(
       { minutes: timeDiffInMinutes },
     );
   }
-  const { shortName } = trip.route;
+  const { shortName } = route;
   const lowerCaseShortName = shortName?.toLowerCase();
   const nameOrIcon =
     shortName?.length > 6 || !shortName?.length ? (
@@ -163,7 +166,7 @@ export default function DepartureRow(
         className={cx('route-number-container', {
           long: shortName && shortName.length <= 6 && shortName.length >= 5,
         })}
-        style={{ backgroundColor: `#${trip.route.color}` }}
+        style={{ backgroundColor: `#${route.color}` }}
       >
         <div aria-hidden="true" className="route-number">
           {nameOrIcon}
@@ -174,18 +177,18 @@ export default function DepartureRow(
         {icon && (
           <>
             <Icon
-              className={backgroundShape}
+              className={backgroundClass}
               img={icon}
               color={iconColor}
-              background={<IconBackground backgroundShape={backgroundShape} />}
+              background={background}
             />
             {sr}
           </>
         )}
       </td>
       <td className={cx('route-headsign', departure.bottomRow ? 'bottom' : '')}>
         <div className="headsign">
-          {headsign} {departure.bottomRow && departure.bottomRow}
+          {headsign} {departure.bottomRow}
         </div>
       </td>
       <td className="time-cell">

app/component/IndexPage.js

@@ -229,49 +229,53 @@ class IndexPage extends React.Component {
     const { intl, config } = this.context;
     const { colors, fontWeights } = config;
     const { lang } = this.props;
-    const transportModes = getTransportModes(config);
     const nearYouModes = getNearYouModes(config);
-
-    // Styles are defined by which button type is configured (narrow/wide)
-    const narrowButtons = config.narrowNearYouButtons;
-    const modeTitles = filterObject(
-      transportModes,
-      'availableForSelection',
-      true,
-    );
     // If nearYouModes is configured, display those. Otherwise, display all configured transport modes
-    const modes =
-      nearYouModes?.length > 0 ? nearYouModes : Object.keys(modeTitles);
+    const modeArray =
+      nearYouModes.length > 0
+        ? nearYouModes
+        : Object.keys(
+            filterObject(
+              getTransportModes(config),
+              'availableForSelection',
+              true,
+            ),
+          );
 
     const alertsContext = {
       currentTime: this.props.currentTime,
       getModesWithAlerts,
       feedIds: config.feedIds,
     };
 
+    const directionProps = config.narrowNearYouButtons
+      ? {}
+      : {
+          buttonStyle: config.nearYouButton,
+          horizontal: false,
+        };
+
     return config.showNearYouButtons ? (
       <CtrlPanel.NearStopsAndRoutes
-        modeArray={modes}
+        modeArray={modeArray}
+        modeSet={config.iconModeSet}
         urlPrefix={`/${PREFIX_NEARYOU}`}
         language={lang}
-        showTitle
+        title={config.nearYouTitle}
         alertsContext={alertsContext}
         origin={this.props.origin}
         omitLanguageUrl
         onClick={this.clickStopNearIcon}
-        buttonStyle={narrowButtons ? undefined : config.nearYouButton}
-        title={narrowButtons ? undefined : config.nearYouTitle}
-        modes={narrowButtons ? undefined : modeTitles}
-        modeSet={config.nearbyModeSet || config.iconModeSet}
         modeIconColors={colors.iconColors}
         fontWeights={fontWeights}
+        {...directionProps}
       />
     ) : (
       <div className="stops-near-you-text">
         <h2>
           {intl.formatMessage({
-            id: 'stop-near-you-title',
-            defaultMessage: 'Stops and lines near you',
+            id: 'near-you-search',
+            defaultMessage: 'Search stops and routes',
           })}
         </h2>
       </div>
@@ -288,12 +292,15 @@ class IndexPage extends React.Component {
     const { breakpoint, lang } = this.props;
     const origin = this.pendingOrigin || this.props.origin;
     const destination = this.pendingDestination || this.props.destination;
+    const locationSources = ['History', 'Datasource'];
     const sources = ['Favourite', 'History', 'Datasource'];
     const stopAndRouteSearchTargets = ['Stations', 'Stops', 'Routes'];
     const targets = getLocationSearchTargets(config, breakpoint !== 'large');
 
     targets.push('FutureRoutes');
-
+    if (this.context.getStore('FavouriteStore').getLocationCount()) {
+      locationSources.push('Favourite');
+    }
     if (!config.targetsFromOTP) {
       if (useCitybikes(config.vehicleRental?.networks, config)) {
         stopAndRouteSearchTargets.push('VehicleRentalStations');
@@ -312,7 +319,7 @@ class IndexPage extends React.Component {
       origin,
       destination,
       lang,
-      sources,
+      locationSources,
       targets,
       color,
       hoverColor,
@@ -375,13 +382,7 @@ class IndexPage extends React.Component {
           <h1 className="sr-only">
             <FormattedMessage id="index.title" default="Journey Planner" />
           </h1>
-          <CtrlPanel
-            instance="hsl"
-            language={lang}
-            origin={origin}
-            position="left"
-            fontWeights={fontWeights}
-          >
+          <CtrlPanel position="left" fontWeights={fontWeights}>
             <span className="sr-only">
               <FormattedMessage
                 id="search-fields.sr-instructions"
@@ -433,12 +434,7 @@ class IndexPage extends React.Component {
             backgroundColor: '#ffffff',
           }}
         >
-          <CtrlPanel
-            instance="hsl"
-            language={lang}
-            position="bottom"
-            fontWeights={fontWeights}
-          >
+          <CtrlPanel position="bottom" fontWeights={fontWeights}>
             <LocationSearch
               disableAutoFocus
               isMobile

app/component/ParkAndRideContent.js

@@ -11,14 +11,16 @@ import { PREFIX_BIKEPARK, PREFIX_CARPARK } from '../util/path';
 import { DATE_FORMAT } from '../constants';
 
 function ParkAndRideContent(
-  { vehicleParking, error, currentLanguage },
+  { vehicleParking, error, currentLanguage, mode, showInfo, backButton },
   { config, intl, router, match },
 ) {
   // throw error when relay query fails
   if (error) {
     throw error.message;
   }
-  const bikePark = match.location.pathname.includes(PREFIX_BIKEPARK);
+  const bikePark = mode
+    ? mode === 'BIKEPARK'
+    : match.location.pathname.includes(PREFIX_BIKEPARK);
   if (!vehicleParking) {
     const path = bikePark ? PREFIX_BIKEPARK : PREFIX_CARPARK;
     router.replace(`/${path}`);
@@ -37,7 +39,7 @@ function ParkAndRideContent(
     spacesAvailable = vehicleParking.availability?.bicycleSpaces;
   } else {
     spacesAvailable = vehicleParking.availability?.carSpaces;
-    maxCapacity = vehicleParking.capacity?.carSpaces || 1;
+    maxCapacity = vehicleParking.parkCapacity?.carSpaces || 1;
   }
 
   const {
@@ -146,6 +148,7 @@ function ParkAndRideContent(
       <ParkOrStationHeader
         parkOrStation={vehicleParking}
         parkType={bikePark ? 'bike' : 'car'}
+        backButton={backButton}
       />
       <div className="park-content-container">
         <Icon img={`icon_${prePostFix}`} height={2.4} width={2.4} />
@@ -205,29 +208,31 @@ function ParkAndRideContent(
           )}
         </div>
       </div>
-      <div className="citybike-use-disclaimer">
-        <h2 className="disclaimer-header">
-          {intl.formatMessage({ id: `${prePostFix}-disclaimer-header` })}
-        </h2>
-        <div className="disclaimer-content">
-          {intl.formatMessage({ id: `${prePostFix}-disclaimer` })}
+      {showInfo && (
+        <div className="citybike-use-disclaimer">
+          <h2 className="disclaimer-header">
+            {intl.formatMessage({ id: `${prePostFix}-disclaimer-header` })}
+          </h2>
+          <div className="disclaimer-content">
+            {intl.formatMessage({ id: `${prePostFix}-disclaimer` })}
+          </div>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          {config.parkAndRide.url && (
+            <a
+              onClick={e => {
+                e.stopPropagation();
+              }}
+              className="external-link"
+              href={config.parkAndRide.url[lang]}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {intl.formatMessage({ id: `${prePostFix}-disclaimer-link` })}{' '}
+              &rsaquo;
+            </a>
+          )}
         </div>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        {config.parkAndRide.url && (
-          <a
-            onClick={e => {
-              e.stopPropagation();
-            }}
-            className="external-link"
-            href={config.parkAndRide.url[lang]}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {intl.formatMessage({ id: `${prePostFix}-disclaimer-link` })}{' '}
-            &rsaquo;
-          </a>
-        )}
-      </div>
+      )}
     </div>
   );
 }
@@ -236,11 +241,17 @@ ParkAndRideContent.propTypes = {
   vehicleParking: parkShape,
   error: errorShape,
   currentLanguage: PropTypes.string.isRequired,
+  mode: PropTypes.oneOf(['CARPARK', 'BIKEPARK']),
+  showInfo: PropTypes.bool,
+  backButton: PropTypes.bool,
 };
 
 ParkAndRideContent.defaultProps = {
   vehicleParking: undefined,
   error: undefined,
+  mode: undefined,
+  showInfo: true,
+  backButton: true,
 };
 
 ParkAndRideContent.contextTypes = {

app/component/ParkContainer.js

@@ -8,7 +8,7 @@ const containerComponent = createFragmentContainer(ParkAndRideContent, {
         bicycleSpaces
         carSpaces
       }
-      capacity {
+      parkCapacity: capacity {
         carSpaces
       }
       name

app/component/ParkOrStationHeader.js

@@ -3,17 +3,17 @@ import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { configShape } from '../util/shapes';
 import StopCode from './StopCode';
+import withBreakpoint from '../util/withBreakpoint';
 import BackButton from './BackButton';
 import { getJson } from '../util/xhrPromise';
 import getZoneId from '../util/zoneIconUtils';
 import ZoneIcon from './ZoneIcon';
-import withBreakpoint from '../util/withBreakpoint';
 import { hasVehicleRentalCode } from '../util/vehicleRentalUtils';
 import { getIdWithoutFeed } from '../util/feedScopedIdUtils';
 import FavouriteVehicleRentalStationContainer from './FavouriteVehicleRentalStationContainer';
 
 const ParkOrBikeStationHeader = (
-  { parkOrStation, breakpoint, parkType },
+  { parkOrStation, breakpoint, parkType, backButton },
   { config },
 ) => {
   const [zoneId, setZoneId] = useState(undefined);
@@ -48,7 +48,7 @@ const ParkOrBikeStationHeader = (
 
   return (
     <div className="bike-station-header">
-      {breakpoint === 'large' && (
+      {breakpoint === 'large' && backButton && (
         <BackButton
           icon="icon_arrow-collapse--left"
           iconClassName="arrow-icon"
@@ -80,17 +80,21 @@ const ParkOrBikeStationHeader = (
 };
 
 ParkOrBikeStationHeader.propTypes = {
-  breakpoint: PropTypes.string.isRequired,
+  backButton: PropTypes.bool,
   parkOrStation: PropTypes.shape({
     name: PropTypes.string.isRequired,
     stationId: PropTypes.string,
     lat: PropTypes.number.isRequired,
     lon: PropTypes.number.isRequired,
   }).isRequired,
   parkType: PropTypes.string,
+  breakpoint: PropTypes.string.isRequired,
 };
 
-ParkOrBikeStationHeader.defaultProps = { parkType: undefined };
+ParkOrBikeStationHeader.defaultProps = {
+  parkType: undefined,
+  backButton: true,
+};
 
 ParkOrBikeStationHeader.contextTypes = {
   config: configShape.isRequired,

app/component/bike-park-rental-station.scss

@@ -2,11 +2,7 @@
   .bike-station-page-container {
     height: calc(100% - 20rem);
     padding: 18px 1.563em 2em;
-    background-color: white;
-    border-radius: 15px 15px 0 0;
-    box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.2);
     position: relative;
-    top: -15px;
     margin: 0;
 
     .citybike-full-station-guide {